前言

本文旨在介紹ES7~12一些常用的語(yǔ)法，有些特性篇幅較多，會(huì)專門寫文章介紹。

JavaScript這門語(yǔ)言在設(shè)計(jì)之初，其實(shí)會(huì)存在某些問題，隨著JavaScript這門語(yǔ)言越來(lái)越流行， ECMA國(guó)際標(biāo)準(zhǔn)化組織在ES5的基礎(chǔ)上，推出了許多新特性以補(bǔ)充之前不足的地方，使得JavaScript這門語(yǔ)言越來(lái)越完善，那么今天我就將講述一些比較常用的ES7~12的新特性，一起來(lái)看看吧。

看完本文，你將：

1. 你將會(huì)了解ES7~12的常用的語(yǔ)法
2. 你將會(huì)了解這些語(yǔ)法的常用使用規(guī)則

一起來(lái)看看吧

ES7

數(shù)組的includes方法

ES7中新增了數(shù)組的includes方法，該方法旨在判斷數(shù)組中是否存在某個(gè)元素。

在ES7之前，判斷數(shù)組中是否存在某個(gè)元素，可以用indexOf,但是如果數(shù)組中有NaN，則判斷不出來(lái)，   例如：

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

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


//E

includes方法中第一個(gè)參數(shù)可以傳入要判斷的元素，第二個(gè)參數(shù)傳入索引值，表示從索引值位置開始查找：

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元素")//可以輸出
}

指數(shù)的運(yùn)算方法

ES7中新增了指數(shù)的運(yùn)算方法，該方法旨在使指數(shù)寫法更簡(jiǎn)便。

ES7之前：

Math.pow()，第一個(gè)參數(shù)傳入底數(shù)，第二個(gè)參數(shù)傳入指數(shù)

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

ES7：用**寫法

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

ES8

Object的values

Object.keys獲取對(duì)象所有的屬性名

Object.values獲取對(duì)象所有的屬性名,例如：

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

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

如果參數(shù)里傳入的是數(shù)組，返回?cái)?shù)組本身：
console.log(Object.values([“a”, “b”, “c”]))//[ ‘a’, ‘b’, ‘c’ ]

參數(shù)里傳入的是字符串，返回的是其每個(gè)字母拆分后轉(zhuǎn)化后形成的數(shù)組：
console.log(Object.values(“abc”))//[ ‘a’, ‘b’, ‘c’ ]

Object的entries

Object.entries將一個(gè)對(duì)象轉(zhuǎn)化成數(shù)組，對(duì)象的其中的每個(gè)屬性鍵值對(duì)放在子數(shù)組里面。

例如：

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

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

如果傳入的是數(shù)組，則每個(gè)子數(shù)組里面的鍵的值為索引號(hào)，例如：

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

如果傳入的是字符串，和數(shù)組的情況類似，子數(shù)組里面的值為字符串拆分后的字母：

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

padStart和padEnd

ES8中增加了 padStart 和 padEnd 方法，分別是對(duì)字符串的首尾進(jìn)行填充的。

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

列舉一個(gè)簡(jiǎn)單的應(yīng)用場(chǎng)景：比如需要對(duì)身份證、銀行卡的前面位數(shù)進(jìn)行隱藏
const cardNumber = “321324234242342342341312”
const lastFourCard = cardNumber.slice(-4)
const finalCard = lastFourCard.padStart(cardNumber.length, “*”)
console.log(finalCard)//********************1312

Trailing-Commas

