ES7-12内容详解

ES7-ES12知识点解析

一、ES7主要内容

1. Array Includes

在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。

在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。

const names = ["abc", "cba", "nba", "mba", NaN]

if (names.indexOf("cba") !== -1) {
  console.log("包含abc元素")
}

console.log(names.includes('abc',2))

// ES7 ES2016
if (names.includes("cba", 2)) {
  console.log("包含abc元素")
}

if (names.indexOf(NaN) !== -1) {
  console.log("包含NaN")
}

if (names.includes(NaN)) {
  console.log("包含NaN")
}

//以上方法在字符串中同样适用
const str='liu'
console.log(str.indexOf('l'))//0
console.log(str.includes('l'))//true

2.指数(乘方) exponentiation运算符

在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。

在ES7中，增加了 ** 运算符，可以对数字来计算乘方。

const result1 = Math.pow(3, 3)
console.log(result1)
// ES7: **
const result2 = 3 ** 3
console.log(result1, result2)

console.log(5**5)

二、ES8主要内容

1.Object values

之前我们可以通过 Object.keys 获取一个对象所有的key，在ES8中提供了 Object.values 来获取所有的value值：

const obj = {
  name: "liu",
  age: 21
}

console.log(Object.keys(obj))
console.log(Object.values(obj))

// 用的非常少
console.log(Object.values(["abc", "cba", "nba"]))
console.log(Object.values("abc"))

2.Object entries

通过Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。

const obj={
  name:'liu',
  age:21,
  height:1.88
}

console.log(Object.entries(obj))

console.log(Object.entries(["abc", "cba", "nba"]))
console.log(Object.entries('abc'))

3.String Padding

某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的。

//String Padding---字符串填充

let str='abc'
console.log(str.padStart(5,'*'))
console.log(str.padEnd(5,'*'))

//案例--号码
const phone='19831645976'
const phones=phone.slice(-4)
console.log(phones)
const NewPhone=phones.padStart(11,'*')
console.log(NewPhone)

4.Trailing Commas

在ES8中，我们允许在函数定义和调用时多加一个逗号：

5.Object Descriptors

ES8中增加了另一个对对象的操作是 Object.getOwnPropertyDescriptors ，这个在之前已经讲过了，这里不再重复。

三、ES9新增知识点

• Async iterators：后续迭代器讲解
• Object spread operators：前面讲过了
• Promise finally：后续讲Promise讲解

四、ES10新增知识点

1.flat flatMap

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

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

• 注意一：flatMap是先进行map操作，再做flat的操作；

• 注意二：flatMap中的flat相当于深度为1；

  // 1.flat的使用
  const nums = [10, 20, [2, 9], [[30, 40], [10, 45]], 78, [55, 88]]
  const newNums = nums.flat()
  console.log(newNums)
  
  const newNums2 = nums.flat(2)
  console.log(newNums2)
  
  // 2.flatMap的使用
  const nums2 = [10, 20, 30]
  const newNums3 = nums2.flatMap(item => {
    return item * 2
  })
  const newNums4 = nums2.map(item => {
    return item * 2
  })
  
  console.log(newNums3)
  console.log(newNums4)
  

2.Object fromEntries

​ 在前面，我们可以通过 Object.entries 将一个对象转换成 entries，那么如果我们有一个entries了，如何将其转换成对象呢？ES10提供了 Object.formEntries来完成转换：

// const obj={
//   name:"liu",
//   age:21
// }
// const newArr=Object.entries(obj)
// console.log(newArr)

// const newObj=Object.fromEntries(newArr)
// console.log(newObj)

// Object.fromEntries的应用场景
const queryString = 'name=liu&age=21&height=1.88'
const queryParams = new URLSearchParams(queryString)
// console.log(queryParams)
for (const param of queryParams) {
  console.log(param)
}

const paramObj = Object.fromEntries(queryParams)
console.log(paramObj)

3.trimStart trimEnd

​ 去除一个字符串首尾的空格，我们可以通过trim方法，如果单独去除前面或者后面呢？ES10中给我们提供了trimStart和trimEnd；

const str='    hello   world   '
console.log(str.trim())
console.log(str.trimStart())
console.log(str.trimEnd())

4.Symbol description：已经讲过了

const s=Symbol('aaa')
console.log(s.description)

5.Optional catch binding：后面讲解try cach讲解

五、ES11新增知识点

1.BigInt—新增数据类型，大整数

​ 在早期的JavaScript中，我们不能正确的表示过大的数字：大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的。

那么ES11中，引入了新的数据类型BigInt，用于表示大的整数：BitInt的表示方法是在数值的后面加上n。

2.Nullish Coalescing Operator

ES11，Nullish Coalescing Operator增加了空值合并操作符：

3.Optional Chaining

可选链也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁：

4.Global This

​ 在之前我们希望获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的。比如在浏览器中可以通过this、window来获取；比如在Node中我们需要通过global来获取；那么在ES11中对获取全局对象进行了统一的规范：globalThis。

5.for…in标准化

在ES11之前，虽然很多浏览器支持for…in来遍历对象类型，但是并没有被ECMA标准化。

在ES11中，对其进行了标准化，for…in是用于遍历对象的key的：

// for...in 标准化: ECMA
const obj = {
  name: "liu",
  age: 21
}

for (const item in obj) {
  console.log(item)
}//name age

6.Dynamic Import：后续ES Module模块化中讲解。

7.Promise.allSettled：后续讲Promise的时候讲解。

8.import meta：后续ES Module模块化中讲解。

六、ES12增加知识点

1.FinalizationRegistry

​ FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。

​ FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调

用一个清理回调。（清理回调有时被称为 finalizer ）; 你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值;

2.WeakRefs

​ 如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用：如果我们希望是一个弱引用的话，可以使用WeakRef；

// ES12: WeakRef类
// WeakRef.prototype.deref: 
// > 如果原对象没有销毁, 那么可以获取到原对象
// > 如果原对象已经销毁, 那么获取到的是undefined
const finalRegistry = new FinalizationRegistry((value) => {
  console.log("注册在finalRegistry的对象, 某一个被销毁", value)
})

let obj = { name: "liu" }
let info = new WeakRef(obj)

finalRegistry.register(obj, "obj")

obj = null

setTimeout(() => {
  console.log(info.deref()?.name)
  console.log(info.deref() && info.deref().name)
}, 10000)

3.logical assignment operators

// 1.||= 逻辑或赋值运算
 let message = "hello world"
 message = message || "default value"
 message ||= "default value"
 console.log(message)

// 2.&&= 逻辑与赋值运算
// &&
 const obj = {
   name: "why",
   foo: function() {
     console.log("foo函数被调用")
    
   }
 }

 obj.foo && obj.foo()

// &&=
// let info = {
//   name: "why"
// }

// // 1.判断info
// // 2.有值的情况下, 取出info.name
// // info = info && info.name
// info &&= info.name
// console.log(info)

// 3.??= 逻辑空赋值运算
let message = 0
message ??= "default value"
console.log(message)

4.Numeric Separator：讲过了；

5.String.replaceAll：字符串替换；