ES6-ES12

ES6 2015

1.类（class）

对熟悉Java，object-c，c#等纯面向对象语言的开发者来说，都会对class有一种特殊的情怀。ES6 引入了class（类），让JavaScript的面向对象编程变得更加简单和易于理解

  class Animal {
    // 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
    constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString 是原型对象上的属性
    toString() {
      console.log('name:' + this.name + ',color:' + this.color);
    }
  }
 var animal = new Animal('dog','white');//实例化Animal
 animal.toString();
 console.log(animal.hasOwnProperty('name')); //true
 console.log(animal.hasOwnProperty('toString')); // false
 console.log(animal.__proto__.hasOwnProperty('toString')); // true
 class Cat extends Animal {
  constructor(action) {
    // 子类必须要在constructor中指定super 函数，否则在新建实例的时候会报错.
    // 如果没有置顶consructor,默认带super函数的constructor将会被添加、
    super('cat','white');
    this.action = action;
  }
  toString() {
    console.log(super.toString());
  }
 }
 var cat = new Cat('catch')
 cat.toString();
 // 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true

2.模块化(Module)

ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

1.导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

// 单个导出  single.js
export const name = '杨明'
export const getNowYear = function() {
    return new Date().getFullYear()
}

// 默认导出  default.js
export default {
    name: '杨明'
}

2.导入(import)

导入可以结构导出也可以命名导出

// 单个导出 
import { name, getNowYear } from './single'
// 默认导出
import NAME from './default'
console.log(name) // 杨明
console.log(getNowYear()) //20xx
console.log(NAME) // { name: '杨明' }

3.箭头（Arrow）函数

这是ES6中最令人激动的特性之一。=>不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>，就不需要这种模式了。

(arguments1, arguments2, ...) => {
    // do something
}

需要注意的是：不论是bind还是箭头函数，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用。

4.函数参数默认值

需要注意一点,当实参为undefined才会默认值赋值

const getName = (name = '杨明') => {
  console.log(name)
}
getName() // 杨明
getName(undefined) // 杨明
getName(0) // 0
getName(NaN) // NaN
getName('') // ''
getName(false) // false
getName('杨明炜') // 杨明炜

5.模板字符串

ES6支持模板字符串，使得字符串的拼接更加的简洁、直观。

// 语法使用``包起来,变量使用${varible}
let name = '杨明'
let sayHi = `大叫好,我叫${name}` 
console.log(sayHi) // 大叫好,我叫杨明

6.解构赋值

解构赋值语法是JavaScript的一种表达式，可以方便的从数组或者对象中快速提取值赋给定义的变量。

1.数组

从数组中获取值并赋值到变量中，变量的顺序与数组中对象顺序对应。 数组感觉语法糖没什么鸟用

var foo = ["one", "two", "three", "four"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
//如果你要忽略某些值，你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four"

小技巧 两个变量互换 // 注意事项: 使用let 需要重新定义变量

var first = '第一个值';
var second = '第二个值';
[first, second] = [second, first]
console.log(first) //第二个值
console.log(second) // 第一个值
// 注意事项: 使用let 需要重新定义变量
let first = '第一个值'
let second = '第二个值'
let [a, b] = [second, first]
console.log(a) //第二个值
console.log(b) // 第一个值

2.对象

从对象中获取值 并赋值到变量中 变量左侧对应右侧对象的key

const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'  
};
const {name,age,city} = student;
console.log(name); // "Ming"
console.log(age); // "18"
console.log(city); // "Shanghai"

7.延展操作符/扩展操作符(Spread operator)

延展操作符...可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造对象时, 将对象表达式按key-value的方式展开。

1.函数调用

// 注意: 形参不允许结构对象

let arr = [1,2,3] 
myFunction(...arr); // myFunction(1,2,3)

2.数组构造或字符串

let newArr = [...iterableObj, '4', ...'hello', 6];

3.浅拷贝

展开语法和 Object.assign() 行为一致 // 基础知识: 数组是一个有序key的对象

