ES6语法

let  var const的区别

let

1.let不能重复声明变量

2.let有块级作用域（只在函数内部有用，代码块外部显示不出来）

var没有块级作用域【let和var的主要区别】

【在if else for while中用let声明也是块级作用域】

3.不存在变量提升（let不允许在变量声明前调用）

4.暂时性死区，使代码更加安全（所有的变量必须先定义再使用）（不影响作用域）

隐蔽的暂时性死区：

 var 

1.可以重复声明变量

2.存在变量提升

3.var没有块级作用域

const

const用来声明常量（值不能修改的量)

1.一定要赋初始值

2.一般常量要大写

3.常量的值不能修改

4.是块级作用域

5.对于数组和对象的元素修改，不算做对常量的修改，常量的地址没有改变（不会报错）

【用const声明数组和对象】

模板字符串【``】

这是ES6引入的新的声明字符串（'' "这是ES5的）

1.内容中可以出现换行符

2.可以进行变量拼接

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法 

字符串插值 ${}

所有插入的值都会使用 toString() 强制转型为字符串，而且任何 JavaScript 表达式都可以用于插

值。

let value = 5; 
let exponent = 'second'; 

// es5
let interpolatedString = 
 value + ' to the ' + exponent + ' power is ' + (value * value); 

// es6 模板字面量
let interpolatedTemplateLiteral = 
 `${ value } to the ${ exponent } power is ${ value * value }`; 

console.log(interpolatedString); // 5 to the second power is 25 
console.log(interpolatedTemplateLiteral); // 5 to the second power is 25

箭头函数（=>）

1. this 是静态的  this 始终指向函数声明时所在作用域下的 this 的值

 2. 不能作为构造实例化对象

3. 不能使用 arguments 变量

箭头函数的简写

1) 省略小括号, 当形参有且只有一个的时候

2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略，而且语句的执行结果就是函数的返回值

ES6 允许给函数参数赋值初始值

1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)

2. 与解构赋值结合

rest 参数（...）

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

（rest 参数必须要放到参数最后）（转换为数组）

 扩展运算符（...）

可以将数组转换为逗号分隔的参数序列

 1. 数组的合并

 扩展运算符与Object.assign()

 assign合并两个对象 

2. 数组的克隆

3. 将伪数组转为真正的数组

symbol 

ES6引入新的原始数据类型，类似于字符串的数据类型

特点：1.symbol的值是唯一的，用来解决命名冲突

           2.symbol的值不能与其他数据进行运算

          3.symbol定义的对象属性不能用for...in循环遍历，但是可以用Reflect.ownkeys来获取对象所               有的键名

 

迭代器(iterator)

是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口（就是对象里的一个属性），就可以完成遍历操作。
1)创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费

2)原生具备iterator接口的数据(可用for...of遍历)
 Array   Arguments   Set   Map   String   TypedArray  NodeList 
3)工作原理
a)创建一个指针对象，指向当前数据结构的起始位置
b)第一次调用对象的next方法，指针自动指向数据结构的第一个成员
c)接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员

d)每调用next方法返回包含value和done属性的方法

 Promise

是ES6引入的关于异步编程的新的解决方案，在语法上它是一个构造函数，用来封装异步操作并获取结果。

 Promise 的三种状态:

1.初始状态（未完成）：pending

初始状态可以改变，在resolve或reject调用之前都处于初始状态

2.最终成功状态：fulfilled

执行resolve函数，状态改变为fulfilled

执行onFulfilled函数

3.最终失败状态：rejected

执行reject函数，状态改变为rejected

执行onRejected函数

上面三种状态里面，fulfilled和rejected合在一起称为resolved（已定型）。

这三种的状态的变化途径只有两种：

• 从“未完成”到“成功”
• 从“未完成”到“失败”

一旦状态发生变化，就凝固了，不会再有新的状态变化。Promise 实例的状态变化只可能发生一次。因此，Promise 的最终结果只有两种。

• 异步操作成功，Promise 实例传回一个值（value），状态变为fulfilled。
• 异步操作失败，Promise 实例抛出一个错误（error），状态变为rejected。

 Promise 的九个方法：

Promise.resolve、Promise.reject、Promise.then、Promise.catch、Promise.finally、Promise.all、Promise.allSettled、Promise.race、Promise.any；

1.Promise.resolve

 
new Promise(function (resolve) {
    resolve(42)
})

静态方法 Promise.resolve(value),这个静态方法会让Promise对象立即进入确定状态（resolved)，并将数值42传递给后面then里所指的onFulfilled函数。

 简单总结一下  Promise.resolve方法的话：它的作用就是将传递给它的参数填充Fulfilled到Promise对象后并返回这个Promise对象。

2.Promise.reject

 
new Promise(function (reject) {
    reject(new Error("Promise reject error"))
})

Promise.reject（error)是和 Promise.resolve(value)类似的静态方法, 简单总结一下 Promise.reject方法的话：它的功能是调用该 Promise对象通过then指定的 onRejected函数，并讲错误（Error）对象传递给这个onRejected函数。

3.Promise.then

Promise.then(onFulfilled, onRejected)
 

4. Promise.catch

 Promise.catch是Promise.then(undefined, onRejected)方法的别名，也就是说这个方法用来注册当Promise对象状态改变为Rejected时的回调函数。

 5. Promise.finally

