ES6会了，ES7~12确定不来了解一下吗？（下篇ES7~12）

文章目录 前言ES71、数组的includes方法2、指数的运算方法 ES81、Object的values2、Object的entries3、padStart和padEnd4、Trailing-Commas ES91、Object.getOwnPropertyDescriptor()2、async、await的使用 ES101、 flat和flatMap的使用2、Object的fromEntries3、 trimStart和trimEnd ES111、BigInt的使用2、Nullish-Coalescing-operator3、可选链4、gloalThis ES121、finalizationRegistry的用法2、WeakRef的使用3、 logical-assign-operator

前言

本文承接上篇介绍ES6新特性的博客，旨在介绍ES7~12一些常用的语法，有些特性篇幅较多，会专门写文章介绍。
JavaScript这门语言在设计之初，其实会存在某些问题，随着JavaScript这门语言越来越流行， ECMA国际标准化组织在ES5的基础上，推出了许多新特性以补充之前不足的地方，使得JavaScript这门语言越来越完善，那么今天我就将讲述一些比较常用的ES7~12的新特性，一起来看看吧。
看完本文，你将：
1、你将会了解ES7~12的常用的语法
2、你将会了解这些语法的常用使用规则
一起来看看吧

ES7 1、数组的includes方法

ES7中新增了数组的includes方法，该方法旨在判断数组中是否存在某个元素。
在ES7之前，判断数组中是否存在某个元素，可以用indexOf,但是如果数组中有NaN，则判断不出来，例如：

const names = ["a", "b", "c", "d", NaN]

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


// E

includes方法中第一个参数可以传入要判断的元素，第二个参数传入索引值，表示从索引值位置开始查找：

const names = ["a", "b", "c", "d", NaN]

if (names.includes("NaN") !== -1) {
  console.log("包含元素")//可以输出
}
if (names.includes("b", 2)) {
  console.log("包含b元素")//不可以输出
}
if (names.includes("b", 1)) {
  console.log("包含b元素")//可以输出
}

2、指数的运算方法

ES7中新增了指数的运算方法，该方法旨在使指数写法更简便。
ES7之前：
Math.pow()，第一个参数传入底数，第二个参数传入指数

const result1 = Math.pow(3, 2)
console.log(result1)//9

ES7：用**写法

const result2 = 3 ** 2;
console.log(result2)//9

ES8 1、Object的values

Object.keys获取对象所有的属性名
Object.values获取对象所有的属性名,例如：

const obj = {
  name: "cy",
  age: 18
}

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

如果参数里传入的是数组，返回数组本身：
console.log(Object.values([“a”, “b”, “c”]))//[ ‘a’, ‘b’, ‘c’ ]
参数里传入的是字符串，返回的是其每个字母拆分后转化后形成的数组：
console.log(Object.values(“abc”))//[ ‘a’, ‘b’, ‘c’ ]

2、Object的entries

Object.entries将一个对象转化成数组，对象的其中的每个属性键值对放在子数组里面。例如：

const obj = {
    name: "cy",
    age: 18
}

console.log(Object.entries(obj))//[ [ 'name', 'cy' ], [ 'age', 18 ] ]

如果传入的是数组，则每个子数组里面的键的值为索引号，例如：

console.log(Object.entries(["a", "b", "n"]))//[ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'n' ] ]

如果传入的是字符串，和数组的情况类似，子数组里面的值为字符串拆分后的字母：

console.log(Object.entries("abc"))//[ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ]

3、padStart和padEnd

ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的。

const message = "Hello World"

const newMessage = message.padStart(15, "a")
const newMessage1 = message.padEnd(15, "a")
console.log(newMessage)//aaaaHello World
console.log(newMessage1);//Hello Worldaaaa

列举一个简单的应用场景：比如需要对身份z、yhk的前面位数进行隐藏
const cardNumber = “321324234242342342341312”
const lastFourCard = cardNumber.slice(-4)
const finalCard = lastFourCard.padStart(cardNumber.length, “*”)
console.log(finalCard)//********************1312

4、Trailing-Commas

允许我们在调用函数时，在最后一个参数后面加上逗号不会报错。

ES9 1、Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）不存在则返回undefined

const object1 = {
  property1: 42
};

const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1');

console.log(descriptor1.configurable);
//  true

console.log(descriptor1.value);
// 42

2、async、await的使用

由于该部分篇幅较多，所以以后会专门写文章介绍其详细使用的。

ES10 1、 flat和flatMap的使用

flat:
flat会将数组中嵌套的子数组展开后放入最终的数组中，可以传入数组表示可以展开数组的层数，默认为1.例如：