let arr = [1, 2, 3]
let newArr = [...arr, '4', ...'hello', 6]
console.log(newArr)
// [ 1,   2,   3,   '4', 'h', 'e', 'l', 'l', 'o', 6 ]
let obj = { name: '杨明', age: '28' }
let newObj = {
  ...obj,
  newArr,
  ...arr,
}
console.log(newObj)  
//   {
//     '0': 1,
//     '1': 2,
//     '2': 3,
//     name: '杨明',
//     age: '28',
//     newArr: [ 1,   2,   3,   '4', 'h', 'e', 'l', 'l', 'o', 6 ]
//   }

8.对象属性简写

在ES6中允许我们在设置一个对象的属性的时候不指定属性名。

不使用ES6时

const name='Yangming',age='18',city='Guangzhou';
const student = {
    name:name,
    age:age,
    city:city
};
console.log(student);//{name: "Yangming", age: "18", city: "Guangzhou"}

使用ES6

const name='Yangming',age='18',city='Guangzhou';
const student = {
    name,
    age,
    city
};
console.log(student);//{name: "Yangming", age: "18", city: "Guangzhou"}

9.Promise

Promise 是异步编程的一种解决方案，比传统的解决方案callback更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
1.不使用ES6

setTimeout(function () {
  console.log('Hello') // 1秒后输出"Hello"
  setTimeout(function () {
    console.log('Hi') // 2秒后输出"Hi"
  }, 1000)
}, 1000)

2.使用ES6 可使用链式操作

const waitSecond = new Promise(function (resolve, reject) {
  setTimeout(resolve, 1000)
})
waitSecond
  .then(function () {
    console.log('Hello') // 1秒后输出"Hello"
    return waitSecond
  })
  .then(function () {
    console.log('Hi') // 2秒后输出"Hi"
  })

10.let与const 及与var区别

在之前JS是没有块级作用域的，const与let填补了这方便的空白，const与let都是块级作用域。

1.变量提升

在当前执行上下文执行之前,首先会把所有带var 或者function
关键字声明或者定义(带var 的知识提前声明,带function会提前的声明+定义)

if (true) {
  var name = '杨明'
  let age = '28'
  const job = 'it'
}
console.log(name)
console.log(age) // age is not defined
console.log(job) // job is not defined

使用函数表达式函数不会变量提升

fu(); // 不能创建前使用 报错 fu is not defined
let fn = function(){
    // do something
}

2.var在全局添加属性

let不会在全局vo(G)中添加属性
全局变量对象VO(G)中声明的变量(用Var声明的),也会给全局对象GO中添加一个对应的属性

console.log(a)  // undefined 提升阶段不会赋值
fn()
console.log(b)  //b is not defined
var a = 12
let b = 13
function fn() {
  console.log('ok')
}

3.相同名称

使用let/const不允许创建相同名称的变量,var 允许
带var的是可以重复声明的(词法解析可以审核通过),执行阶段遇到已经声明通过,不会重复声明
let是不可以的,词法解析阶段都不通过,也就不存在引擎去执行代码的 阶段;

var a = '1'
let b = '2'
var a = '3'
let b = '4' // 报错 has already been declared

4.块级作用域

异步循环使用var 变量会用最后的值,let则不会,存在块级作用域

