當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript高级之ECMASript 7、8 、9 、10 新特性

發布時間：2024/7/5 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript高级之ECMASript 7、8 、9 、10 新特性小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第3章 ECMASript 7 新特性

3.1. Array.prototype.includes

Includes 方法用來檢測數組中是否包含某個元素，返回布爾類型值

3.2. 指數操作符

在ES7中引入指數運算符「 **」，用來實現冪運算，功能與 Math.pow結果相同

第4章 ECMASript 8 新特性

4.1. async和 await

async和 await兩種語法結合可以讓異步代碼像同步代碼一樣

4.1.1. async函數

async函數的返回值為 promise對象，

promise對象的結果由 async函數執行的返回值決定

1）返回一個字符串：

2）返回的結果不是一個Promise 類型的對象：

3）拋出錯誤：

4）返回的結果是一個Promise對象，則函數的返回結果是成功還是失敗取決于這個Promise對象的結果是成功還是失敗：

4.1.2. await表達式

await必須寫在 async函數中

await右側的表達式一般為 promise對象

await返回的是 promise成功的值

await的 promise失敗了 , 就會拋出異常 , 需要通過 try...catch捕獲處理

案例1：async 和 await 結合讀取文件

// 引入fs模塊 const fs = require('fs') // 讀取為學 function readWeiXue() {return new Promise((resolve, reject) => {fs.readFile('../14-ES6~ES11/resources/為學.md', (err, data) => {if(err) {// 如果失敗reject(err)}// 如果成功resolve(data)})}) } // 聲明一個async函數 async function main() {try {// 獲取為學內容let weixue = await readWeiXue()console.log(weixue.toString())} catch(e) {console.log(e)} }main()

案例2：async 和 await 結合發送AJAX請求

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><script type="text/javascript">// 發送AJAX請求，返回的結果是Promise對象function sendAJAX(url) {return new Promise((resolve, reject) => {// 1. 創建對象const x = new XMLHttpRequest()// 2. 初始化x.open('GET', url)// 3. 發送x.send()// 4. 事件綁定x.onreadystatechange = function() {if(x.readyState === 4) {if(x.status >= 200 && x.status <= 300) {// 成功啦resolve(x.response)} else {// 失敗reject(x.status)}}}})}// 1. promise then方法測試sendAJAX('https://api.apiopen.top/getJoke').then(value => {console.log(value)})// 2. async 與 await 測試/* async function main() {let result = await sendAJAX('https://api.apiopen.top/getJoke')console.log(result)}main() */</script></body> </html>

4.2. Object.values和 Object.entries

Object.values()方法返回一個給定對象的所有可枚舉屬性值的數組

Object.entries()方法返回一個給定對象自身可遍歷屬性 [key,value] 的數組

4.3. Object.getOwnPropertyDescriptors

該方法返回指定對象所有自身屬性的描述對象

第5章 ECMASript 9 新特性

5.1. Rest/Spread屬性

Rest參數與 spread擴展運算符在 ES6中已經引入，不過 ES6中只針對于數組，在 ES9中為對象提供了像數組一樣的 rest參數和擴展運算符

/* Rest參數與spread擴展運算符在ES6中已經引入，不過ES6中只針對于數組，在ES9中為對象提供了像數組一樣的rest參數和擴展運律符 */function connect({host, port, username, password}) {console.log(host);console.log(port);console.log(username);console.log(password)}connect({host: '127.0.0.1',port: 3306,username: 'root',password: 'root'})function connect({host, port, ...user}) {console.log(host);console.log(port);console.log(user);}connect({host: '127.0.0.1',port: 3306,username: 'root',password: 'root'})

5.2. 正則表達式命名捕獲組

ES9允許命名捕獲組使用符號『 ?』 ,這樣獲取捕獲結果可讀性更強

let str = '<a href="http://www.atguigu.com">尚硅谷</a>';const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;const result = reg.exec(str);console.log(result.groups.url);console.log(result.groups.text);

5.3. 正則表達式反向斷言

ES9支持反向斷言，通過對匹配結果前面的內容進行判斷，對匹配進行篩選。

//聲明字符串 let str = 'JS5211314你知道么555啦啦啦';//正向斷言 const reg = /\d+(?=啦)/;const result = reg.exec(str);//反向斷言 const reg = /(?<=么)\d+/;const result = reg.exec(str);console.log(result);

5.4. 正則表達式 dotAll模式

