2020-3月份前端面试总结——js/es6相关

JS方面

备注： + 代表被问到的次数，没有 + 代表自己整理了，但没被问到

1.js继承的方式+

原型链继承

借用构造函数继承（通过call()实现）

组合继承(原型+借用构造)

通过ES6中class的extends关键字实现继承

2.NEW操作符做了那些事情+

创建一个新对象；

将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；

执行构造函数中的代码（为这个新对象添加属性）；

返回新对象

3.call/aplay的区别++

​ 作用：动态改变某个类的某个方法的运行环境（执行上下文）

call可以传入多个参数；

apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

4.this指向哪里？+

​ JavaScript this 关键词指的是它所属的对象。

​ 它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。

单独的情况下，this 指的是全局对象。

在函数中，this 指的是全局对象。

在函数中，严格模式下，this 是 undefined。

在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

5.闭包的理解和优缺点+

能够读取其他函数内部变量的函数/定义在一个函数内部的函数；

闭包的作用是可以创建封闭作用域

闭包的优点：可以避免全局变量的污染

闭包的缺点：常驻内存，会增大内存使用量，使用不当很容易造成内存泄露

6.防抖和节流的使用场景+

debounce （防抖）函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

const _.debounce = (func, wait) => {

    let timer;

    return () => {

        clearTimeout(timer);

        timer = setTimeout(func, wait);

    };

};

throttle （节流）是为了限制函数一段时间内只能执行一次，在延时的时间内，方法若被触发，则直接退出方法

鼠标不断点击触发，mousedown(单位时间内只触发一次)

监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

const _.throttle = (func, wait) => {

    let timer;

    return () => {

        if (timer) {

            return;

        }

        timer = setTimeout(() => {

            func();

            timer = null;

        }, wait);

    };

};

7.浏览器的事件触发+

 冒泡和捕获，事件流，捕获 => 目标阶段 => 冒泡 

addEventListener(‘click’,function(){},false)  //冒泡阶段触发 

 addEventListener(‘click’,function(){},true) // 捕获阶段触发 

长列表场景：事件代理，将事件绑定到父元素，通过冒泡将其冒到父元素上进行处理，target属性用来区分那个子元素.优点，节省内存，不用为新增元素绑定事件。

 阻止冒泡：stopPropagation() 

8.数组去重

去重方法一(Set)

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值

var duplicate = Array.from(newSet(newArr1))

去重方法二(reduce)

通过数组reduce方法，利用indexOf判断上一次回调返回数组a中是否包含当前元素b的索引，如果不存在，则把b元素加入a数组，否则直接返回a。

varduplicate1 = newArr1.reduce((a, b) => {

  if(a.indexOf(b) === -1) {

    a.push(b)

  }

  returna

}, [])

去重方法三(数组下标去重法)

通过数组的过滤filter方法，利用indexOf获取当前元素ele在被过滤数组farr中的第一个索引值，如果值与当前索引值index相等则返回，如果不相等则过滤。

varduplicate2 = newArr1.filter((ele, index, farr) => {

  returnfarr.indexOf(ele) === index

})

去重方法四(遍历数组)

遍历数组，建立新duplicate3 数组，利用indexOf判断元素是否存在于duplicate3 新数组中，不存在则push到duplicate3 新数组。

varduplicate3 = []

for(vari = 0; i < newArr1.length; i++) {

  if(duplicate3.indexOf(newArr1[i]) === -1) {

    duplicate3.push(newArr1[i])

  }

}

去重方法五(排序后相邻去重法)

给传入数组排序，排序后相同值相邻，然后遍历时新数组只加入不与前一值重复的值。

functionunique3(arr) {

  arr.sort();

  var newArr = [arr[0]];

  for(vari = 1, len = arr.length; i < len; i++) {

    if(arr[i] !== newArr[newArr.length - 1]) {

      newArr.push(arr[i]);

    }

  }

  returnnewArr;

}

varduplicate4 = unique3(newArr1)

9.浅拷贝与深拷贝++

​ 浅拷贝： =号符   /Array.prototype.slice() — 数组    /Object.assign() — 对象

​ 深拷贝：JSON.parse(JSON.stringify());

10.原型链

​ 当访问对象中的属性或方法时，如果对象中没有该属性或方法，则会向此对象的 proto 寻找该属性或方法，如果找了，就返回该属性，若没有找到，则继续向此对象的 proto .proto 查找该属性,一直访问的windows对象，都没有返回undefind

在任何对象上查找某个属性时，会先在其自身上找，当查找不到时，会在此对象的 proto 属性上去查找

可以用 Object.create§ 创建一个 proto 为 p 的对象，即返回的对象的 proto 指向 p

可以通过 Object.getPrototypeOf(obj) 获得 obj 对象的【proto】

其与对象的 proto 属性其实是同一个东西，只是后者更加标准

但在更早的浏览器中，这两者都是不可用的

可以通过Object.setPrototypeOf(obj1, obj2)设置obj1对象的__proto__为obj2