//循环会创建父块作用域,子作用域
//同一个块级不能使用let创建相同变量名
//除了对象以外的{}其他基本都是块级作用域 
for(var i),let
setTimeout(_=>{
    console.log(i)
)
{
    //父块作用域
    let  i =0;
    //第一轮循环,
    {
        //子块作用域
        let i =0;
        setTimeout(function(){
            console.log(i)//0
        },10)
    }
    i++; //==>1
    //第二轮循环
    {
        //子块作用域
        let i = 1;
        setTimeout(function(){
            console.log(i)//i
        },10)
    }
    ...//每个循环都有自己的块级作用域
}
//暂时性死区
console.log(typeof a);//undefined

5.let 与const

let 创建的变量可以更改指针指向,
const创建的变量是不允许更改指针指向

const y = 100;
y = 200;//TypeError: Assignment to constant variable

11.字符串新增的方法 String.prototype

1.includes(value, index)

返回布尔值，表示是否找到了参数字符串。

let str = 'Hello world!'
console.log(str.includes('H')) // true
console.log(str.includes('H', 1)) // false

2.startsWith(value, index)

返回布尔值，表示参数字符串是否在原字符串的头部。

let str = 'Hello world!'
console.log(str.startsWith('H')) // true
console.log(str.startsWith('e', 1)) // false

3.endsWith(value, index)

返回布尔值，表示参数字符串是否在原字符串的尾部。它针对前n个字符

let str = 'Hello world!'
console.log(str.endsWith('world!')) // true
console.log(str.endsWith('Hello', 5)) // true

4.repeat(number)

方法返回一个新字符串，表示将原字符串重复n次。

let name = '杨明'
console.log(name.repeat(2)) // 杨明杨明
console.log(name.repeat(0)) // ''
console.log(name.repeat(-1)) // RangeError: Invalid count value
console.log(name.repeat(Infinity)) // RangeError: Invalid count value

12.数值新增方法 Number.prototype

1.Number.isFinite(*)

用来检查一个数值是否为有限的（finite）
注意，如果参数类型不是数值，Number.isFinite一律返回false

Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false

2.Number.isNaN(num)

用来检查一个值是否为NaN。
注意 Number.isNaN()只有对于NaN才返回true，非NaN一律返回false

Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(NaN) // true
Number.isNaN(9/NaN) // true
Number.isNaN('true' / 0) // true
Number.isNaN('true' / 'true') // true

3.Number.parseInt(str)/Number.parseFloat(str)

这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。

// ES5的写法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45
// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45
Number.parseInt === parseInt // true
Number.parseFloat === parseFloat // true

4.Number.isInteger(num)

用来判断一个数值是否为整数。
技巧: 可以使用这个方法判断值是不是正整数

Number.isInteger(25) // true
Number.isInteger(25.1) // false
Number.isInteger(25.0) // true
Number.isInteger() // false
Number.isInteger(null) // false
Number.isInteger('15') // false
Number.isInteger(true) // false

13.Math新增方法 Math.prototype

1.Math.trunc()

方法用于去除一个数的小数部分，返回整数部分

Math.trunc(4.1) // 4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0
// 对于非数值，Math.trunc内部使用Number方法将其先转为数值
Math.trunc('123.456') // 123
Math.trunc(true) //1
Math.trunc(false) // 0
Math.trunc(null) // 0
// 对于空值和无法截取整数的值，返回NaN
Math.trunc(NaN);      // NaN
Math.trunc('foo');    // NaN
Math.trunc();         // NaN
Math.trunc(undefined) // NaN

2.Math.sign()

方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。
它会返回五种值。

• 参数为正数，返回+1；
• 参数为负数，返回-1；
• 参数为 0，返回0；
• 参数为-0，返回-0;
• 其他值，返回NaN。 ```javascript Math.sign(-5) // -1 Math.sign(5) // 1 Math.sign(0) // 0 Math.sign(-0) // -0 Math.sign(NaN) // NaN

// 如果参数是非数值，会自动转为数值。对于那些无法转为数值的值，会返回NaN。 Math.sign(‘’) // 0 Math.sign(true) // 1 Math.sign(false) // 0 Math.sign(null) // 0 Math.sign(‘9’) // 1 Math.sign(‘foo’) // NaN Math.sign() // NaN Math.sign(undefined) // NaN

<a name="vZQbK"></a>
#### 3.还有很多呢
...看了一下阮一峰感觉没什么鸟用的api [biubiu-还是要去探个究竟-阮一峰Math](https://es6.ruanyifeng.com/#docs/number#Math-%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95)
<a name="OYKV5"></a>
### 14.Array新增api方法 Array.prototype
<a name="zFklx"></a>
#### 1.Array.from()
方法用于将参数转为真正的数组    技巧:可使用Array.from创建空数组
```javascript
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr1 = Array.from(arrayLike); // ['a', 'b', 'c']
let arr2 = Array.from('hello') // ['h', 'e', 'l', 'l', 'o']
let arr3 = Array.from({ length: 3 }) // [ undefined, undefined, undefined ] new Array(10) 不能遍历

2.Array.of()

方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

3.[].copyWithin()

方法使参数的值覆盖成员
它接受三个参数。

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。 ```javascript // 将3号位复制到0号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5]

// 将3号位复制到0号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5}

// 将2号位到数组结束，复制到0号位 let i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5]

<a name="cx13X"></a>
#### 4.[].find() / [].findIndex() 
方法查找匹配的到的值 / 索引 <br />要点:find 若没有匹配上返回undefined  findIndex 若没有匹配上返回 -1
```javascript
let arr = [1, 4, -5, 10]
console.log( arr.find(n => n < 0) ) // -5
console.log( arr.find(n => n > 100) ) // undefined
console.log( arr.findIndex(n => n < 0) ) // 2
console.log( arr.findIndex(n => n > 100) ) // -1

5.[].fill()

方法使用给定值，填充一个数组
方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

6.entries()，keys() 和 values()

不知道有什么鸟用 biubiu-还是要去探个究竟,阮一峰详解

7.forEach / map / filter / some / every 【ES5复习】

forEach 遍历所有数组的元素，无返回值 缺点不能跳出循环

let arr = [{ number: 1 }, { number: 2 }, { number: 3 }]
arr.forEach((item, index) => {
  item.number++
  console.log(index)
})
console.log(arr) // [ { number: 2 }, { number: 3 }, { number: 4 } ]

map 遍历所有数组的元素,返回return后的元素新数组 返回新数组

let arr = [1, 2, 3, 4]
let newArr = arr.map((item, index) => {
  return {
    value: item,
    index,
  }
})
console.log(newArr) // [{ value: 1, index: 0 },{ value: 2, index: 1 },{ value: 3, index: 2 },{ value: 4, index: 3 }]

filter 根据表达式返回表达式为true的元素 返回新数组

let arr = [1, 2, 3, 4]
let newArr = arr.filter((item, index) => {
  return item > 2
})
console.log(newArr) // [3, 4]

some 循环数组元素, 匹配表达式,如果表达式为真直接返回true 否则返回false 返回bool值
优点: 表达式为真 直接跳出循环

let arr = [1, 2, 3, 4]
let bool = arr.some((item, index) => {
  console.log(item)
  return item > 1
})
console.log(bool) // true

every 循环数组元素 return true 进入下一个循环 return false 跳出循环

let arr = [1, 2, 3, 4]
let bool = arr.every((item, index) => {
  console.log(item)
  if (item > 2) {
    return false
  }
  return true
})
console.log(bool) // false

8.reduce 【ES5复习】

技巧: filter+map 合并 成reduce用法 可以减少一次循环
附上感觉挺全的reduce使用场景文章 biubiu 好奇提升猫,让我去see see

let arr = [1, 2, 3, 4]
let filterMapArr = arr
  .filter(item => item > 2)
  .map(item => {
    return {
      title: '匹配大于2的元素',
      value: item,
    }
  })
let reduceArr = arr.reduce((prev, next) => {
  if (next > 2) {
    prev.push({
      title: '匹配大于2的元素',
      value: next,
    })
  }
  return prev
}, [])
console.log(filterMapArr) // [ { title: '匹配大于2的元素', value: 3 }, { title: '匹配大于2的元素', value: 4 } ]
console.log(reduceArr) // [ { title: '匹配大于2的元素', value: 3 }, { title: '匹配大于2的元素', value: 4 } ]

ES7 2016

1. 数组includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。
2. 指数运算符 a ** b指数运算符，它与 Math.pow(a, b)相同。

1.数组[].includes

includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。
includes 函数与 indexOf 函数很相似，下面两个表达式是等价的：

let arr = [1, 2, 3, 4]
let bool = arr.includes(1) // true
let bool2 = arr.includes('1') // false

2.指数操作符 **

**具有与Math.pow(..)等效的计算结果

console.log(Math.pow(2, 10)) // 输出1024
console.log(2 ** 10) // 输出1024

ES8 2017

1. async/await
2. Object 相关 values() / entries() / getOwnPropertyDescriptors
3. String 相关 padStart() / padEnd()
4. ShareArrayBuffer和Atomics对象

1.async/await 异步编程

ES2018引入异步迭代器（asynchronous iterators），这就像常规迭代器，除了next()方法返回一个Promise。因此await可以和for...of循环一起使用，以串行的方式运行异步操作

// 栗子1
async function process(array) {
  for await (let i of array) {
    // doSomething(i);
  }
}
// 栗子2
const myPromise = (resolve, reject) => {
  return new Promise((resolve, reject) => {
    console.log('定时器')
    setTimeout(resolve, 3000)
  })
}
const asyncFn = async () => {
  console.log(1)
  await myPromise()
  console.log(3)
}
asyncFn() //1 定时器 3

2.Object.values()

Object.values()是一个与Object.keys()类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。

let obj = {
  name: '杨明',
  age: '28',
  city: 'GZ',
}
let values = Object.values(obj)
let keys = Object.keys(obj)
console.log(values) // [ '杨明', '28', 'GZ' ]
console.log(keys) // [ 'name', 'age', 'city' ]

3.Object.entries()

函数返回一个给定对象自身可枚举属性的键值对的数组。

let obj = {
  name: '杨明',
  age: '28',
  city: 'GZ',
  propObj: {
    a: '1',
    b: '2',
  },
}
console.log(Object.entries(obj))
//   [
//     [ 'name', '杨明' ],
//     [ 'age', '28' ],
//     [ 'city', 'GZ' ],
//     [ 'propObj', { a: '1', b: '2' } ]
//   ]

4.String.padStart() / String.padEnd()

• targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
• padString:(可选)填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 “ “。 ```javascript let str = ‘明炜’ console.log(str.padStart(5, ‘杨’)) // 杨杨杨明炜 console.log(str.padStart(1, ‘杨’)) // 明炜 console.log(str.padStart(4).length) // 明炜 // 4

let str = ‘小明’ console.log(str.padEnd(3, ‘哥’)) // 小明哥 console.log(str.padEnd(1, ‘哥’)) // 小明 console.log(str.padEnd(10)) // 小明

<a name="8d56e78f"></a>
### 5.Object.getOwnPropertyDescriptors()
函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象。
```javascript
const obj = {
    name: 'Jine',
    get age() { return '28' }
};
Object.getOwnPropertyDescriptors(obj)
// {
//   age: {
//     configurable: true,
//     enumerable: true,
//     get: function age(){}, //the getter function
//     set: undefined
//   },
//   name: {
//     configurable: true,
//     enumerable: true,
//         value:"Jine",
//         writable:true
//   }
// }

6.ArrayBuffer

懒了,boom 跳转自己看去 biubiu 看看ArrayBuffer 有啥用

ES9 2018

1. promise.finally()
2. Rest / Spread 属性
3. 正则表达式相关 命名捕获组 / 反向断言 / dotAll模式 / Unicode转义
4. 非转义序列的模板字符串

1.promise.finally()

一个Promise调用链要么成功到达最后一个.then()，要么失败触发.catch()。在某些情况下，你想要在无论Promise运行成功还是失败，运行相同的代码，例如清除，删除对话，关闭数据库连接等。

function doSomething() {
  doSomething1()
  .then(doSomething2)
  .then(doSomething3)
  .catch(err => {
    console.log(err);
  })
  .finally(() => {
    // finish here!
  });
}

2.Rest/Spread 属性

Rest参数语法允许我们将一个不定数量的参数表示为一个数组。

restParam(1, 2, 3, 4, 5);
function restParam(p1, p2, ...p3) {
  // p1 = 1
  // p2 = 2
  // p3 = [3, 4, 5]
}
const myObject = {
  a: 1,
  b: 2,
  c: 3
};
const { a, ...x } = myObject;
// a = 1
// x = { b: 2, c: 3 }

3.正则表达式命名捕获组

JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组，例如：以YYYY-MM-DD的格式解析日期

const reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match  = reDate.exec('2018-04-30');
const year   = match[1]; // 2018
const month  = match[2]; // 04
const day    = match[3]; // 30

这样的代码很难读懂，并且改变正则表达式的结构有可能改变匹配对象的索引。
ES2018允许命名捕获组使用符号?<name>，在打开捕获括号(后立即命名，示例如下：
任何匹配失败的命名组都将返回undefined。

const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
const match  = reDate.exec('2018-04-30'),
const year   = match.groups.year,  // 2018
const month  = match.groups.month, // 04
const day    = match.groups.day;   // 30

4.正则表达式反向断言

目前JavaScript在正则表达式中支持先行断言（lookahead）。这意味着匹配会发生，但不会有任何捕获，并且断言没有包含在整个匹配字段中。例如从价格中捕获货币符号：

const
  reLookahead = /\D(?=\d+)/,
  match       = reLookahead.exec('$123.89');
console.log( match[0] ); // $

ES2018引入以相同方式工作但是匹配前面的反向断言（lookbehind），这样我就可以忽略货币符号，单纯的捕获价格的数字：

const
  reLookbehind = /(?<=\D)\d+/,
  match        = reLookbehind.exec('$123.89');
console.log( match[0] ); // 123.89

以上是 肯定反向断言，非数字\D必须存在。同样的，还存在 否定反向断言，表示一个值必须不存在，例如：

const reLookbehindNeg = /(?<!\D)\d+/;
cosnt match = reLookbehind.exec('$123.89');
console.log( match[0] ); // null

5.正则表达式dotAll模式

正则表达式中点.匹配除回车外的任何单字符，标记s改变这种行为，允许行终止符的出现，例如：

/hello.world/.test('hello\nworld');  // false
/hello.world/s.test('hello\nworld'); // true

6.正则表达式 Unicode 转义

到目前为止，在正则表达式中本地访问 Unicode 字符属性是不被允许的。ES2018添加了 Unicode 属性转义——形式为\p{...}和\P{...}，在正则表达式中使用标记 u (unicode) 设置，在\p块儿内，可以以键值对的方式设置需要匹配的属性而非具体内容。例如：

const reGreekSymbol = /\p{Script=Greek}/u;
reGreekSymbol.test('π'); // true

此特性可以避免使用特定 Unicode 区间来进行内容类型判断，提升可读性和可维护性。

7.非转义序列的模板字符串

之前，\u开始一个 unicode 转义，\x开始一个十六进制转义，\后跟一个数字开始一个八进制转义。这使得创建特定的字符串变得不可能，例如Windows文件路径 C:\uuu\xxx\111。更多细节参考模板字符串。

ES10 2019

1. Array: flat() / flatMap()
2. String: trimStart() / trimEnd()
3. String: matchAll
4. Object.fromEntries()
5. Symbol: description
6. Function: toString()
7. try catch 简化
8. 基本数据类型 BigInt
9. globalThis
10. import()
11. 私有实例方法和访问器

1.flat() / flatMap()

flat()
flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
flat()方法最基本的作用就是数组降维
多维数组扁平化

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

还可以利用flat()方法的特性来去除数组的空项

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

flatMap()
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。 这里我们拿map方法与flatMap方法做一个比较

var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

2.trimStart() / trimEnd()

新增的这两个方法很好理解，分别去除字符串首尾空白字符

let string =  '   nihao   '
console.log(string.trimStart()) // 'nihao   '
console.log(string.trimEnd()) // '    nihao'

3.matchAll

方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll 出现之前，通过在循环中调用regexp.exec来获取所有匹配项信息（regexp需使用/g标志：

const regexp = RegExp('foo*','g'); 
const str = 'table football, foosball';
let matches = str.matchAll(regexp);
for (const match of matches) {
  console.log(match);
}
// [
//   'foo',
//   index: 6,
//   input: 'table football, foosball',
//   groups: undefined
// ]
// [
//   'foo',
//   index: 16,
//   input: 'table football, foosball',
//   groups: undefined
// ]
// matches iterator is exhausted after the for..of iteration
// Call matchAll again to create a new iterator
matches = str.matchAll(regexp);
Array.from(matches, m => m[0]);
// Array [ "foo", "foo" ]

4.fromEntries()

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

而**Object.fromEntries()** 则是 **Object.entries()** 的反转。

Object.fromEntries() 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现@iterator方法的的对象，返回一个迭代器对象。它生成一个具有两个元素的类似数组的对象，第一个元素是将用作属性键的值，第二个元素是与该属性键关联的值。
通过 Object.fromEntries， 可以将 Map 转化为 Object:

const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }

通过 Object.fromEntries， 可以将 Array 转化为 Object:

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

5.Symbol: description()

通过工厂函数Symbol（）创建符号时，您可以选择通过参数提供字符串作为描述：

const sym = Symbol('The description');
let mySymbol = 'My Symbol';
let symObj = Symbol(mySymbol);
symObj; // Symbol(My Symbol)
String(symObj) === `Symbol(${mySymbol})`); // true
symObj.description; // "My Symbol"