Promise.finally方法的回调函数不接受任何参数，这意味着finally没有办法知道，前面的Promise状态到底是fulfilled还是Rejected。这表明，finally方法里面的操作，应该是与Promise状态无关的，不依赖于 Promise的执行结果。

6. Promise.all

Promise.all接受一个promise对象的数组作为参数，当这个数组里的所有 Promise 对象全部变为resolve或者reject状态的时候，它才会去调用.then方法。

传递给Promise.all的 promise并不是一个个的顺序执行的，而是同时开始、并行执行的。

 
var promise1 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    resoleve("promise1--3000");
  }, 3000);
});
var promise2 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    resoleve("promise2--1000");
  }, 1000);
});
var promise3 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    resoleve("promise3--5000");
  }, 5000);
});
 
var promiseArr = [promise1, promise2, promise3];
console.time("promiseArr");
Promise.all(promiseArr)
  .then((res) => {
    console.log("res", res); // ['promise1--3000', 'promise1--1000', 'promise1--5000']
    console.timeEnd("promiseArr"); // 5523.29296875 ms
  })
  .catch((err) => console.log(err));

 Promise.all()是并行的，因为所有Promise执行完只用了5秒，如果3个 Promise是按照顺序执行的，那么应该是9秒或者，在5-9之间，因为4个Promise并不是同时执行的，同时执行的 话总时间就是那个花费时间最长的Promise。

Promise.all()重要细节点 （面试常考）：

• 如果所有的Promise中只有一个执行错误，那么整个Promise.all不会走Promise.all().then() 而是走Promise.all().catch()这个流程了。但是要注意的是虽然走到了Promise.all().catch()这个流程 ，但是其他 Promise 还是会正常执行，但不会返回结果
• 要注意Promise.all()的返回值顺序，Promise.all().then()的返回值顺序和传入的顺序是一致的 

 7. Promise.allSettled

Promise.allSettled()的入参和Promise.all、Promise.race一样，接受一个promise 对象的数组作为参数,也是同时开始、并行执行的。但是Promise.allSettled的返回值需要注意以下几点：

Promise.allSettled不会走进catch，当所有输入Promise都被履行或者拒绝时， statusesPromise 会解析一个具有具体完成状态的数组

• { status: 'fulfilled', value:value } ：如果相应的promise被履行
• { status: 'rejected', reason: reason }：如果相应的promise被拒绝

总结一下：Promise.allSettled()在你需要执行平行和独立的异步操作并收集所有结果时非常有效， 即使某些异步操作可能失败。

8. Promise.race

Promise.rece()的使用方法和 Promise.all一样，接收一个promise 对象的数组为参数，Promise.race是要有一个promise对象进入Fulfilled或者 Rejected状态的话，就会继续进行后面的处理。这里依旧有两个点要注意：

• 和Promise.all一样是所有数组当中的Promise同时并行的
• Promise.race 在第一个Promise对象变为Fulfilled之后，并不会 取消其他promise对象的执行。
• Promise.race接受的是一个Promise对象数组，但是返回的确实最先完成Fulfilled 或者最先被Rejected的一个Promise的结果

 9. Promise.any

Promise.any的入参和Promise.all、Promise.rece、Promise.allSettled一样， 接收一个promise 对象的数组作为参数。

• 只要其中有一个Promise成功执行，就会返回已经成功执行的Promise的结果
• 如果这个promise对象的数组中没有一个promise 可以成功执行（即所有的 promise都失败 ），就返回一个失败的promise 和AggregateError类型的实例，它是Error的一个子类，用于把单一的错误集合在一起

Promise.any的应用场景：如果我们现在有多台服务器，则尽量使用响应速度最快的服务器，在这种情况下， 可以使用Promise.any()方法从最快的服务器接收响应。

Set(集合）

ES6提供的新的数据结构，类似数组，但成员值是唯一的，它实现了iterator接口，可以使用扩展运算符（...）和（for ...of...)进行遍历。集合的属性和方法：

size 返回集合的元素个数

add  增加一个新元素，返回当前集合

delete 删除元素，返回boolean值

has 检查集合中是否有某一个元素，返回boolean值

Map数据结构

类似于对象，也是键值的集合。“键”不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了iterator接口，可以使用扩展运算符（...）和（for ...of...)进行遍历。Map的属性和方法：

size 返回Map的元素个数

set  增加一个新元素，返回当前Map

get  返回键名对象的键值

clear  清空集合，返回undefined

has 检查Map中是否有某一个元素，返回boolean值

Maps 和 Objects 的区别 

• 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。

• Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。

  关于对象是无序的官方解释： 1.An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method. 2.Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版规范。因此，使用 for-in 语句遍历对象属性时遍历书序并非属性构建顺序。而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范，属性遍历顺序由属性构建的顺序决定。

• Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。

• Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

class类

作为对象的模板，通过class关键字可以定义类，ES6的class中的大部分功能在ES5中都可以实现，新的class写法只是让对象原型的写法更加清晰，更加面向对象编程的语法。

ES5通过构造函数实例化对象

  ES6  class语法

 ES5 构造函数继承

 ES6  class类继承

模块化 

优点：1.防止命名冲突 2.代码复用 3.高维护性

ES6模块化语法：模块功能由以下两个命令构成

1.export用于规定模块的对外接口

2.import用于输入其他模块提供的功能