當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[转]ES6、ES7、ES8、ES9、ES10新特性一览 (个人整理，学习笔记)

發布時間：2023/12/4 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 [转]ES6、ES7、ES8、ES9、ES10新特性一览 (个人整理，学习笔记) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.ES6新特性（2015）

1.1模塊化(Module)

1.1.1導出(export)

1.1.2導入(import)

1.2箭頭（Arrow）函數

1.2.1箭頭函數的結構

1.3默認參數

1.4模板字符串

1.5.結構賦值

1.5.1數組的結構賦值

1.5.2對象的結構賦值

1.6延展操作符(Spread operator)

1.7Promise

2 ES7新特性（2016）

2.1?includes()

2.1指數運算符**

3 ES8新特性（2017）

3.1 async/await

3.2?Object.values()

3.3 Object.entries()

3.4 String padding

3.5?Object.getOwnPropertyDescriptors()

3.6?SharedArrayBuffer對象

3.7?Atomics對象

4 ES9新特性（2018）

4.1?異步迭代

4.2?Promise.finally()

4.3?正則表達式命名捕獲組

5 ES10新特性（2019）

5.1?新增了Array的flat()方法和flatMap()方法

本文來自：https://juejin.im/post/5ca2e1935188254416288eb2#heading-18

在此摘錄一些我需要的用法。

1.ES6新特性（2015）

類
模塊化
箭頭函數
函數參數默認值
模板字符串
解構賦值
延展操作符
對象屬性簡寫
Promise
Let與Const

列出新特性但是此處我只詳細摘錄一些我不熟悉且需要的，如需詳細了解，請看原文。

1.1模塊化(Module)

ES5不支持原生的模塊化，在ES6中模塊作為重要的組成部分被添加進來。模塊的功能主要由 export 和 import 組成。每一個模塊都有自己單獨的作用域，模塊之間的相互調用關系是通過 export 來規定模塊對外暴露的接口，通過import來引用其它模塊提供的接口。同時還為模塊創造了命名空間，防止函數的命名沖突。

1.1.1導出(export)

//導出變量 export var name = 'Rainbow'var name = 'Rainbow'; var age = '24'; export {name, age};//導出常量 export const sqrt = Math.sqrt;//導出函數 export function myModule(someArg) {return someArg;

1.1.2導入(import)

import {myModule} from 'myModule';//用到了結構賦值 import {name,age} from 'test';//一條import 語句可以同時導入默認函數和其它變量。 import defaultMethod, { otherMethod } from 'xxx.js';

1.2箭頭（Arrow）函數

這是ES6中最令人激動的特性之一。=>不只是關鍵字function的簡寫，它還帶來了其它好處。箭頭函數與包圍它的代碼共享同一個this,能幫你很好的解決this的指向問題。有經驗的JavaScript開發者都熟悉諸如var self = this;或var that = this這種引用外圍this的模式。但借助=>，就不需要這種模式了。

1.2.1箭頭函數的結構

箭頭函數的箭頭=>之前是一個空括號、單個的參數名、或用括號括起的多個參數名，而箭頭之后可以是一個表達式（作為函數的返回值），或者是用花括號括起的函數體（需要自行通過return來返回值，否則返回的是undefined）。

// 箭頭函數的例子 ()=>1 v=>v+1 (a,b)=>a+b ()=>{alert("foo"); } e=>{if (e == 0){return 0;}return 1000/e; }

原文中說：

“不論是箭頭函數還是bind，每次被執行都返回的是一個新的函數引用，因此如果你還需要函數的引用去做一些別的事情（譬如卸載監聽器），那么你必須自己保存這個引用。”

不是很懂這個意思。直接看代碼吧。