以前，访问描述的唯一方法是将符号转换为字符串：

assert.equal(String(sym), 'Symbol(The description)');

现在引入了getter Symbol.prototype.description以直接访问描述：

assert.equal(sym.description, 'The description');

6.Function: toString()

现在返回精确字符，包括空格和注释

function /* comment */ foo /* another comment */() {}
// 之前不会打印注释部分
console.log(foo.toString()); // function foo(){}
// ES2019 会把注释一同打印
console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){}
// 箭头函数
const bar /* comment */ = /* another comment */ () => {};
console.log(bar.toString()); // () => {}

7.修改 catch 绑定

在 ES10 之前，我们必须通过语法为 catch 子句绑定异常变量，无论是否有必要。很多时候 catch 块是多余的。 ES10 提案使我们能够简单的把变量省略掉。
不算大的改动。

之前是

try {} catch(e) {}

现在是

try {} catch {}

8.BigInt 数据类型

现在的基本数据类型（值类型）不止5种（ES6之后是六种）了哦！加上BigInt一共有七种基本数据类型，分别是： String、Number、Boolean、Null、Undefined、Symbol、BigInt

let num = Number.MAX_SAFE_INTEGER;  // -> 9007199254740991
num = num + 1; // -> 9007199254740992
// 再次加 +1 后无法正常运算
num = num + 1; // -> 9007199254740992
// 两个不同的值，却返回了true
9007199254740992 === 9007199254740993// -> true

