前言：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"
