前言

坐标深圳，，最近一两个月面试过几家公司，陆陆续续拿到一些offer，记录一下最近一次鹅厂的面试经历。

答案陆续奉上...

答案只是个人理解，可能不够标准或者不是很完善

一面：电话面试

时间大概40分钟。

1. 什么是事件代理（事件委托）

把子元素的事件绑定在父元素上。

优点：(1)效率高，不用重复在子元素上绑定事件；(2)动态添加的子元素也不用再绑定事件了；(3)target是触发元素，currentTarget是绑定元素

缺点：事件代理（事件委托）的原理是子元素的事件冒泡，被父元素捕捉，因此不能冒泡的事件不支持事件代理

2. 捕捉与冒泡有什么区别，事件绑定时如何区分捕捉与冒泡

DOM事件流存在三个阶段：事件捕捉阶段（由外而内）=>目标阶段=>事件冒泡阶段（由内而外） addEventListener的第三个参数默认是false（事件在冒泡阶段处理函数），如果为true则表示事件在捕捉阶段处理函数

DOM.addEventListener("click", function(e) {
    console.log("click-body");
}, false);

3. 什么是盒模型

4. HTML5新增了哪些语义化标签

5. CSS有哪些选择器，选择器的权重

6. CSS3有新增了哪些属性

7. flex有哪些常用的属性

8. vue中v-if和v-show的区别

9. VUE源码了解多少，描述一下你所了解的虚拟DOM和Diff算法

10. ES6新增了哪些属性

11. 你用过ES7和ES7+新增了的哪些属性

12. Promise规范的内容，如何同时执行多个Promise对象

二面：笔试

桌面共享远程笔试，一共8道题，时间60分钟。

1. CSS题

（1）请用CSS实现一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
     .a1 {
      width: 0px;
      height: 0px;
      border-bottom: 150px solid #000;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
    }
    </style>
</head>
<body>
    <div class="a1"></div>
</body>
</html>

（2）请用CSS实现：单行文字超出部分用省略号表示

dom {
  overflow: hidden; // 超出的部分被隐藏,不占位
  text-overflow:ellipsis; // 当对象内文本溢出时显示省略标记（...）
  white-space: nowrap; // 文本不进行换行
}

2. 以下代码的输出结果

(1)

fun();
var fun;
function fun () {
  console.log(1);
}
var fun = function () {
  console.log(2);
}
// 答案：1
// 考点：变量提升，如果把fun()放在最后一行，答案是2

(2)

function foo () {
  getName = function () {
    console.log(1);
  }
  return this;
}
foo.getName = function () {
  console.log(2);
}
foo.prototype.getName = function () {
  console.log(3);
}
var getName = function () {
  console.log(4);
}
function getName () {
  console.log(5);
}
foo.getName();
getName();
foo().getName();
getName();
new foo().getName();
new new foo().getName();

// 2 4 1 1 3 3

3. 以下代码的输出结果

（1）

console.log(true == 1) // true
console.log(true === 1) // false
console.log('1' + 2 + 3) // '123'
console.log(1 + 2 + '3') // '33'
console.log(0.1 + 0.2 === 0.3) // false
console.log(0.5 + 0.1 === 0.6) // true
console.log(typeof NaN) // 'number'
console.log(typeof null) // 'object'

（2）

async function async1 () {
	console.log(1);
	await async2()
	console.log(2);
};
async function async2 () {
	console.log(3);
};
console.log(4);
setTimeout(function () {
	console.log(5);
}, 0) 
async1();
new Promise(function (resoleve) {
	console.log(6);
	resoleve()
}).then(function () {
	console.log(7);
})
console.log(8);

// 4 1 3 6 8 2 7 5

4. 写出字符串转换为数组的方法，eg: 'tencent' => ['t', 'e', 'n', 'c', 'e', 'n', 't']

function strToArr(str) {
  if (typeof str !== 'string') {
    return false 
  }
  return str.split('')
}

5. 什么是防抖，请写一个防抖函数

function debounce (fun, wait = 500) {
  let timeout;
  return function () {
    let context = this;
    let args = argumengs;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      fun.apply(context, args)
    }, wait)
  }
}

6. 原生实现一个ES5的bind()

Function.prototype.myBind = function (thisArg) {
  if (typeof this !== 'function') {
    throw TypeError('is not a function')
  }
  const args = Array.prototype.slice.call(argumengs, 1);
  const self = this;
  const nop = function () {};
  const bound = function () {
    return self.apply(this instanceof nop ? this : thisArg, args.concat(Array.prototype.slice.call(argumengs))
  }
  if (this.prototype) {
    nop.prototype = this.prototype
  }
  bound.prototype = new pop();
  return bound;
}

7. （算法题）只出现一次的数字：给定一个整数数组nums，其中恰好有两个元素只出现一次，其余所有元素均出现两次，找出只出现一次的那两个元素。实例输入： [1, 2, 1, 3, 2, 5] 输出 [3, 5]

var signleNumbers = function (nums) {
  let res = [];
  const len = nums.length;
  const map = new Map();
  for (let i = 0; i < len ; i++) {
	if (map.has(nums[i])) {
		map.delete(nums[i]);
	} else {
	  map.set(nums[i], 1);
	}
  }
  map.forEach((val, key) => {
    res.push(key);
  })
  return res;
}

8. （算法题）连续子数组的最大和：输入一个整型数组，数组里有正数也有负数。求连续子数组和的最大值，要求事件复杂度为O(n)，空间复杂度为O(1)。实例输入：nums = [-2, 1, -3, 4, -1, 2, 1, -5, 4]，输出： 6，解释：连续子数组[4, -1, 2, 1]的和最大，为 6

var maxSubArray = function (nums) {
 let res = [0];
 let tem = nums[0];
 for (let num of nums) {
   tem = Math.max(tem + num, num);
   if (tem >res) {
     res = tem
   }
 }
 return res;
}

三面：电话面试

1. 自我介绍

2. 自己认为有哪些优势

3. 当前离职的原因是什么

4. 什么是线程与进程

5. 描述一下浏览器的线程与进程

6. 什么浏览器缓存

7. 如何防御CSRF

8. 什么是IO多路复用

9. 描述工作中遇到的两个技术难点，分别是如何解决的

10. 数组结构类型与链表结构类型有什么区别

11. 你了解的排序算法有哪些

12. 什么是动态规划算法

13. 什么是贪心算法

14. 描述一下你了解的nginx

15. 计算机是如何管理内存的

一次面试分享

前言

答案只是个人理解，可能不够标准或者不是很完善

一面：电话面试

二面：笔试

三面：电话面试