如何创建BigInt类型
1.在整数字面量后面加n。
2.使用 BigInt 函数。
注意: BigInt 是一种新的数据原始（primitive）类型。

// 1
var bigIntNum = 9007199254740993n;
// 2
var bigIntNum = BigInt(9007199254740);
var anOtherBigIntNum = BigInt('9007199254740993');

9.globalThis

ES10之前全局this没有标准化。
生产代码中，你必须手动添加如下代码来标准化多个平台的全局对象。

var getGlobal = function () {
    if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};

但即使这样也并不总是奏效。所以ES10添加了globalThis对象，从现在开始应该在任何平台上访问全局作用域：

// Access global array constructor
globalThis.Array(0, 1, 2); // [0, 1, 2]
// Similar to window.v = { flag: true } in <= ES5
globalThis.v = { flag: true };
console.log(globalThis.v); // { flag: true }

ES11 2020

1. Promise.all allSettled
2. 可选链操作符
3. 空值合并运算符

1.promise.all

Promise.all 缺陷
都知道 Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise 直接进入 reject 状态。
想象这个场景：你的页面有三个区域，分别对应三个独立的接口数据，使用 Promise.all 来并发三个接口，如果其中任意一个接口服务异常，状态是 reject,这会导致页面中该三个区域数据全都无法渲染出来，因为任何 reject 都会进入 catch 回调, 很明显，这是无法接受的，如下：