//錯誤做法 class PauseMenu extends React.Component{componentWillMount(){AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));}componentWillUnmount(){AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));}onAppPaused(event){} }//正確做法 class PauseMenu extends React.Component{constructor(props){super(props);this._onAppPaused = this.onAppPaused.bind(this);}componentWillMount(){AppStateIOS.addEventListener('change', this._onAppPaused);}componentWillUnmount(){AppStateIOS.removeEventListener('change', this._onAppPaused);}onAppPaused(event){} }//簡化的正確做法 class PauseMenu extends React.Component{componentWillMount(){AppStateIOS.addEventListener('change', this.onAppPaused);}componentWillUnmount(){AppStateIOS.removeEventListener('change', this.onAppPaused);}onAppPaused = (event) => {//把函數直接作為一個arrow function的屬性來定義，初始化的時候就綁定好了this指針} }//需要注意的是：不論是bind還是箭頭函數，每次被執行都返回的是一個新的函數引用， //因此如果你還需要函數的引用去做一些別的事情（譬如卸載監聽器），那么你必須自己保存這個引用。

1.3默認參數

const test = (a='a',b='b',c='c')=>{return a+b+c }console.log(test('A','B','C')) //ABC console.log(test('A','B')) //ABc console.log(test('A')) //Abc

?

例子中可以看到默認的參數的寫法。并且默認參數的匹配規則是從前往后（原文中沒有講到）。

1.4模板字符串

//不使用模板字符串：var name = 'Your name is ' + first + ' ' + last + '.'//使用模板字符串：var name = `Your name is ${first} ${last}.`

1.5.結構賦值

好吧，長知識了。我之前只知道對象的結構賦值。數組也是可以的。

1.5.1數組的結構賦值

