ES7~ES12都可以统称为ES6+，ES6等价于ES2015，ES6是一个非常大的版本更迭，但是后面ES7、ES8等等增加的知识并不是很多，但是肯定也是有用的，存在即合理。所以这篇就总结一下ES6之后增加的一些常用的主要的知识
1. ES7
ES7主要介绍两个，一个includes方法，一个指数运算符
① includes
我们在之前，会通过indexOf来判断一个数组中是否存在某个元素
let list = ['a', 'b', 'c']
if(list.indexOf('b') >= 0) {
console.log('包含----->>>')
} 现在有了 includes 可以直接使用该方法，该方法可以让代码的可读性更好
let list = ['a', 'b', 'c']
if(list.includes('b')) {
console.log('包含----->>>')
} 那么有什么区别呢？区别就在于对 NaN 的判断
我们先使用indexOf来判断一下
let list = ['a', 'b', 'c', NaN]
if(list.indexOf(NaN) !== -1) {
console.log('包含----->>>') // 控制台并没有打印
} 它说我们不包含NaN，但是是存在的， 当然我们的数组中一般也很少会有 NaN，但是一旦碰到的话，可能达不到我们预期的效果。
而我们使用 includes 就可以准确的判断
let list = ['a', 'b', 'c', NaN]
if(list.includes(NaN)) {
console.log('包含') // 包含
} ② **指数运算语法
在之前我们会通过 Math.pow() 来进行指数的运算
let pow = Math.pow(2, 3)
console.log(pow) //8 现在有了 ** 语法，确实是方便多了
let pow = 2 ** 3
console.log(pow) //8 2. ES8
1. Object.values()
之前是有个 Object.keys 的 ，现在有了Object.values() 其实而很简单，很小的一个知识点，直接上代码
const obj = {
name: 'wft',
age: 18
}
console.log(Object.keys(obj)) // [ 'name', 'age' ]
console.log(Object.values(obj)) // [ 'wft', 18 ]
/**
* 很少用
*/
// 传入数组
console.log(Object.keys([1, 2, 3])) // [ '0', '1', '2' ]
console.log(Object.values([1, 2, 3])) // [ 1, 2, 3 ]
// 传入字符串
console.log(Object.keys('abc')) // [ '0', '1', '2' ]
console.log(Object.values('abc')) // [ 'a', 'b', 'c' ] 2. Object.entries
entries()方法 返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in 循环遍历该对象时返回的顺序一致（区别在于for...in循环也枚举原型链中的属性）
简单说就是Object.entries()可以把一个对象的键值以数组的形式遍历出来，结果和for...in一致，但不会遍历原型属性
const obj = {
name: 'wft',
age: 18
}
let objEntries = Object.entries(obj)
console.log(objEntries) // [ [ 'name', 'wft' ], [ 'age', 18 ] ]
for(let [key, val] of objEntries) {
console.log(key, '----->>>')
console.log(val, '----->>>')
} 也可以传入一个数组，大家感兴趣可以自己试一下
这个在之前有写过一次应用场景，大家可以去看下
for of循环获取index索引值，并且修改自身元素
3. String Padding：padStart 和 padEnd
其实用的不多，我是没用过，要实现个什么事，都是可以通过其他方式来实现的，就看自己对什么方法用的熟
两个字符串的方法，参数一样。分别对字符串进行首尾填充
接受两个参数
第一个参数：传入要填充到的长度是几
第二个参数： 选择用什么填充
let message = 'Hello World'
// 将message从前面用 * 填充至长度15，然后再从后面用 - 填充至长度20
let newMessage = message.padStart(15, '*').padEnd(20, '-')
console.log(newMessage) //****Hello World----- 4. Trailing-Commas（结尾的逗号）使用 （做个了解就好）
这个怎么说呢，，就是在ES8之前我们函数的最后一个参数后面是不能有逗号的，是不允许的，直接会报错，但是ES8之后，有了这么个语法，就可以加了，就像下面的例子
function fn(m, n,) {
}
fn(1, 2,) 这个在之前就会报错的，但是ES8之后就可以这么写了。
即便是可以这么写，我也不会这么去写的，毕竟有点儿强迫症，影响代码美观。那出这个语法的意义何在？就是为了可能有一些其他语言的js开发者，有那么个习惯（在参数后面习惯性加个逗号），其实也就是这么个事。做个了解好了
5. Object.getOwnPropertyDescriptors() （了解一下好了）
这个是获取所有属性的描述符 ，了解一下就好，我是目前还没用过呢，见到能认识就好
let obj = {
name: 'wft',
age: 18
}
console.log(Object.getOwnPropertyDescriptors(obj))
// {
// name: {
// value: 'wft',
// writable: true,
// enumerable: true,
// configurable: true
// },
// age: { value: 18, writable: true, enumerable: true, configurable: true }
// } 其他还有async await的使用，这个也挺常用的，也就不做赘述了
3. ES9
- Async iterators ：迭代器
- Object spread operators: 这个就是 ...运算符结构对象
- Promise finally: Promise新增了 finally
大家做个了解哈，感兴趣的话可以百度一下。偷个懒。。。
4. ES10
① flat
这个就是扁平数组，对数组进行降维
let list = [1, 2, [3, 4], [5, [6, 7, 8]], 9, 10]
// 接受一个参数，降几层，Infinity无限扁平
let target = list.flat(Infinity)
console.log(target) //[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 之前得博客：多维数组扁平化处理
② flatMap
直接给大家上两段代码，对比一下（和数组的map方法，有点儿像，但也有点儿差距），最明显的是
let infos = [ "Hello World", "你好啊 李银河！", "My name is WFT"]
// map 使用
let target1 = infos.map(item => item.split(" ")) // [ [ 'Hello', 'World' ], [ '你好啊', '李银河！' ], [ 'My', 'name', 'is', 'WFT' ] ]
// flatMap 使用
let target2 = infos.flatMap(item => item.split(" ")) // [ 'Hello', 'World', '你好啊', '李银河！', 'My', 'name', 'is', 'WFT' ] flatMap ： 如果里面有数组的话，会自动降一个维度（注意是一个维度！）
③ Object.fromEntries
前面说了 Object.entries ， Object.fromEntries就是将Object.entries再转回去
let obj = {
name: 'wft',
age: 18
}
let entries = Object.entries(obj) // [ [ 'name', 'wft' ], [ 'age', 18 ] ]
let fromEntries = Object.fromEntries(entries) // { name: 'wft', age: 18 } ④ trimStart 和 trimEnd
之前有个 trim() 方法，是去掉字符串首尾空格，现在 trimStart 就是去除前面的空格，trimEnd去除后面的空格，使用起来也很简单
const message = " Hellow World "
console.log(message.trimStart())
console.log(message.trimEnd()) 5. ES11
① 大整数 BigInt 的使用
// ES11之前 max_safe_integer
const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt) // 9007199254740991
// 再大的数字话 也可以表示，但是就不一定准确了，所以为了安全考虑就不要使用比这个更大的
console.log(maxInt + 1) // 9007199254740992
console.log(maxInt + 2) // 9007199254740992
// ES11之后：BigInt
const bigInt = 900719925474099100n
// 如果相加的话就必须后面加上 n , 让其成为同一类型的数据
console.log(bigInt + 10n) // 900719925474099110n
const num = 100
console.log(bigInt + BigInt(num)) // 900719925474099200n
const smallNum = Number(bigInt)
console.log(smallNum) // 900719925474099100 ② Nullish-Coalescing-operator.js（空值合并运算符的使用）
先举个例子，
当我们拿到从后台返回的数据的时候，为了更严格一些，经常会对返回的数据进行判断，例如：假设从后台拿到data这么个对象，里面有一些字段是展示在页面上的，这个时候就得去判断，返回的数据里面有没有这个字段，如果没返回的话，我们就会给其一个默认值，就像这样：this.value = data.value || 'default value'。使用了 || 运算符，但是这个是有问题的。|| 运算符就是当前面为 null 、undefined、0、''的时候都会取我们后面的默认值，显然这不是我们想要的结果，如果后台返回0，我们肯定要0的，而不是取默认值。所以 || 运算符是存在一定隐患的。
但是在ES11之后新增了 空值合并运算符（??），我想这个才是我们想要的，?? 运算符只判断是否为 null 和 undefined ，如果为null或者undefined才会取我们的默认值！！
下面就用代码看下这个两个运算符的区别
// undefined 的情况
let foo = undefined
let bar1 = foo || 'default value'
let bar2 = foo ?? 'default value'
console.log(bar1) // default value
console.log(bar2) // default value // null 的情况
let foo = null
let bar1 = foo || 'default value'
let bar2 = foo ?? 'default value'
console.log(bar1) // default value
console.log(bar2) // default value // 0 的情况
let foo = 0
let bar1 = foo || 'default value'
let bar2 = foo ?? 'default value'
console.log(bar1) // default value
console.log(bar2) // 0 // 空字符串 的情况
let foo = ''
let bar1 = foo || 'default value'
let bar2 = foo ?? 'default value'
console.log(bar1) // default value
console.log(bar2) // ''（其实啥都没有，就是个空字符串） 这样看来，以后还是使用 空值运算符(??) 比较稳健呀！
③ OptionalChaining.js（可选连的使用）
其实也是个判断的东西
let obj = {
name: 'wft'
}
let value = obj.info.age
console.log(value) 大家看这段代码，肯定是会报错的吧，首先obj.info就是undefined，那undefined.age。。。不报错就怪了。 我们可以修改为如下方式
let obj = {
name: 'wft'
}
if(obj && obj.info && obj.info.age) {
let value = obj.info.age
console.log(value)
} 这样是可以的，但确显得尤为麻烦，程序员就是懒呀，
从ES11之后就有了可选链的使用，上面就可以这么写了
let obj = {
name: 'wft'
}
let value = obj?.info?.age ?? 'default value'
console.log(value) 看吧，既简单又明了，这个语法真的特别棒！但是注意这个是ES11才有的语法，使用node的话，也要注意下node的版本
6. ES12
ES12有点儿新了，可能对浏览器或者node等的版本会有要求，大家注意下，我现在的node版本是v14.20.0，这个版本在node环境中用不了，所以用浏览器测试
① FinalizationRegistry
FinalizationRegistry 这个类 可以监听到某个对象被销毁，在ES12之前是不可以的
// 实例化
const finalRegistry = new FinalizationRegistry(value => {
console.log("注册在finalRegistry的对象，某一个被销毁", value)
})
let obj = { name: 'wft' }
let o = { name: 'lilei' }
// 调用 register方法 将想要监听到的对象注册进去，这样在对象销毁的时候，会回调上面实例化的时候传入的函数
finalRegistry.register(obj, 'obj - value')
finalRegistry.register(o, 'o - value')
obj = null // 销毁对象 obj
o = null // 销毁对象 o 看下浏览器的打印
② WeakRef
WeakSet 和 WeakMap 是基于弱引用的数据结构，ES2021 更进一步，提供了 WeakRef 对象，用于直接创建对象的弱引用
WeakRef 对象允许您保留对另一个对象的弱引用，而不会阻止被弱引用对象被 GC 回收
WeakRef mdn
let obj = { name: 'wft' }
let info = new WeakRef(obj) 如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用。
上面示例中，obj是原始对象，构造函数WeakRef()创建了一个基于obj的新对象info。这里，info就是一个 WeakRef 的实例，属于对obj的弱引用，垃圾回收机制不会计入这个引用，也就是说，info的引用不会妨碍原始对象obj被垃圾回收机制清除。
WeakRef 实例对象有一个deref()方法，如果原始对象存在，该方法返回原始对象；如果原始对象已经被垃圾回收机制清除，该方法返回undefined
let obj = { name: 'wft' }
let info = new WeakRef(obj)
obj = null
let o = target.deref()
setTimeout(() => {
console.log(o, '----->>>') // 应该是 undefined 才对
}, 10000) ③ 逻辑赋值运算符
新增了三个逻辑运算，分别是 ||=、&&=、??=
其实和咱们常用的 += 一个道理，所以这里就不再赘述了，举个例子：
// ||= 逻辑或赋值运算
let message = undefined
// message = message || "default value"
message ||= "default value" // 等价于上面的写法
// &&= 逻辑与赋值运算
// ??= 逻辑空赋值运算 7. ES13
ES13太新了，如果使用太旧的浏览器可能是就跑不起来，旧的浏览器不支持的。就目前的项目来说，还是不推荐大家使用这种方式，还是用以前的方式，更保险一些。
① method.at()
以前我们获取数组或者字符串中的某个元素的时候，会使用中括号，然后里面是对应的索引值，但是不支持负数。现在又新增了at方法，里面是支持写入负数的
let a = [1,2,3]
console.log(a.at(1)) // 2
console.log(a.at(-1)) // 3
let str = 'Hello World'
console.log(str.at(1)) // e
console.log(str.at(-1)) // d ② Object.hasOwn()
判断一个对象的属性是否是自身含有的属性，我们之前都是使用hasOwnProperty()，如下所示：
function Fn(name, age) {
this.name = name
this.age = age
}
Fn.prototype.height = '1.88'
const obj = new Fn('wft', 18)
for(let key in obj) {
if(obj.hasOwnProperty(key)) {
console.log(key, obj[key], '----->>>')
}
} for in 遍历会把原型上的属性也遍历出来，我们会使用hasOwnProperty()来判断该属性是不是自身含有的属性，来过滤掉非自身含有的属性。上面的例子中 height 就不是自身含有的属性。
// 情况1
const obj = {
name: 'wft',
age: 18,
hasOwnProperty: function() {
return '123'
}
}
console.log(obj.hasOwnProperty()) // 123 这个使用就相当于重写了方法，那就判断不出某个属性是否是自身含有的属性了
// 情况2
const info = Object.create(null)
console.log(info.hasOwnProperty) //undefined // 情况1
const obj = {
name: 'wft',
age: 18,
hasOwnProperty: function() {
return '123'
}
}
obj.__proto__.height = '1.88'
console.log(Object.hasOwn(obj, 'age')) // true
console.log(Object.hasOwn(obj, 'height')) // false
// 情况2
const info = Object.create(null)
console.log(Object.hasOwn) // ƒ hasOwn() { [native code] } ![1275.找出井字棋的获胜者Java[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)