Promise.all([
    Promise.reject({code: 500, msg: '服务异常'}),
    Promise.resolve({ code: 200, list: []}),
    Promise.resolve({code: 200, list: []})
])
.then((ret) => {
    // 如果其中一个任务是 reject，则不会执行到这个回调。
    RenderContent(ret);
})
.catch((error) => {
    // 本例中会执行到这个回调
    // error: {code: 500, msg: "服务异常"}
})

promise.allSettled 优势:
我们需要一种机制，如果并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务 value 或者 拒因 reason），在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性，而 Promise.allSettled 就是解决这问题的。

Promise.allSettled([
    Promise.reject({code: 500, msg: '服务异常'}),
    Promise.resolve({ code: 200, list: []}),
    Promise.resolve({code: 200, list: []})
])
.then((ret) => {
    /*
        0: {status: "rejected", reason: {...}}
        1: {status: "fulfilled", value: {...}}
        2: {status: "fulfilled", value: {...}}
    */
    // 过滤掉 rejected 状态，尽可能多的保证页面区域数据渲染
    RenderContent(ret.filter((el) => {
        return el.status !== 'rejected';
    }));
});

2.可选链操作符

可让我们在查询具有多层级的对象时，不再需要进行冗余的各种前置校验。
日常开发中，我们经常会遇到这种查询
可选链中的 ? 表示如果问号左边表达式有值, 就会继续查询问号后面的字段。根据上面可以看出，用可选链可以大量简化类似繁琐的前置校验操作，而且更安全
在此之前我们判空操作是这样的

