es6-es12新特性

ES7新增特性

1.Array.prototype.includes（arr，index）

检查一个元素是否存在于数组中，但是它返回的是一个布尔值，在实际运用中，更为实用。

    let arr = ['js', 'vue', 'React','Angular']

    if(arr.includes('vue')) {
      console.log("vue存在")
    }

2.求幂运算符 **

    let a = 2 ** 3 //2的三次方
    console.log(a)
    console.log(a === Math.pow(2,3))

ES8新增特性

1.Object.keys()

方***返回一个由一个给定对象的自身可枚举属性组成的数组

语法：

Object.keys(obj)

参数

• obj

  要返回其枚举自身属性的对象。

返回值：

一个表示给定对象的所有可枚举属性的字符串数组。

   const obj = {
      name: 'JS人柱力',
      age: 18,
      address: '重庆'
    }
    console.log(Object.keys(obj))

2.Object.values()

方法返回一个给定对象自身的所有可枚举属性值的数组

语法：

Object.values(obj)

参数

• obj

  被返回可枚举属性值的对象。

返回值

一个包含对象自身的所有可枚举属性值的数组

    const obj = {
      name: 'JS人柱力',
      age: 18,
      address: '重庆'
    }
    console.log(Object.values(obj))

3.Ojbect.entries()

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

语法：

Ojbect.entries(obj)

    const obj = {
      name: 'coderljb',
      age: 18,
      address: '重庆'
    }
    const entries = Object.entries(obj)
    for (let [key, value] of entries) {
      console.log(`${key}:${value}`)
         //name:coderljb
         //age:18
        //address:重庆
    }

4.String.prototype.padStart()

padStart() 方法用另一个字符串填充当前字符串 (如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。

语法：

str.padStart(targetLength [, padString])

参数：

• targetLength

  当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

• padString 可选

  填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 " "（U+0020）。

示例：

    // 字符串填充
    const minute = '5'.padStart(2,'0')
    console.log(minute) // 05

错误示例：

   // 用Number类型会报错
     const a = 7
    console.log( a.padStart(2,'0'))
**5.Object.getOwnPropertyDescriptor()**

返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

语法：
Object.getOwnPropertyDescriptor(obj, prop)
参数：

- `obj`

  需要查找的目标对象

- `prop`

  目标对象内属性名称(字符串)

示例：

```js
 const obj = {
    name: 'JS人柱力',
    age: 18,
    hegiht: 1.88
  }

  console.log(Object.getOwnPropertyDescriptor(obj,'name'))

![image-202208131****7837](https://uploadfiles.nowcoder.com/images/20190919/56_1568900435177_29C080A5413E925FE3B3CCB4048AB99B)

**6.async、await** 



### ES9新增特性

**1. 对象扩展**
像之前数组的剩余参数rest, ES9新增了对象rest, 和之前数组的剩余参数用法相似

可以用来拷贝对象（深拷贝），给变量赋值、合并对象等
```JS
     //rest 参数
        function connect({host, port, ...user}){
            console.log(host);
            console.log(port);
            console.log(user);
        }

        connect({
            host: '127.0.0.1',
            port: 3306,
            username: 'root',
            password: 'root',
            type: 'master'
        });

ES10新增特性

1.Array.prototype.flat()

flat() 方***按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法：
var newArray = arr.flat([depth])

参数：

• depth 可选

  指定要提取嵌套数组的结构深度，默认值为 1。

  里面可以填Infinity ，可以任意展开深度数组

返回值:

一个包含将数组与子数组中所有元素的新数组。

示例：

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]
   console.log(arr.flat(Infinity))
//  Infinity 无穷的 可以任意展开深度数组
// [0, 1, 2, 3, 4]

ES11新增特性

1.BigInt

2.私有属性
ES10 在类属性前面加 # 表示私有属性，并且需要提前声明，私有属性只有在内部才能调用。

class Person {
    #age;
    #weight;
    constructor(name, age, weight) {
        this.name = name;
        this.#age = age;
        this.#weight = weight;
    }
    intro() {
        console.log(this.#age);
        console.log(this.#weight);
    }
}
let girl = new Person('lily', 18, '45kg');
girl.intro();  // 返回 18 45kg
console.log(girl.age);  // 返回 undefined

3.Promise 扩展
Promise.allSettled() 方法接受 Promise 数组，返回的结果也是 Promise 对象，返回的结果永远是成功状态，成功的值是每个 Promise 的状态和结果。

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('商品数据 - 1');
    }, 1000);
})
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('商品数据 - 2');
        reject('出错啦');
    }, 1000);
})
const result = Promise.allSettled([p1, p2]);
console.log(result);

4.字符串扩展
String.matchAll() 方法用来得到正则批量匹配的结果，返回的是可迭代对象。

let str = `
    <ul>
        <li>
            <a>肖申克的救赎</a>
            <p>上映时间：1994-09-10</p>
        </li>
        <li>
            <a>阿甘正传</a>
            <p>上映时间：1994-07-06</p>
        </li>
    </ul>`;

const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
const result = str.matchAll(reg);
console.log([...result]);

5.可选链操作符
?. 是可选链操作符，当应对对象层级较深时，用作层级判断。当前置条件符合才检查下一个属性。

function mian(config) {
    const dbHost = config?.db?.host;
    console.log(dbHost);
}
mian({
    db: {
        host: '192.168.1.100',
        username: 'root'
    },
    cache: {
        host: '192.168.1.200',
        username: 'root'
    }
})
// 返回 192.168.1.100

6.globalthis

globalthis 始终指向全局对象，如果需要对全局对象进行操作，直接调用 globalthis

ES12新增特性

1.replaceAll

模式的所有匹配都会被替代项替换。模式可以是字符串或正则表达式，而替换项可以是字符串或针对每次匹配执行的函数。并返回一个全新的字符串

const str = "student is a real student";
const newStr = str.replaceAll('student', "hahaha");
console.log(newStr); 

2、Promise.any
可以把 Promise.any 理解成 Promise.all 的相反操作。Promise.any 也可以接受一个 Promise 数组，当其中任何一个 Promise 完成（fullfill）时，就返回那个已经有完成值的 Promise。如果所有的 Promise 都拒绝（reject），则返回一个拒绝的 Promise，该 Promise 的返回值是一个 AggregateError 对象。
2.WeakRef
WeakRef是一个 Class，一个WeakRef对象可以让你拿到一个对象的弱引用。这样，就可以不用阻止垃圾回收这个对象了。 可以使用其构造函数来创建一个WeakRef对象。

// 如果 someObj 被垃圾回收了，则 obj 就会是 undefined
let obj = ref.deref();

3.下划线 (_) 分隔符

let x = 2_3333_3333
// x 的值等同于 233333333，只是这样可读性更强，不用一位一位数了