const nums = [10, 20, [2, 9],
    [
        [30, 40],
        [10, 45]
    ], 78, [55, 88]
]
const newNums = nums.flat()
console.log(newNums)//[ 10, 20, 2, 9, [ 30, 40 ], [ 10, 45 ], 78, 55, 88 ]

const newNums2 = nums.flat(2)
console.log(newNums2)//[
//   10, 20,  2,  9, 30,
//   40, 10, 45, 78, 55,
//   88
// ]

flatMap:
既有flat的效果，又有Array.map()的效果，传入一个回调函数，类似Array.map()的回调函数，并且对返回的数值有flat的效果，例如：

const nums2 = [10, 20, 30]
const newNums3 = nums2.flatMap(item => {
  return item * 2
})//[ 20, 40, 60 ]

应用场景：将数组中的所有的字符串以某个符号分割后输出：

const messages = ["Hello World", "hello cy", "my name is cy"]
const words = messages.flatMap(item => {
    return item.split(" ")
})

console.log(words)
// [
//   'Hello', 'World',
//   'hello', 'cy',
//   'my',    'name',
//   'is',    'cy'
// ]

2、Object的fromEntries

可以将类似于对象经过Object.entries转化成的数组再转化回对象形式：

let a = [
    ['0', 'a'],
    ['1', 'b'],
    ['2', 'n']
]
const paramObj = Object.fromEntries(a)
console.log(paramObj);//{ '0': 'a', '1': 'b', '2': 'n' }

3、 trimStart和trimEnd

trim请除字符串前后的空格
trimStart清除字符串前面的空格
trimEnd清除字符串后面的空格

ES11 1、BigInt的使用

之前，JS所能表示的最大整数为Number.MAX_SAFE_INTEGER，为9007199254740991，比这个数还大，则可能在运算时出现错误，于是ES11后，推出了BigInt，用来表示可以超出限制的数字，BigInt数字末尾会加n,可以用Number(数字)将BigInt转化成普通的数字类型。例子：

const bigInt = 900719925474099100n
console.log(bigInt + 10n)//900719925474099110n

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

const smallNum = Number(bigInt)
console.log(smallNum)//900719925474099100

2、Nullish-Coalescing-operator

Nullish-Coalescing-operator空值合并运算，用双问号表示（??）：
如果??前面的值为空或者undefined，则最后的结果取问号后面的数，例如：

const foo = undefined
// const bar = foo || "default value"
const bar = foo ?? "defualt value"

console.log(bar)//defualt value

3、可选链

ES11提供了可选链(Optional Chainling)，实例：
const info = {
name: “cy”,
// friend: {
// girlFriend: {
// name: “myj”
// }
// }
}
这是我们之前取值 info.friend.girlFriend的方法：if (info && info.friend && info.friend.girlFriend) {
console.log(info.friend.girlFriend.name)
}
可选链用法：info.friend ? .girlFriend ? .name
？前值为空或者undefined则不继续取值，否则从当前继续取值。

4、gloalThis

在浏览器运行环境下，window和全局作用域中的this均为全局对象。Node环境下是不行的，必须用global才可以拿到全局对象。
而ES11中的globalThis则在这2种情形下，都会指向全局对象。

ES12 1、finalizationRegistry的用法

finalizationRegistry是一个类，在注册时候可以传入一个回调函数，注册在finalRegistry的对象, 被销毁时候会执行回调函数。注册的对象的register第一个参数传入绑定的对象，第二个参数可以传入参数，这个参数会被回调函数接收。例子：

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

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

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

obj = null
info = null
//注册在finalRegistry的对象, 被销毁 info
//注册在finalRegistry的对象, 被销毁 obj

2、WeakRef的使用

WeakRef是一个类，如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用，但是如果我们希望是一个弱引用的话，可以使用WeakRef；
此时如果想拿到引用的对象的属性，需要先调用deref函数，例如：

let obj = { name: "cy" }
let info = new WeakRef(obj)
console.log(info.name); //undefined
console.log(info.deref().name);//cy

这里要注意的是建立的是弱引用，如果将原先的引用破坏，则这个引用的对象会被回收，自然也拿不到值了。

let obj = { name: "cy" }
let info = new WeakRef(obj)
console.log(info.name); //undefined
console.log(info.deref().name);//cy
obj = null

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

3、 logical-assign-operator

logical-assign-operator(逻辑运算擦 *** 作符)：

||= 逻辑或赋值运算 let message = “hello world” message = message ||
“default value” 上面的式子可以简写成message ||= “default value”&&= 逻辑与赋值运算 与逻辑或赋值运算用法同理??= 逻辑空赋值运算：let message = 0
message ? ? = “default value”，？前面的不是空或者undefined就等于后面的内容