ES7-ES12知识点解析和应用

---

theme: channing-cyan

跟着coderwhy学习

1.ES7 - Array Includes

• 在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。
• 在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。

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

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

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

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

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

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

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

• 在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。
• 在ES7中，增加了 ** 运算符，可以对数字来计算乘方。

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

3.ES8 Object values

• 之前我们可以通过 Object.keys 获取一个对象所有的key，在ES8中提供了 Object.values 来获取所有的value值： ```js const obj = { name: 'mint', age: 18 }

console.log(Object.keys(obj)) //[ 'name', 'age' ] console.log(Object.values(obj)) //[ 'mint', 18 ]

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

4.ES8 Object entries

• 通过Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。 ```js const obj = { name: 'mint', age: 18 }

console.log(Object.entries(obj)) //[ [ 'name', 'mint' ], [ 'age', 18 ] ] const objEntries = Object.entries(obj) objEntries.forEach(item => { console.log(item[0], item[1]) /** * name mint * age 18 */ })

// 如果是一个数组 console.log(Object.entries(["abc", "cba", "nba"])) //[ [ '0', 'abc' ], [ '1', 'cba' ], [ '2', 'nba' ] ]

//如果是一个字符串 console.log(Object.entries("abc")) //[ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ] ```

5.ES8 - String Padding

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

const newMsg =msg.padStart(15,'').padEnd(20,'-') console.log(newMsg);//*Hello World----- ```

• 举一个简单具一个应用场景：比如需要对身份证、银行卡的前面位数进行隐藏： js const cardNumber = "321324234242342342341312" const lastFourCard = cardNumber.slice(-4) const finalCard = lastFourCard.padStart(cardNumber.length, "*") console.log(finalCard) //********************1312

6.ES8 - Trailing Commas

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

```js function foo(m, n) { console.log(m. n) }

// 可以加一个逗号 卵用没有 了解一下 foo(20, 30,) ```

7.ES8 - Object Descriptors

• ES8中增加了另一个对对象的操作是 Object.getOwnPropertyDescriptors,之前用过了，不在详细记录了。

8.ES9新增知识点

• Async iterators
• Object spread operators
• Promise finally

9.ES10 - flat flatMap

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

  • flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
  • 注意一：flatMap是先进行map操作，再做flat的操作；
  • 注意二：flatMap中的flat相当于深度为1；

  10.ES11 - BigInt

  • 期的JavaScript中，我们不能正确的表示过大的数字：
    • MAXSAFEINTEGER的数值，表示的可能是不正确的。 js // ES11之前 max_safe_integer const maxInt = Number.MAX_SAFE_INTEGER console.log(maxInt) // 9007199254740991 console.log(maxInt + 1) console.log(maxInt + 2)

  • ES11中，引入了新的数据类型BigInt，用于表示大的整数：

    • tInt的表示方法是在数值的后面加上n
      ```js // ES11之后: BigInt const bigInt = 900719925474099100n console.log(bigInt + 10n)

    const num = 100 console.log(bigInt + BigInt(num))

    const smallNum = Number(bigInt) console.log(smallNum) ```

11.ES11 - Nullish Coalescing Operator

• ES11，Nullish Coalescing Operator增加了空值合并操作符： ```js const foo = ""

const result1 = foo || "默认值" const result2 = foo ?? "默认值" console.log(result1) // 默认值 console.log(result2) // '' ```

12.ES11 - Optional Chaining

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

```js const obj = { friend: { girlFriend: { name: 'lucy' } } }

if (obj.friend && obj.friend.girlFriend) { console.log(obj.friend.girlFriend.name) }

// 可选链方式 console.log(obj.friend?girlFriend?.name) ```

13.ES11 - Global This

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

13.ES11 - for..in标准化

• 在ES11之前，虽然很多浏览器支持for...in来遍历对象类型，但是并没有被ECMA标准化。
• 在ES11中，对其进行了标准化，for...in是用于遍历对象的key的： ```js const obj = { name: 'mint', age: 18, height: 1.88 }

for (const key in obj) { console.log(key) } ```

14.ES11 其他知识点

• Dynamic Import
• Promise.allSettled
• import meta
• ..

15.ES12 - FinalizationRegistry

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

  • FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。(清理回调有时被称为 finalizer );

  • 你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值;

    ```js // ES12: FinalizationRegistry类 const finalRegistry = new FinalizationRegistry((value) => { console.log("注册在finalRegistry的对象, 某一个被销毁", value) })

    let obj = { name: "why" } let info = { age: 18 }

    finalRegistry.register(obj, "obj") finalRegistry.register(info, "value")

    obj = null info = null ```

    16.ES12 - WeakRefs

• 如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用：

  • 如果我们希望是一个弱引用的话，可以使用WeakRef； js let obj = { name: "mint" } let info = new WeakRef(obj)

    17.ES12 - logical assignment operators

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

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

obj.foo && obj.foo()

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

// 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) // 0 ```