允許我們?cè)谡{(diào)用函數(shù)時(shí)，在最后一個(gè)參數(shù)后面加上逗號(hào)不會(huì)報(bào)錯(cuò)。

ES9

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() 方法返回指定對(duì)象上一個(gè)自有屬性對(duì)應(yīng)的屬性描述符。（自有屬性指的是直接賦予該對(duì)象的屬性，不需要從原型鏈上進(jìn)行查找的屬性）不存在則返回undefined

const object1 = {
  property1: 42
};

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

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

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

async、await的使用

由于該部分篇幅較多，所以以后會(huì)專門寫文章介紹其詳細(xì)使用的。

ES10 

flat和flatMap的使用

flat:

flat會(huì)將數(shù)組中嵌套的子數(shù)組展開后放入最終的數(shù)組中，可以傳入數(shù)組表示可以展開數(shù)組的層數(shù)，默認(rèn)為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()的效果，傳入一個(gè)回調(diào)函數(shù)，類似Array.map()的回調(diào)函數(shù)，并且對(duì)返回的數(shù)值有flat的效果，例如：

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

應(yīng)用場(chǎng)景：將數(shù)組中的所有的字符串以某個(gè)符號(hào)分割后輸出：

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'
// ]

Object的fromEntries

可以將類似于對(duì)象經(jīng)過Object.entries轉(zhuǎn)化成的數(shù)組再轉(zhuǎn)化回對(duì)象形式：

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

trimStart和trimEnd

trim請(qǐng)除字符串前后的空格

trimStart清除字符串前面的空格

trimEnd清除字符串后面的空格

ES11

BigInt的使用

之前，JS所能表示的最大整數(shù)為Number.MAX_SAFE_INTEGER，為9007199254740991，比這個(gè)數(shù)還大，則可能在運(yùn)算時(shí)出現(xiàn)錯(cuò)誤，于是ES11后，推出了BigInt，用來(lái)表示可以超出限制的數(shù)字，BigInt數(shù)字末尾會(huì)加n,可以用Number(數(shù)字)將BigInt轉(zhuǎn)化成普通的數(shù)字類型。例子：

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

Nullish-Coalescing-operator

Nullish-Coalescing-operator空值合并運(yùn)算，用雙問號(hào)表示（??）：
如果??前面的值為空或者undefined，則最后的結(jié)果取問號(hào)后面的數(shù)，例如：

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

console.log(bar)//defualt value

可選鏈

ES11提供了可選鏈(Optional Chainling)，實(shí)例：
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則不繼續(xù)取值，否則從當(dāng)前繼續(xù)取值。

gloalThis

在瀏覽器運(yùn)行環(huán)境下，window和全局作用域中的this均為全局對(duì)象。Node環(huán)境下是不行的，必須用global才可以拿到全局對(duì)象。

而ES11中的globalThis則在這2種情形下，都會(huì)指向全局對(duì)象。

ES12

finalizationRegistry的用法

finalizationRegistry是一個(gè)類，在注冊(cè)時(shí)候可以傳入一個(gè)回調(diào)函數(shù)，注冊(cè)在finalRegistry的對(duì)象, 被銷毀時(shí)候會(huì)執(zhí)行回調(diào)函數(shù)。注冊(cè)的對(duì)象的register第一個(gè)參數(shù)傳入綁定的對(duì)象，第二個(gè)參數(shù)可以傳入?yún)?shù)，這個(gè)參數(shù)會(huì)被回調(diào)函數(shù)接收。例子：

// ES12: FinalizationRegistry類
const finalRegistry = new FinalizationRegistry((value) => {
    console.log("注冊(cè)在finalRegistry的對(duì)象, 被銷毀", value)
})

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

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

obj = null
info = null
//注冊(cè)在finalRegistry的對(duì)象, 被銷毀 info
//注冊(cè)在finalRegistry的對(duì)象, 被銷毀 obj

WeakRef的使用

WeakRef是一個(gè)類，如果我們默認(rèn)將一個(gè)對(duì)象賦值給另外一個(gè)引用，那么這個(gè)引用是一個(gè)強(qiáng)引用，但是如果我們希望是一個(gè)弱引用的話，可以使用WeakRef；

此時(shí)如果想拿到引用的對(duì)象的屬性，需要先調(diào)用deref函數(shù)，例如：

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

這里要注意的是建立的是弱引用，如果將原先的引用破壞，則這個(gè)引用的對(duì)象會(huì)被回收，自然也拿不到值了。

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)

 logical-assign-operator

logical-assign-operator(邏輯運(yùn)算擦操作符)：

1. ||= 邏輯或賦值運(yùn)算 let message = “hello world” message = message ||
“default value” 上面的式子可以簡(jiǎn)寫成message ||= “default value”

2. &&= 邏輯與賦值運(yùn)算 與邏輯或賦值運(yùn)算用法同理

3. ??= 邏輯空賦值運(yùn)算：let message = 0
message ? ? = “default value”，？前面的不是空或者undefined就等于后面的內(nèi)容

到此這篇關(guān)于一文概述ES7~12的語(yǔ)法及其相關(guān)使用規(guī)則的文章就介紹到這了,更多相關(guān)ES7~12的語(yǔ)法與使用規(guī)則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論