前端面试ES6、7、8

一、var、let、const三者的区别
在es6之前变量声明都是用的var关键字，因为js中预解析（浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义）存在。
1.var
1）存在变量提升。
2）没有块级作用域。
2.let（定义变量）
1）不存在变量提升。
2）有块级作用域。
3）不允许在同一作用域内重复声明同一个变量。
4）暂时性死区：在代码块内，使用let声明变量之前，该变量都是不可以使用。
5）先声明后使用。
3.const（定义常量）
1）先声明后使用。
2）有块级作用域。
3）不允许在同一作用域内重复声明同一个变量。
4）声明的常量不能改变，意味着const一旦声明常量，就必须同时初始化。
5）const声明的对象的属性是可以更改的。（对象是引用型数据类型，用const声明常量保存的是对象的地址，不可变的是地址）
二、模板字符串
1.基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
2.在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
三、箭头函数
写法()=>{}
1.不需要function关键字来创建函数。
2.省略return关键字。
3.继承当前上下文的 this 关键字。
作用及应用场景：
箭头函数可以使函数内部的this和外部保持一致（箭头函数本身没有this指向）。
可以在ajax/axios中的回调函数中使用箭头函数，让回调函数中的this指向事件源。
可以在定时器的第二个参数中使用箭头函数，避免函数内部this指向全局window。
四、Promise
Promise本身并没有提供任何的代码逻辑，它只是帮助我们来改造代码结构，最显著的一个特点就是通过promise可解决传统的回调地狱问题，代码层面promise提供了一个构造函数，在使用的时候必须通过new创建一个实例对象，在创建实例对象的时候需要传递一个匿名函数，这两个匿名函数需要两个参数（resolve，reject），resolve成功处理函数，jeject失败处理函数，什么时候出发成功或者失败函数由具体的业务逻辑来决定，resolve和reject需要通过promise实例对象提供的then方法来传递，Promise 提供了两个静态方法 all,race,all 可以一次执行多个 Promise 实例, 返回值是数组; race 也可以一次执行多个Promise 实例, 哪个实例最先执行完, 就返回哪个的执行结果.。
五、async/await（ES7）
async用来修饰函数的声明，使用async修饰的函数会变成一个异步函数，await用来修饰函数的调用，被await修饰的函数必须返回一个promise异步对象，使用await修饰后，就会将promise异步对象转换成一个同步操作。
六、扩展运算符（…）
它可以通过减少赋值语句的使用，或者减少通过下标访问数组或对象的方式，使代码更加简洁优雅，可读性更佳。
1、在函数调用时使用拓展运算符。
function myFunction(x, y, z) {
console.log(x+""+y+""+z);
}
var args = [0, 1, 2];
myFunction(…args);
// 1+""+2+""+3
2、数组和对象的拷贝
var arr1 = [1,2,3];
var arr2 = […arr1];
arr2.push(4);
console.log(arr1 === arr2); // false
console.log(arr1); // [1,2,3]
console.log(arr2);// [1,2,3,4]
var obj1 = {a:1,b:2};
var obj2 = {…obj1};
console.log(obj2); //{ a:1, b:2}
console.log(obj1 === obj2);// false
3、字符串转数组
var demo = “hello”
var str = […demo];
console.log(str);
// [“h”, “e”, “l”, “l”, “o”]
七、数组、对象的解构赋值
1.数组的结构赋值（数组的结构赋值按照对应的顺序进行解构）
let [a,b,c] = [1,2,3]//a:1;b:2;c:3
同样也可以使用嵌套数组进行解构
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [head, …tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
2.对象的解构赋值（对象解构赋值是按照key值匹配来给它们对应的value值赋值）
let { foo, bar } = { foo: “aaa”, bar: “bbb” };
//这里就等于let { foo:foo, bar:bar } = { foo: “aaa”, bar: “bbb” };
foo // “aaa”
bar // “bbb”
let { foo: baz } = { foo: ‘aaa’, bar: ‘bbb’ };
baz // “aaa”
let obj = { first: ‘hello’, last: ‘world’ };
let { first: f, last: l } = obj;
f // ‘hello’
l // ‘world’
八、对象字面量的增强
解决问题：缩减代码
什么是字面量：一般等号右边的内容都是字面量
增强对象字面量可以对对象的属性和方法进行简写(属性名和属性值相同, 可缺省);
注意下列代码的url和data
$.ajax({
url,//url:url
data,//data:data
method:‘POST’,
success(back) {
console.log(back)
},
error(error){
console.log(error)
}
九、求幂运算符（ES7）
1.基本用法
3 ** 2 //9
效果同
Math.pow(3, 2)
2.由于是运算符，所以可以和 +=一样的用法
var b = 3;
b **= 2;
console.log(b); //9
十、includes（ES7）
作用：是查找一个值在不在数组里,若是存在则返回true,不存在返回false.
1.基本用法：
[‘a’, ‘b’, ‘c’].includes(‘a’) // true
[‘a’, ‘b’, ‘c’].includes(‘d’) // false
2.接收俩个参数：要搜索的值和搜索的开始索引
[‘a’, ‘b’, ‘c’, ‘d’].includes(‘b’) // true
[‘a’, ‘b’, ‘c’, ‘d’].includes(‘b’, 1) // true
[‘a’, ‘b’, ‘c’, ‘d’].includes(‘b’, 2) // false
与indexOf()作比较（includes()返回的是布尔值，能直接判断数组中存不存在这个值，而indexOf()返回的是索引）
有些时候是等效的
[‘a’, ‘b’, ‘c’].includes(‘a’) //true
[‘a’, ‘b’, ‘c’].indexOf(‘a’) > -1 //true
var arr = [1, 2, 3]
var a = 1;
arr.includes(a) //true
arr.indexOf(a) //0
在判断 +0 与 -0 时，被认为是相同的。
[1, +0, 3, 4].includes(-0) //true
[1, +0, 3, 4].indexOf(-0) //1
只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些，是无法判断的.
var arr = [1, [2, 3], 4]
arr.includes([2, 3]) //false
arr.indexOf([2, 3]) //-1