ES7~ES12那些事儿

ES7~ES12那些事儿
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 就不是自身含有的属性。

但是使用hasOwnProperty某些情况是有问题的，就像下面这样：
```
// 情况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
```
上面这两种情况都是有问题的，使用hasOwnProperty就判断不出是否为自身含有的属性了

为了解决上述问题，现在有了Object.hasOwn()方法，使用如下：
```
// 情况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] }
```
相关阅读:
【Ts】tsconfig.json、package.json、强制编译ts工程
 Nginx安装
 DHCP自动分配IP原理
 Linux 安全 - 扩展属性xattr
深度学习使用Accelerate库
 用DIV+CSS技术设计的红酒主题网站（web前端网页制作课作业）
停车场防逃费设备有哪些，捷曜超眸相机怎么样，有哪些功能？
java Random()获取指定范围内随机数
 基于Nodejs的外卖点餐平台的设计和实现
 程序猿七夕礼物-如何30分钟给女友快速搭建专属语聊房
原文地址：https://blog.csdn.net/m0_51431448/article/details/126892560

1. ES7

① includes

② **指数运算语法

2. ES8

1. Object.values()

2. Object.entries

3. String Padding：padStart 和 padEnd

4. Trailing-Commas（结尾的逗号）使用 （做个了解就好）

5. Object.getOwnPropertyDescriptors() （了解一下好了）

3. ES9

4. ES10

① flat

② flatMap

③ Object.fromEntries

④ trimStart 和 trimEnd

5. ES11

① 大整数 BigInt 的使用

② Nullish-Coalescing-operator.js（空值合并运算符的使用）

③ OptionalChaining.js（可选连的使用）

6. ES12

① FinalizationRegistry

② WeakRef

③ 逻辑赋值运算符

7. ES13

① method.at()

② Object.hasOwn()

4. Trailing-Commas（结尾的逗号）使用（做个了解就好）