ESCMAScript新特性

1、JavaScript vs ECMAScript

**Js具备三块内容 **1、文档模型DOM 2、浏览器BOM 3、核型规范ECMAScript<br />**ES6 泛指2015年之后的新版本规范，主要做的事情是**<br />      1、解决原有语法问题和不足（let const） <br />      2、对原有语法进行增强  (解构、展开、参数默认值、模版字符串)<br />      3、全新的对象、方法、功能 （Proxy、Promise、Object.assign、Reflect、Generator函数）<br />      4、全新的数据结构和类型 (Set、Map、Symbol、ArrayBuffer)

2、块级作用域、模版字符串

为什么需要块级作用域:
1、let、const引用暂时性死区概念，规避var变量提升出现的一些
2、引入块级作用域，取代IIFE匿名函数自执行(引发闭包造成不必要的内存泄漏)
3、变量声明与window对象脱离
模版字符串:

let time = hour + '时' + min + '分' 
let time = `${hour}时${min}分`

3、对象与数组的解构、rest操作符

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
let [head, ...tail] = [1, 2, 3, 4];  //head // tail // [2, 3, 4]

4、函数进阶（箭头函数、默认参数）

es6之前不能直接在函数中添加默认参数只能通过变通的方式

function test(num){
  num = num || 123
}
=> 
function log(x, y = 'World') {
  console.log(x, y);
}

箭头函数出现的意义
1、简化写法，表达更简洁，简化回调函数，简化返回值写法
2、普通函数内部的this是谁调用指向谁(运行时)，箭头函数是没有自己的this，内部this是定义时所在的作用域的this
3、箭头函数没有自己的this，所有无法new实例，不可以使用arguments，可以使用rest替代，不能用yield命令，不能用作generator函数，也不能使用call、bind、apply去改变this

使用箭头函数的情况： 1、异步回调中 2、带有定时器的函数中
不建议使用箭头函数的情况 1、对象中属性是方法 2、动态this如dom操作点击按钮使用当前this 3、负责的读写操作增加可读性的时候**

5、对象和数组的扩展用法

扩展运算符

console.log(...[1, 2, 3])
// 1 2 3

数组新增了Array.of 、 Array.from 、copyWithin 、 find() 、findIndex() 、fill()、includes 、flat 、flatMap

6、Proxy、Reflect、Map、Set、Symbol

Proxy：

var proxy = new Proxy(target, handler);

Reflect:
Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的

Map、Set：
使用Set查看当前页面有多少div元素
set、get、has、clear、delete

let set = new Set(); 
document.querySelectorAll('div').forEach(div=>set.add(div))
set.size()

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

Symbol
代表独一无二的数据结构

let s = Symbol();
typeof s
// "symbol"

7、for…of 、 迭代器模式、生成器函数

创建迭代过程

const items = [“zero”, “one”, “two”]; const it = itemsSymbol.iterator; it.next(); >{value: “zero”, done: false} …

for…of 可迭代类型 Map、Set、Array、String、DOM
for…of 不可迭代对象(..is not iterable)，因为没有Iterator接口， 遍历的item为value，相当于Object.value方法
for…in 对象数组都可以 遍历的item为key 相当于Object.keys方法，所有多用于对象，数组是索引

8、ES Modules 模块系统

在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS
ES6 的模块化分为导出（export） @与导入（import）两个模块。
特点：
模块中可以导入和导出各种类型的变量
每个模块都有自己的上下文，不会污染全局作用域
每一个模块只加载一次（是单例的）

9、Promise

Promise 是异步编程的一种解决方式
特点：padding、rejected、resolved三种状态，通过.then 获取回调结果
缺点：一旦执行无法取消，无法知道padding状态具体情况，不用回调无法感知异常
总结：链式调用的特点一定程度的解决了传统异步回调地狱写法的复杂和不可读性，没有从根本解决，仍然需要通过.then获取回调结果

10、decorator

介绍： Decorator，即装饰器，就是函数，用来动态的扩展对象功能的设计理论
用法：

// a soldier hasn`t anything
class soldier{}
// he get a decoration
function strong(target){
  target.Ak = true
}
// use it
@strong
class solider{}
// so the solider has Ak
solider.Ak  // true

使用装饰器优点:

• 代码可读性变强了，装饰器相当于一个注释
• 在不改变原有代码的情况下，对原来功能进行了扩展

使用场景

• react-redux

  class MyReactComponent extends React.Component {}
  export default connect(mapStateTopProps,mapDispatchToProps)(MyReactComponent)
  => 
  @connect(mapStateTopProps,mapDispatchToProps)
  export default class MyReactComponent extends React.Component {}

• mixins

  function mixins(...list){
  return function(targrt){
    Object.assing(targrt,prototype,...list)
  }
  }
  // 使用
  const Foo = {
  foo(){ console.log('foo') }
  }
  @mixins(Foo)
  class MyClass{}
  let obj = new MyClass();
  obj.foo() // 'foo'

  
  

  11、ES2016-ES2020（ES7-ES11）特性一览

  ES2016(ES7)

  数组的扩展

  Array.prototype.includes(searchElement, fromIndex)
  const arr = ['es6', 'es7', 'es8', 'es9', 'es10']
  console.log(arr.includes('es7', 1)) // true，从下标1开始查找

  数值扩展：幂运算符号 **

  Math.pow(x,y)
  x**y

  ES2017(ES8)

  1、Async/await ```javascript async function timeout () { return new Promise((resovle, reject) => { setTimeout(() => {

  // resovle('success')
  reject('error')

  }, 1000) }) }

async function main () { try { const res = await timeout() console.log(res) } catch (e) { console.log(e) } }

main()

```json
async function request(url) {
  const data = await axios.get(url)
  console.log(data)
}

2、对象的扩展 Object.values()，Object.entries()

3、对象属性描述：Object.getOwnPropertyDescriptors()

let obj = {
  a: 1,
  b: 2
}
const res = Object.getOwnPropertyDescriptors(obj,a) //{ value: 1, writable: true, enumerable: true, configurable: true }

4、字符串扩展String.prototype.padStart / padEnd

ES2018(ES9)

1、异步迭代 for await of

function getPromise(time){
  return new Promise(resolve=>{
    setTimeout(()=>{
       resolve(time)
    },time)
  })
}
let arr = [getPromise(1000), getPromise(2000), getPromise(3000)];
let main = async ()=>{
  for await(let item of arr){
    console.log(item)
  }
}
main()
// 1000 
// 2000
// 3000

2、Promise.prototype.finally()

**

ES2019（ES10）

1、对象Object.formEntries() 将map和数组转化成对象
2、字符串扩展String.prototype.trimStart() 、String.prototype.trimEnd()
3、数组扩展 扁平化的方法 Array.prototype.flat 、Array.prototype.flatMap
4、Symbol扩展：Symbol.prototype.description

let s = Symbol('imooc')
console.log(s)
console.log(s.description)
Symbol(imooc)
imooc

11、参考

阮一峰ES6