前言：ES6大家已经在工作中用的炉火纯青了，那么ES6的知识点就不再详细介绍了，一起学习一下ES7 --- ES12 的知识点吧！为了年后的金三银四冲、冲、冲！！！

一、ES6

① let const ：点此了解详情

② 箭头函数

③ 数组解构赋值

④ 模板字符串

⑤ Generator 和 Iterator ：点此了解详情

⑥ promise ：点此了解详情

⑦ for..in 和 for...of

ES6 就不过多的详细介绍了，相比大家已经用的很熟练了！！！

二、ES2016（ES7）

1. Array.prototype.includes()

includes( ) 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。

1.1 语法及示例

const arr = ['Barry','Lishen','Jenny','Chany'];
arr.includes(value,index)

value，需要查找的元素值。index可选，从 index 索引处开始查找 value。如果为负值，则按升序从 arr.length + index的索引开始搜索。默认为 0。

const arr = ['Barry', 'Lishen', 'Jenny', 'Chany'];
console.log(arr.includes('Barry')); // true
console.log(arr.includes('Barry',0)); // true
console.log(arr.includes('Barry',1)); // false
console.log(arr.includes('Barry',2)); // false
console.log(arr.includes('Barry',-1)); // false
console.log(arr.includes('Barry',-2)); // false
数组的长度是 4
index 是 -5
computed index 是 4 + (-5) = -1
如果计算出的索引小于 0，则整个数组都会被搜索。 所以下面为 true
console.log(arr.includes('Barry',-5)); // true

计算出的索引小于 0

如果 index 为负值，计算出的索引将作为开始搜索 value 的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

1.2 注意点

① 使用 includes()查找字符串是区分大小写的。

    const arr = ['Barry', 'Lishen', 'Jenny', 'Chany'];
    console.log(arr.includes("BARRY")); // fasle

② 使用 includes()只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些是无法判断的.

    const arr = ['Barry', 'Chany', ['EricNg', 'Tiny'], { name: 'Barry' }];
    console.log(arr.includes(['EricNg', 'Tiny'])); // fasle
    console.log(arr.includes({ name: 'Barry' })); // fasle

③能识别NaN，indexOf是不能识别NaN的

    const arr = ['Barry', 'Lishen', 'Jenny', NaN, 'Chany'];
    console.log(arr.includes(NaN)); // true
    console.log(arr.indexOf(NaN)); // -1

最后，如果只想知道某个值是否在数组中存在，而并不关心它的索引位置，建议使用includes(),如果想获取一个值在数组中的位置，那么使用indexOf方法。

2. 幂运算符 **

2.1 语法及示例

Math.pow( )

console.log(Math.pow(2, 10)); // 1024

幂运算符 **

console.log(2 ** 4); // 1024

基本求幂

    console.log(2 ** 3); // 8
    console.log(3 ** 2); // 9
    console.log(3 ** 2.5); // 15.588457268119896
    console.log(10 ** -1); // 0.1
    console.log(NaN ** 4); // NaN

2.2 注意点

幂运算符的两个*号之间不能出现空格，否则语法会报错。

三、ES2017（ES8）

3. Object.values()

Object.values 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

    const obj = {
      name: "Barry",
      age: 18,
      height: 185,
      money: 1000000000
    }
    console.log(Object.values(obj)); // ['Barry', 18, 185, 1000000000]

4. Object.entries()

Object.entries() 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值对数组。

    const obj = {
      name: "Barry",
      age: 18,
      height: 185,
      money: 1000000000
    }
    console.log(Object.entries(obj)); // [['name','Barry'], ['age',18], ['height',185], ['money',100000000]]
    console.log(Object.entries([1, 2, 3])); // [['0',1], ['1',2], ['2',3]]

5. Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。

    const obj = {
      name: "Barry",
      age: 18,
    }
    const description = Object.getOwnPropertyDescriptors(obj);
    console.log(description)
    打印结果
    {
      age: {
        configurable: true
        enumerable: true
        value: 18
        writable: true
      }
      name: {
        configurable: true
        enumerable: true
        value: "Barry"
        writable: true
      }
    }

上面打印结果中的

value表示当前对象的默认值

writable表示对象属性是否可以修改

enumerable表示当前这个属性是否可以出现在对象的枚举属性中

configurable表示当前对象的属性能否用delete删除

那这些对象的属性我们怎么设置和修改他们呢，我们可以使用 es5 的 Object.defineProperty()

    const obj = {
    }
    Object.defineProperty(obj, 'name', {
      value: "Barry",
      writable: true,
      enumerable: true,
      configurable: true
    });
    Object.defineProperty(obj, 'age', {
      value: 18,
      writable: true,
      enumerable: true,
      configurable: true
    })
    console.log(obj) // {name: 'Barry', age: 18}

接下来我们演示下，一些属性设置为false的情况：

我们可以看到设置 writable: false和configurable: false,为false时，对象的name对象的值不能改变和不能被删除，打印出来还是原来的对象。

    const obj = {
    }
    Object.defineProperty(obj, 'name', {
      value: "Barry",
      writable: false,
      enumerable: false,
      configurable: true
    });
    console.log(obj) // {name: 'Barry'}
    obj.name = 'lishen';
    console.log(obj); // {name: 'Barry'}
    delete obj.name
    console.log(obj); // {name: 'Barry'}

设置enumerable为false时：

当设置enumerable: false时，表示对象的属性不可被枚举，这时打印对象为空，遍历对象的键也为空。

    const obj = {
    }
    Object.defineProperty(obj, 'name', {
      value: "Barry",
      writable: true,
      enumerable: true,
      configurable: false
    });
    console.log(obj) // {}
    for (let key in obj) {
      console.log(key); // ""
    }

6. String.prototype.padStart

6.1 语法

str.padStart(targetLength , padString)

targetLength

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

padString 可选

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

6.2 示例

    const str = "ABC";
    console.log(str.padStart(10))  // "       ABC"
    console.log(str.padStart(10, 'foo')) // "foofoofABC"
    console.log(str.padStart(6, '123456')) // "123ABC"
    console.log(str.padStart(8, '0')) // "00000ABC"
    console.log(str.padStart(1)) // "ABC"

6.3 应用场景

日期格式化：yyyy-mm-dd的格式：

    const now = new Date();
    const year = now.getFullYear();
    const mounth = (now.getMonth() + 1).toString().padStart(2, '0')
    const day = (now.getDate()).toString().padStart(2, '0')
    console.log(`${year}-${mounth}-${day}`); // 今天的日期 ： 2021-01-27

数字替换(手机号，银行卡号等）

    const tel = '18737740333';
    function formatTel (tel) {
      return tel.slice(-4).padStart(tel.length, '*')
    }
    console.log(formatTel(tel));  // *******0333

7. String.prototype.padEnd

把指定字符串填充到字符串尾部，返回新字符串。语法同 String.prototype.padStart

    const str = "ABC";
    console.log(str.padEnd(10)) // "ABC       "
    console.log(str.padEnd(10, 'foo')) // "ABCfoofoof"
    console.log(str.padEnd(6, '123456')) // "ABC123"
    console.log(str.padEnd(1))  // "ABC"

ES6、ES7、ES8、ES9、ES10、ES11、ES12知识点总结（1）