var foo = ["one", "two", "three", "four"];var [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three"//如果你要忽略某些值，你可以按照下面的寫法獲取你想要的值 var [first, , , last] = foo; console.log(first); // "one" console.log(last); // "four"//你也可以這樣寫 var a, b; //先聲明變量[a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2

利用結構賦值交換兩個變量的值。

var a = 1; var b = 3;[a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1

1.5.2對象的結構賦值

const student = {name:'Ming',age:'18',city:'Shanghai' };const {name,age,city} = student; console.log(name); // "Ming" console.log(age); // "18" console.log(city); // "Shanghai"

1.6延展操作符(Spread operator)

展開數組或者對象。

react中應用

const params = {name: 'Jine',age: 21 } <CustomComponent {...params} />var params = {name: '123',title: '456',type: 'aaa' }var { type, ...other } = params;<CustomComponent type='normal' number={2} {...other} /> //等同于 <CustomComponent type='normal' number={2} name='123' title='456' />

1.7Promise

這是我最早接觸的一個高級語法吧。

var test = (a,b)=>{return new Promise((reslove,reject)=>{//異步操作//...reslove(resoult)//返回正確結果//...reject(err) //出錯時的結果}) }//使用test(a,b).then(res=>{//...promise reslove（）返回正確結果后執行到這里 }).catch(err=>{//前面reject（err）后代碼會執行到里 })//或者try{var resoult = await test(a,b)//... }catch(er){//... }

2 ES7新特性（2016）

數組includes()方法，用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回true，否則返回false。
a ** b指數運算符，它與 Math.pow(a, b)相同。

2.1?includes()

includes()?函數用來判斷一個數組是否包含一個指定的值，如果包含則返回?true，否則返回false。

let arr = ['react', 'angular', 'vue'];if (arr.includes('react')) {console.log('react存在'); }

2.1指數運算符**

在ES7中引入了指數運算符**，**具有與Math.pow(..)等效的計算結果

console.log(2**10);// 輸出1024

3 ES8新特性（2017）

async/await
Object.values()
Object.entries()
String padding: padStart()和padEnd()，填充字符串達到當前長度
函數參數列表結尾允許逗號
Object.getOwnPropertyDescriptors()
ShareArrayBuffer和Atomics對象，用于從共享內存位置讀取和寫入

3.1 async/await

async function process(array) {for await (let i of array) {doSomething(i);} }

?

3.2?Object.values()

const obj = {a: 1, b: 2, c: 3};const values=Object.values(obj); console.log(values);//[1, 2, 3]

?

3.3 Object.entries()

Object.entries()函數返回一個給定對象自身可枚舉屬性的鍵值對的數組。

這個真的很有用。之前為了遍歷key和value搞得很煩。

for(let [key,value] of Object.entries(obj1)){console.log(`key: ${key} value:${value}`) } //key:a value:1 //key:b value:2 //key:c value:3

3.4 String padding

String.padStart(targetLength,[padString])

String.padEnd(targetLength,padString])

targetLength:當前字符串需要填充到的目標長度。如果這個數值小于當前字符串的長度，則返回當前字符串本身。
padString:(可選)填充字符串。如果字符串太長，使填充后的字符串長度超過了目標長度，則只保留最左側的部分，其他部分會被截斷，此參數的缺省值為 " "。

console.log('0.0'.padStart(4,'*')) console.log('0.0'.padStart(20)) console.log('0.0'.padEnd(4,'*')) console.log('0.0'.padEnd(10,'*'))/* *0.00.0 0.0* 0.0******* */

3.5?Object.getOwnPropertyDescriptors()

不知道有什么用，才疏學淺，可能還沒遇到這種用法。

const obj2 = {name: 'Jine',get age() { return '18' } }; Object.getOwnPropertyDescriptors(obj2) // { // age: { // configurable: true, // enumerable: true, // get: function age(){}, //the getter function // set: undefined // }, // name: { // configurable: true, // enumerable: true, // value:"Jine", // writable:true // } // }

3.6?SharedArrayBuffer對象

不知道是啥。于是又惡補了一番。

有了 SharedArrayBuffer 后，多個 web worker 就可以同時讀寫同一塊內存了你再也不需要 postMessage 伴有時延的通信了，多個 web worker 對數據訪問都沒有時延了

SharedArrayBuffer 對象用來表示一個通用的，固定長度的原始二進制數據緩沖區，類似于 ArrayBuffer 對象，它們都可以用來在共享內存（shared memory）上創建視圖。與 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分離。

/*** * @param {*} length 所創建的數組緩沖區的大小，以字節(byte)為單位。 * @returns {SharedArrayBuffer} 一個大小指定的新 SharedArrayBuffer 對象。其內容被初始化為 0。*/ new SharedArrayBuffer(length)

初步理解為一種共享內存機制。讀取的時候需要建立視圖。記住在worker之間共享內存就行，以后用到了在研究吧。

3.7?Atomics對象

Atomics 對象提供了一組靜態方法用來對 SharedArrayBuffer 對象進行原子操作。

這些原子操作屬于 Atomics 模塊。與一般的全局對象不同，Atomics 不是構造函數，因此不能使用 new 操作符調用，也不能將其當作函數直接調用。Atomics 的所有屬性和方法都是靜態的（與 Math 對象一樣）。

多個共享內存的線程能夠同時讀寫同一位置上的數據。原子操作會確保正在讀或寫的數據的值是符合預期的，即下一個原子操作一定會在上一個原子操作結束后才會開始，其操作過程不會中斷。

Atomics.add() //將指定位置上的數組元素與給定的值相加，并返回相加前該元素的值。Atomics.and() //將指定位置上的數組元素與給定的值相與，并返回與操作前該元素的值。Atomics.compareExchange() //如果數組中指定的元素與給定的值相等，則將其更新為新的值，并返回該元素原先的值。Atomics.exchange() //將數組中指定的元素更新為給定的值，并返回該元素更新前的值。Atomics.load() //返回數組中指定元素的值。Atomics.or() //將指定位置上的數組元素與給定的值相或，并返回或操作前該元素的值。Atomics.store() //將數組中指定的元素設置為給定的值，并返回該值。Atomics.sub() //將指定位置上的數組元素與給定的值相減，并返回相減前該元素的值。Atomics.xor() //將指定位置上的數組元素與給定的值相異或，并返回異或操作前該元素的值。//wait() 和 wake() 方法采用的是 Linux 上的 futexes 模型（fast user-space mutex， //快速用戶空間互斥量），可以讓進程一直等待直到某個特定的條件為真，主要用于實現阻塞。Atomics.wait() //檢測數組中某個指定位置上的值是否仍然是給定值，是則保持掛起直到被喚醒或超時。 //返回值為 "ok"、"not-equal" 或 "time-out"。調用時，如果當前線程不允許阻塞，則會拋出異常 //（大多數瀏覽器都不允許在主線程中調用 wait()）。Atomics.wake() //喚醒等待隊列中正在數組指定位置的元素上等待的線程。返回值為成功喚醒的線程數量。Atomics.isLockFree(size) //可以用來檢測當前系統是否支持硬件級的原子操作。對于指定大小的數組，如果當前系統支持硬件級的原子操作， //則返回 true；否則就意味著對于該數組，Atomics 對象中的各原子操作都只能用鎖來實現。此函數面向的是技術專家。

4 ES9新特性（2018）

異步迭代
Promise.finally()
Rest/Spread 屬性
正則表達式命名捕獲組（Regular Expression Named Capture Groups）
正則表達式反向斷言（lookbehind）
正則表達式dotAll模式
正則表達式 Unicode 轉義
非轉義序列的模板字符串

4.1?異步迭代

ES2018引入異步迭代器（asynchronous iterators），這就像常規迭代器，除了next()方法返回一個Promise。因此await可以和for...of循環一起使用，以串行的方式運行異步操作。例如：

async function process(array) {for await (let i of array) {doSomething(i);} }

4.2?Promise.finally()

一個Promise調用鏈要么成功到達最后一個.then()，要么失敗觸發.catch()。在某些情況下，你想要在無論Promise運行成功還是失敗，運行相同的代碼，例如清除，刪除對話，關閉數據庫連接等。

function doSomething() {doSomething1().then(doSomething2).then(doSomething3).catch(err => {console.log(err);}).finally(() => {// finish here!}); }

4.3?正則表達式命名捕獲組

constreDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,match = reDate.exec('2018-04-30'),year = match.groups.year, // 2018month = match.groups.month, // 04day = match.groups.day; // 30constreDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,d = '2018-04-30',usDate = d.replace(reDate, '$<month>-$<day>-$<year>');

5 ES10新特性（2019）

行分隔符（U + 2028）和段分隔符（U + 2029）符號現在允許在字符串文字中，與JSON匹配
更加友好的 JSON.stringify
新增了Array的flat()方法和flatMap()方法
新增了String的trimStart()方法和trimEnd()方法
Object.fromEntries()
Symbol.prototype.description
String.prototype.matchAll
Function.prototype.toString()現在返回精確字符，包括空格和注釋
簡化try {} catch {},修改 catch 綁定
新的基本數據類型BigInt
globalThis
import()
Legacy RegEx
私有的實例方法和訪問器

5.1?新增了Array的flat()方法和flatMap()方法

flat()?方法會按照一個可指定的深度遞歸遍歷數組，并將所有元素與遍歷到的子數組中的元素合并為一個新數組返回。

flat()方法最基本的作用就是數組降維
其次，還可以利用flat()方法的特性來去除數組的空項

var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4]var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]]var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6]//使用 Infinity 作為深度，展開任意深度的嵌套數組 arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]//去除空項 var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]

試了一下我的 node 10.15.3似乎還不支持這個語法。

---------------------
作者：loockluo
來源：CSDN
原文：https://blog.csdn.net/qq_34586870/article/details/89515336
版權聲明：本文為作者原創文章，轉載請附上博文鏈接！
內容解析By：CSDN,CNBLOG博客文章一鍵轉載插件

總結

以上是生活随笔為你收集整理的[转]ES6、ES7、ES8、ES9、ES10新特性一览 (个人整理，学习笔记)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： CSS伪元素 after 实现鼠标悬浮信
下一篇： Jupyter Notebook 入门指