var name = user && user.info && user.info.name;
var age = user && user.info && user.info.getAge && user.info.getAge();

使用可选链操作符后

var name = user?.info?.name;
var age = user?.info?.getAge?.(); // 是不是很香

3.空值合并运算符

当我们查询某个属性时，经常会遇到，如果没有该属性就会设置一个默认的值。比如下面代码中查询玩家等级

var level = (user.data && user.data.level) || '暂无等级'

在 JS 中，空字符串、0 等，当进行逻辑操作符判断时，会自动转化为 false(短路逻辑)。在上面的代码里，如果玩家等级本身就是 0 级, 变量 level 就会被赋值 暂无等级 字符串，这是逻辑错误。需要如下判断

var level;
if (typeof user.level === 'number') {
    level = user.level;
} elseif (!user.level) {
    level = '暂无等级';
} else {
    level = user.level;
}

来看看用空值合并运算符如何处理
空值合并运算符（??）是一个逻辑运算符。当左侧操作数为 null 或 undefined 时，其返回右侧的操作数。否则返回左侧的操作数。

let user = { "level": 0 }
var level = `${user.level}级` ?? '暂无等级';
console.log(level) // level -> '0级'

ES12 2021

1. replaceAll
2. Promise.any
3. weakRefs
4. 逻辑运算符合赋值表达式
5. 数字分隔符号

