ES6面试题（测试题）

1.简述vue生命周期？

从vue实例被创建开始到该实例最终被销毁个过程叫做vue的生命周期。在这个周期内大致发生一下几件事，我们从vue实例被创建开始，首先vue实例被创建，之后开始数据的初始化，编译模板，挂载dom，渲染dom，更新对象属性，渲染dom，解绑销毁。
（详情了解可以跳转我的另外一篇博客Vue生命周期函数详解）

2.什么是插槽？你用过哪些插槽？

它是vue提出的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，使得模块分块，具有模块化特质。
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

3.vue中key的作用

可以唯一的确定一个DOM元素，让diff算法更加高效

4.使用Promise封装ajax？

function fetch(method, url, data){
   
    return new Promise((resolve, reject) => {
   
        var xhr = new XMLHttpRequest();
        var method = method || "GET";
        var data = data || null;
        xhr.open(method, url, true);
        xhr.onreadystatechange = function() {
   
            if(xhr.status === 200 && xhr.readyState === 4){
   
                resolve(xhr.responseText);
            } else {
   
                reject(xhr.responseText);
            }
        }
        xhr.send(data);
        })
}

5.CommonJS模块与ES模块的区别？

CommonJS 模块输出的是⼀个值的拷⻉，ES6 模块输出的是值的引⽤。
CommonJS 模块是运⾏时加载，ES6 模块是编译时输出接⼝。
CommonJS 模块的 require() 是同步加载模块，ES6 模块的 import 命令是异步加载，
有⼀个独⽴的模块依赖的解析阶段。

CommonJS

1.对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。
2.对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。
3.当使用require命令加载某个模块时，就会运行整个模块的代码。
4.当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
5.循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

ES6模块

6.ES6模块中的值属于【动态只读引用】。
7.对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
1.对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
2.循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。

6.简述for-in、for-of、forEach区别？

forEach：（可以三个参数，第一个是value，第二个是index，第三个是数组体）

 1.定义：用于调用数组的每个元素，并将元素传递给回调函数；
 
 2.缺点：不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据，方法不能使break，continue语句跳出循环，或者使用return从函数体返回，对于空数组不会执行回调函数；
 
 3.优点：便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的效率。

for in:（它大部分用于遍历对象 json）

1.定义：用于循环遍历数组或对象属性，for in循环里面的index是string类型的，代码每执行一次，就会对数组的元素或者对象的属性进行一次操作；

2.缺点：某些情况下，会出现随机顺序的遍历，因为里面的值是string类型，所以增加了转换过程，因此开销较大；
 
3.优点：可以遍历数组的键名，遍历对象简洁方便。

for of:（可遍历map，object,array,set string等）

 1.定义：用来遍历数据，比如组中的值；
 
 2.缺点：不适用于处理原有的原生对象（原生对象是一个子集，包含一些在运动过程中动态创建的对象）；
 
 3.优点：避免了for in的所有缺点，可以使用break,continue和return，不仅支持数组的遍历，还可以遍历类似数组的对象，支持字符串的遍历，最简洁，最直接的遍历数组的语法，支持map和Set对象遍历。

7.谈谈你对this的理解？

普通函数中的this指向：

• 情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window（在浏览器模式下）。
• 情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
• 情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。
• 情况4：如果通过call、apply、bind更改this指向，则this指向这三者方法中的第一个参数。（第一个参数即为指定的this指向地方）。

箭头函数的this:

• 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this.

8.ES6 中的 Set如何使用，如何实现自己的 Set？

ES6提供了新的数据结构Set,它类似于数组，但是成员的值是唯一的，没有重复的值（对于基本类型来说）。Set本身是一个构造函数，用来生成Set数据结构。
1、声明

 let set = new Set();
// 即创建了一个空的set

2、赋值

let set1 = new Set(['张三', '李四', '王五']);
console.log(set1)
// 输出为：Set(3) {"张三", "李四", "王五"}

3、属性：使用size求集合的大小（长度）

let set1 = new Set(['张三', '李四', '王五'