正則表達式中點.匹配除回車外的任何單字符，標記『 s』改變這種行為，允許行終止符出現

let str =` <ul> <li> <a>肖生克的救贖</a> 上映日期: 1994-09-10 </li> <li> <a>阿甘正傳</a> 上映日期: 1994-07-06 </li> </ul>`;//聲明正則 const reg = /<li>.*?<a>(.*?)<\/a>.*?(.*?)<\/p>/gs;//執行匹配 const result = reg.exec(str);let result;let data = [];while (result = reg.exec(str)) {data.push({title: result[1],time: result[2]});}//輸出結果 console.log(data);

第6章 ECMASript 10 新特性

6.1. Object.fromEntries

把鍵值對數組轉成了對象

6.2. trimStart和 trimEnd

trimStart()和trimEnd() 去掉首部、尾部空格

6.3. Array.prototype.flat 與 flatMap

flatMap() 方法首先使用映射函數映射每個元素，然后將結果壓縮成一個新數組。它與 map 連著深度值為1的 flat 幾乎相同，但 flatMap 通常在合并成一種方法的效率稍微高一些。

6.4. Symbol.prototype.description

description 是一個只讀屬性，它會返回 Symbol 對象的可選描述的字符串

第7章 ECMASript 11 新特性

7.1. String.prototype.matchAll

如果一個正則表達式在字符串里面有多個匹配，現在一般使用g修飾符或y修飾符，在循環里面逐一取出。

let str = `<ul><li><a>肖克的救贖</a>上映日期： 1994-09-10</li><li><a>阿甘正傳</a>上映日期： 1994-07-06</li></ul>`// 聲明正則const reg = /<li>.*?<a>(.*?)<\/a>.*?(.*?)<\/p>/sg// 調用方法const result = str.matchAll(reg)console.log(result)for(let v of result) {console.log(v)}console.log('---------------')// const arr = [...result]// console.log(arr)

7.2. 類的私有屬性

私有屬性只能在類內部訪問

7.3. Promise.allSettled

接收參數為promise數組，返回promise對象，狀態永遠為成功
始終能夠得到每一個promise成功失敗的結果

Promise.all()

返回的是promise對象，返回狀態有一個失敗且都失敗，失敗的值為數組里面失敗的值

// 聲明兩個primiseconst p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('商品數據 - 1')}, 1000)})const p2 = new Promise((resolve, reject) => {setTimeout(() => {resolve('商品數據 - 2')// reject('商品數據 - 2 出問題了！')}, 1000)})// 調用 allsettled()/* const result = Promise.allSettled([p1, p2])console.log(result) */// 調用all()const res = Promise.all([p1, p2])console.log(res)

總結：
什么時候用 Promise.allSettled()？

什么時候用 Promise.all()？

每一個異步任務都想得到結果（不管Promise的狀態是成功還是失敗）就使用Promise.allSettled()
異步任務要求每個都成功才能往下執行就使用Promise.all()

7.4. 可選鏈操作符

可選鏈操作符( ?. )允許讀取位于連接對象鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似于 . 鏈式操作符，不同之處在于，在引用為空(nullish ) (null 或者 undefined) 的情況下不會引起錯誤，該表達式短路返回值是 undefined。與函數調用一起使用時，如果給定的函數不存在，則返回 undefined。

7.5. 動態 import導入

靜態的import 語句用于導入由另一個模塊導出的綁定。無論是否聲明了 strict mode ，導入的模塊都運行在嚴格模式下。在瀏覽器中，import 語句只能在聲明了 type="module" 的 script 的標簽中使用。

此外，還有一個類似函數的動態 import()，它不需要依賴 type="module" 的script標簽。
在您希望按照一定的條件或者按需加載模塊的時候，動態import() 是非常有用的。而靜態型的 import 是初始化加載依賴項的最優選擇

7.6. globalThis對象

全局屬性 globalThis 包含全局的 this 值，類似于全局對象（global object）。

瀏覽器中：

Node環境中：

7.7. bigint類型

BigInt 是一種內置對象，它提供了一種方法來表示大于 253 - 1 的整數。這原本是 Javascript中可以用 Number 表示的最大數字。BigInt 可以表示任意大的整數。
可以用在一個整數字面量后面加 n 的方式定義一個 BigInt ，如：10n，或者調用函數BigInt()。

總結

以上是生活随笔為你收集整理的JavaScript高级之ECMASript 7、8 、9 、10 新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python数据分析基础教程 numpy
下一篇： JS高级——arguments参数详解