1.replaceAll

replaceAll返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉，替换规则可以是字符串或者正则表达式。

let string = 'I like 前端,I like 前端公虾米'
//使用replace
let replaceStr = string.replace('like','love')
console.log(replaceStr)  // 'I love 前端,I like前端公虾米'
//replace使用正则匹配所有
console.log(string.replace(/like/g,'love')) // 'I love 前端,I love 前端公虾米'
//使用replaceAll
let replaceAllStr = string.replaceAll('like','love')
console.log(replaceAllStr) // 'I love 前端,I love 前端公虾米'

2.Promise.any

当Promise列表中的任意一个promise成功resolve则返回第一个resolve的结果状态
如果所有的promise均reject，则抛出异常表示所有请求失败

Promise.any([
  new Promise((resolve, reject) => setTimeout(reject, 500, '哎呀，我被拒绝了')),
  new Promise((resolve, reject) => setTimeout(resolve, 1000, '哎呀，她接受我了')),
  new Promise((resolve, reject) => setTimeout(resolve, 2000, '哎呀，她也接受我了')),
])
.then(value => console.log(`输出结果: ${value}`))
.catch (err => console.log(err))
//输出
//输出结果:哎呀，她接受我了
Promise.any([
  Promise.reject('Error 1'),
  Promise.reject('Error 2'),
  Promise.reject('Error 3')
])
.then(value => console.log(`请求结果: ${value}`))
.catch (err => console.log(err))
//输出
AggregateError: All promises were rejected

Promise.any与Promise.race十分容易混淆，务必注意区分，Promise.race 一旦某个promise触发了resolve或者reject，就直接返回了该状态结果，并不在乎其成功或者失败

….都用不了