建站
咨詢
售后
建站咨詢
新聞中心
【稿件】
為高邑等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及高邑網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、高邑網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
前言
從 ECMAScript 2016（ES7）開始，版本發(fā)布變得更加頻繁，每年發(fā)布一個新版本，好在每次版本的更新內(nèi)容并不多，本文會細(xì)說這些新特性，盡可能和舊知識相關(guān)聯(lián)，幫你迅速上手這些特性。
ES7新特性
1.Array.prototype.includes()方法
在 ES6 中我們有 String.prototype.includes() 可以查詢給定字符串是否包含一個字符，而在 ES7 中，我們在數(shù)組中也可以用 Array.prototype.includes 方法來判斷一個數(shù)組是否包含一個指定的值，根據(jù)情況，如果包含則返回true，否則返回false。
- const arr = [1, 3, 5, 2, '8', NaN, -0]
- arr.includes(1) // true
- arr.includes(1, 2) // false 該方法的第二個參數(shù)表示搜索的起始位置，默認(rèn)為0
- arr.includes('1') // false
- arr.includes(NaN) // true
- arr.includes(+0) // true
在ES7之前想判斷數(shù)組中是否包含一個元素，有如下兩種方法,但都不如includes來得直觀：
-
indexOf()
indexOf()方法返回在數(shù)組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。
- if (arr.indexOf(el) !== -1) {
- // ...
- }
不過這種方法有兩個缺點(diǎn)，一是不夠語義化，要先找到參數(shù)值的第一個出現(xiàn)位置，所以要去比較是否不等于-1，表達(dá)起來不夠直觀。二是，它內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）進(jìn)行判斷，這會導(dǎo)致對NaN的誤判。
- [NaN].indexOf(NaN)// -1
-
find() 和 findIndex()
數(shù)組實(shí)例的find方法，用于找出第一個符合條件的數(shù)組成員。另外，這兩個方法都可以發(fā)現(xiàn)NaN，彌補(bǔ)了數(shù)組的indexOf方法的不足。
- [1, 4, -5, 10].find((n) => n < 0) // -5
- [1, 5, 10, 15].findIndex(function(value) {
- return value > 9;
- }) // 2
- [NaN].findIndex(y => Object.is(NaN, y)) // 0
Array.prototype.includes()的支持情況：
2.求冪運(yùn)算符**
在ES7中引入了指數(shù)運(yùn)算符，具有與Math.pow()等效的計算結(jié)果
- console.log(2**10);// 輸出1024zhicc
- console.log(Math.pow(2, 10)) // 輸出1024
求冪運(yùn)算符的支持情況：
ES8新特性
1.Async/Await
我們都知道使用Promise能很好地解決回調(diào)地獄的問題，但如果處理流程比較復(fù)雜的話，那么整段代碼將充斥著then，語義化不明顯，代碼不能很好地表示執(zhí)行流程，那有沒有比Promise更優(yōu)雅的異步方式呢？
假如有這樣一個使用場景：需要先請求a鏈接，等返回信息之后，再請求b鏈接的另外一個資源。下面代碼展示的是使用fetch來實(shí)現(xiàn)這樣的需求，fetch被定義在window對象中，它返回的是一個Promise對象
- fetch('https://blog.csdn.net/')
- .then(response => {
- console.log(response)
- return fetch('https://juejin.im/')
- })
- .then(response => {
- console.log(response)
- })
- .catch(error => {
- console.log(error)
- })
雖然上述代碼可以實(shí)現(xiàn)這個需求，但語義化不明顯，代碼不能很好地表示執(zhí)行流程?；谶@個原因，ES8引入了async/await，這是JavaScript異步編程的一個重大改進(jìn)，提供了在不阻塞主線程的情況下使用同步代碼實(shí)現(xiàn)異步訪問資源的能力，并且使得代碼邏輯更加清晰。
- async function foo () {
- try {
- let response1 = await fetch('https://blog.csdn.net/')
- console.log(response1)
- let response2 = await fetch('https://juejin.im/')
- console.log(response2)
- } catch (err) {
- console.error(err)
- }
- }
- foo()
通過上面代碼，你會發(fā)現(xiàn)整個異步處理的邏輯都是使用同步代碼的方式來實(shí)現(xiàn)的，而且還支持try catch來捕獲異常，這感覺就在寫同步代碼，所以是非常符合人的線性思維的。需要強(qiáng)調(diào)的是，await 不可以脫離 async 單獨(dú)使用，await 后面一定是Promise 對象，如果不是會自動包裝成Promise對象。
根據(jù)MDN定義，async是一個通過異步執(zhí)行并隱式返回Promise作為結(jié)果的函數(shù)。
- async function foo () {
- return '浪里行舟'
- }
- foo().then(val => {
- console.log(val) // 浪里行舟
- })
上述代碼，我們可以看到調(diào)用async 聲明的foo 函數(shù)返回了一個Promise對象，等價于下面代碼：
- async function foo () {
- return Promise.resolve('浪里行舟')
- }
- foo().then(val => {
- console.log(val) // 浪里行舟
- })
Async/Await的支持情況：
2.Object.values()，Object.entries()
ES5 引入了Object.keys方法，返回一個數(shù)組，成員是參數(shù)對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵名。ES8引入了跟Object.keys配套的Object.values和Object.entries，作為遍歷一個對象的補(bǔ)充手段，供for...of循環(huán)使用。
Object.values方法返回一個數(shù)組，成員是參數(shù)對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值。
- const obj = { foo: 'bar', baz: 42 };
- Object.values(obj) // ["bar", 42]
- const obj = { 100: 'a', 2: 'b', 7: 'c' };
- Object.values(obj) // ["b", "c", "a"]
需要注意的是，如果屬性名為數(shù)值的屬性，是按照數(shù)值大小，從小到大遍歷的，因此返回的順序是b、c、a。
Object.entries()方法返回一個數(shù)組，成員是參數(shù)對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對數(shù)組。這個特性我們后面介紹ES10的Object.fromEntries()還會再提到。
- const obj = { foo: 'bar', baz: 42 };
- Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]
- const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
- Object.entries(obj); //[['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
Object.values()與Object.entries()兼容性一致，下面以O(shè)bject.values()為例：
3.String padding
在ES8中String 新增了兩個實(shí)例函數(shù) String.prototype.padStart 和 String.prototype.padEnd，允許將空字符串或其他字符串添加到原始字符串的開頭或結(jié)尾。我們先看下使用語法：
- String.padStart(targetLength,[padString])
-
targetLength(必填):當(dāng)前字符串需要填充到的目標(biāo)長度。如果這個數(shù)值小于當(dāng)前字符串的長度，則返回當(dāng)前字符串本身。
-
padString(可選):填充字符串。如果字符串太長，使填充后的字符串長度超過了目標(biāo)長度，則只保留最左側(cè)的部分，其他部分會被截斷，此參數(shù)的缺省值為 " "。
- 'x'.padStart(4, 'ab') // 'abax'
- 'x'.padEnd(5, 'ab') // 'xabab'
有時候我們處理日期、金額的時候經(jīng)常要格式化，這個特性就派上用場：
- '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
- '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
String padding的支持情況：
4.Object.getOwnPropertyDescriptors()
ES5 的Object.getOwnPropertyDescriptor()方法會返回某個對象屬性的描述對象（descriptor）。ES8 引入了Object.getOwnPropertyDescriptors()方法，返回指定對象所有自身屬性（非繼承屬性）的描述對象。
- const obj = {
- name: '浪里行舟',
- get bar () {
- return 'abc'
- }
- }
- console.log(Object.getOwnPropertyDescriptors(obj))
得到如下結(jié)果：
該方法的引入目的，主要是為了解決Object.assign()無法正確拷貝get屬性和set屬性的問題。我們來看個例子：
- const source = {
- set foo (value) {
- console.log(value)
- },
- get bar () {
- return '浪里行舟'
- }
- }
- const target1 = {}
- Object.assign(target1, source)
- console.log(Object.getOwnPropertyDescriptor(target1, 'foo'))
返回如下結(jié)果：
上面代碼中，source對象的foo屬性的值是一個賦值函數(shù)，Object.assign方法將這個屬性拷貝給target1對象，結(jié)果該屬性的值變成了undefined。這是因為Object.assign方法總是拷貝一個屬性的值，而不會拷貝它背后的賦值方法或取值方法。
這時，Object.getOwnPropertyDescriptors()方法配合Object.defineProperties()方法，就可以實(shí)現(xiàn)正確拷貝。
- const source = {
- set foo (value) {
- console.log(value)
- },
- get bar () {
- return '浪里行舟'
- }
- }
- const target2 = {}
- Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source))
- console.log(Object.getOwnPropertyDescriptor(target2, 'foo'))
返回如下結(jié)果：
Object.getOwnPropertyDescriptors()的支持情況：
ES9新特性
1.for await of
for of方法能夠遍歷具有Symbol.iterator接口的同步迭代器數(shù)據(jù)，但是不能遍歷異步迭代器。 ES9新增的for await of可以用來遍歷具有Symbol.asyncIterator方法的數(shù)據(jù)結(jié)構(gòu)，也就是異步迭代器，且會等待前一個成員的狀態(tài)改變后才會遍歷到下一個成員，相當(dāng)于async函數(shù)內(nèi)部的await。現(xiàn)在我們有三個異步任務(wù)，想要實(shí)現(xiàn)依次輸出結(jié)果，該如何實(shí)現(xiàn)呢？
- // for of遍歷
- function Gen (time) {
- return new Promise(function (resolve, reject) {
- setTimeout(function () {
- resolve(time)
- }, time)
- })
- }
- async function test () {
- let arr = [Gen(2000), Gen(100), Gen(3000)]
- for (let item of arr) {
- console.log(Date.now(), item.then(console.log))
- }
- }
- test()
得到如下結(jié)果：
上述代碼證實(shí)了for of方法不能遍歷異步迭代器，得到的結(jié)果并不是我們所期待的，于是for await of就粉墨登場啦！
- function Gen (time) {
- return new Promise(function (resolve, reject) {
- setTimeout(function () {
- resolve(time)
- }, time)
- })
- }
- async function test () {
- let arr = [Gen(2000), Gen(100), Gen(3000)]
- for await (let item of arr) {
- console.log(Date.now(), item)
- }
- }
- test()
- // 1575536194608 2000
- // 1575536194608 100
- // 1575536195608 3000
使用for await of遍歷時，會等待前一個Promise對象的狀態(tài)改變后，再遍歷到下一個成員。
異步迭代器的支持情況：
2.Object Rest Spread
ES6中添加的最有意思的特性之一是spread操作符。你不僅可以用它替換cancat()和slice()方法，使數(shù)組的操作(復(fù)制、合并)更加簡單，還可以在數(shù)組必須以拆解的方式作為函數(shù)參數(shù)的情況下，spread操作符也很實(shí)用。
- const arr1 = [10, 20, 30];
- const copy = [...arr1]; // 復(fù)制
- console.log(copy); // [10, 20, 30]
- const arr2 = [40, 50];
- const merge = [...arr1, ...arr2]; // 合并
- console.log(merge); // [10, 20, 30, 40, 50]
- console.log(Math.max(...arr)); // 30 拆解
ES9通過向?qū)ο笪谋咎砑訑U(kuò)展屬性進(jìn)一步擴(kuò)展了這種語法。他可以將一個對象的屬性拷貝到另一個對象上，參考以下情形:
- const input = {
- a: 1,
- b: 2,
- c: 1
- }
- const output = {
- ...input,
- c: 3
- }
- console.log(output) // {a: 1, b: 2, c: 3}
上面代碼可以把 input 對象的數(shù)據(jù)都添加到 output 對象中，需要注意的是，如果存在相同的屬性名，只有最后一個會生效。
- const input = {
- a: 1,
- b: 2
- }
- const output = {
- ...input,
- c: 3
- }
- input.a='浪里行舟'
- console.log(input,output) // {a: "浪里行舟", b: 2} {a: 1, b: 2, c: 3}
上面例子中，修改input對象中的值，output并沒有改變，說明擴(kuò)展運(yùn)算符拷貝一個對象（類似這樣obj2 = {...obj1}），實(shí)現(xiàn)只是一個對象的淺拷貝。值得注意的是，如果屬性的值是一個對象的話，該對象的引用會被拷貝：
- const obj = {x: {y: 10}};
- const copy1 = {...obj};
- const copy2 = {...obj};
- obj.x.y='浪里行舟'
- console.log(copy1,copy2) // x: {y: "浪里行舟"} x: {y: "浪里行舟"}
- console.log(copy1.x === copy2.x); // → true
copy1.x 和 copy2.x 指向同一個對象的引用，所以他們嚴(yán)格相等。
我們再來看下 Object rest 的示例：
- const input = {
- a: 1,
- b: 2,
- c: 3
- }
- let { a, ...rest } = input
- console.log(a, rest) // 1 {b: 2, c: 3}
當(dāng)對象 key-value 不確定的時候，把必選的 key 賦值給變量，用一個變量收斂其他可選的 key 數(shù)據(jù)，這在之前是做不到的。注意，rest屬性必須始終出現(xiàn)在對象的末尾，否則將拋出錯誤。
Rest與Spread兼容性一致，下列以spread為例：
3.Promise.prototype.finally()
Promise.prototype.finally() 方法返回一個Promise，在promise執(zhí)行結(jié)束時，無論結(jié)果是fulfilled或者是rejected，在執(zhí)行then()和catch()后，都會執(zhí)行finally指定的回調(diào)函數(shù)。
- fetch('https://www.google.com')
- .then((response) => {
- console.log(response.status);
- })
- .catch((error) => {
- console.log(error);
- })
- .finally(() => {
- document.querySelector('#spinner').style.display = 'none';
- });
無論操作是否成功，當(dāng)您需要在操作完成后進(jìn)行一些清理時，finally()方法就派上用場了。這為指定執(zhí)行完promise后，無論結(jié)果是fulfilled還是rejected都需要執(zhí)行的代碼提供了一種方式，避免同樣的語句需要在then()和catch()中各寫一次的情況。
Promise.prototype.finally()的支持情況：
4.新的正則表達(dá)式特性
ES9為正則表達(dá)式添加了四個新特性，進(jìn)一步提高了JavaScript的字符串處理能力。這些特點(diǎn)如下:
-
s (dotAll) 標(biāo)志
-
命名捕獲組
-
Lookbehind 后行斷言
-
Unicode屬性轉(zhuǎn)義
（1）s(dotAll)flag
正則表達(dá)式中，點(diǎn)（.）是一個特殊字符，代表任意的單個字符，但是有兩個例外。一個是四個字節(jié)的 UTF-16 字符，這個可以用u修飾符解決；另一個是行終止符,如換行符(\n)或回車符(\r),這個可以通過ES9的s(dotAll)flag，在原正則表達(dá)式基礎(chǔ)上添加s表示:
- console.log(/foo.bar/.test('foo\nbar')) // false
- console.log(/foo.bar/s.test('foo\nbar')) // true
那如何判斷當(dāng)前正則是否使用了 dotAll 模式呢？
- const re = /foo.bar/s // Or, `const re = new RegExp('foo.bar', 's');`.
- console.log(re.test('foo\nbar')) // true
- console.log(re.dotAll) // true
- console.log(re.flags) // 's'
（2）命名捕獲組
在一些正則表達(dá)式模式中，使用數(shù)字進(jìn)行匹配可能會令人混淆。例如，使用正則表達(dá)式/(\d{4})-(\d{2})-(\d{2})/來匹配日期。因為美式英語中的日期表示法和英式英語中的日期表示法不同，所以很難區(qū)分哪一組表示日期，哪一組表示月份:
- const re = /(\d{4})-(\d{2})-(\d{2})/;
- const match= re.exec('2019-01-01');
- console.log(match[0]); // → 2019-01-01
- console.log(match[1]); // → 2019
- console.log(match[2]); // → 01
- console.log(match[3]); // → 01
ES9引入了命名捕獲組，允許為每一個組匹配指定一個名字，既便于閱讀代碼，又便于引用。
- const re = /(?
\d{4})-(? \d{2})-(? \d{2})/; - const match = re.exec('2019-01-01');
- console.log(match.groups); // → {year: "2019", month: "01", day: "01"}
- console.log(match.groups.year); // → 2019
- console.log(match.groups.month); // → 01
- console.log(match.groups.day); // → 01
上面代碼中，“命名捕獲組”在圓括號內(nèi)部，模式的頭部添加“問號 + 尖括號 + 組名”（?
命名捕獲組也可以使用在replace()方法中，例如將日期轉(zhuǎn)換為美國的 MM-DD-YYYY 格式：
- const re = /(?
\d{4})-(? \d{2})-(? \d{2})/ - const usDate = '2018-04-30'.replace(re, '$
-$ -$ ') - console.log(usDate) // 04-30-2018
（3）Lookbehind 后行斷言
JavaScript 語言的正則表達(dá)式，只支持先行斷言，不支持后行斷言，先行斷言我們可以簡單理解為"先遇到一個條件，再判斷后面是否滿足"，如下面例子：
- let test = 'hello world'
- console.log(test.match(/hello(?=\sworld)/))
- // ["hello", index: 0, input: "hello world", groups: undefined]
但有時我們想判斷前面是 world 的 hello，這個代碼是實(shí)現(xiàn)不了的。在 ES9 就支持這個后行斷言了：
- let test = 'world hello'
- console.log(test.match(/(?<=world\s)hello/))
- // ["hello", index: 6, input: "world hello", groups: undefined]
(?<…)是后行斷言的符號，(?..)是先行斷言的符號，然后結(jié)合 =(等于)、!(不等)、\1(捕獲匹配)。
（4）Unicode屬性轉(zhuǎn)義
ES2018 引入了一種新的類的寫法\p{...}和\P{...}，允許正則表達(dá)式匹配符合 Unicode 某種屬性的所有字符。比如你可以使用\p{Number}來匹配所有的Unicode數(shù)字，例如，假設(shè)你想匹配的Unicode字符?字符串:
- const str = '?';
- console.log(/\d/u.test(str)); // → false
- console.log(/\p{Number}/u.test(str)); // → true
同樣的，你可以使用\p{Alphabetic}來匹配所有的Unicode單詞字符:
- const str = '?';
- console.log(/\p{Alphabetic}/u.test(str)); // → true
- // the \w shorthand cannot match ?
- console.log(/\w/u.test(str)); // → false
同樣有一個負(fù)向的Unicode屬性轉(zhuǎn)義模板 \P{...}
- console.log(/\P{Number}/u.test('?')); // → false
- console.log(/\P{Number}/u.test('?')); // → true
- console.log(/\P{Alphabetic}/u.test('?')); // → true
- console.log(/\P{Alphabetic}/u.test('?')); // → false
除了字母和數(shù)字之外，Unicode屬性轉(zhuǎn)義中還可以使用其他一些屬性。
以上這幾個特性的支持情況
ES10新特性
1.Array.prototype.flat()
多維數(shù)組是一種常見的數(shù)據(jù)格式，特別是在進(jìn)行數(shù)據(jù)檢索的時候。將多維數(shù)組打平是個常見的需求。通常我們能夠?qū)崿F(xiàn)，但是不夠優(yōu)雅。
flat() 方法會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。
- newArray = arr.flat(depth) // depth是指定要提取嵌套數(shù)組的結(jié)構(gòu)深度，默認(rèn)值為 1
接下來我們看兩個例子：
- const numbers1 = [1, 2, [3, 4, [5, 6]]]
- console.log(numbers1.flat())// [1, 2, 3, 4, [5, 6]]
- const numbers2 = [1, 2, [3, 4, [5, 6]]]
- console.log(numbers2.flat(2))// [1, 2, 3, 4, 5, 6]
上面兩個例子說明flat 的參數(shù)沒有設(shè)置，取默認(rèn)值 1，也就是說只扁平化第一級；當(dāng) flat 的參數(shù)大于等于 2，返回值就是 [1, 2, 3, 4, 5, 6] 了。
Array.prototype.flat的支持情況：
2.Array.prototype.flatMap()
有了flat方法，那自然而然就有Array.prototype.flatMap方法，flatMap() 方法首先使用映射函數(shù)映射每個元素，然后將結(jié)果壓縮成一個新數(shù)組。從方法的名字上也可以看出來它包含兩部分功能：一個是 map，一個是 flat（深度為1）。
- let arr = [1, 2, 3]
- console.log(arr.map(item => [item * 2]).flat()) // [2, 4, 6]
- console.log(arr.flatMap(item => [item * 2])) // [2, 4, 6]
實(shí)際上flatMap是綜合了map和flat的操作，所以它也只能打平一層。
Array.prototype.flatmap的支持情況：
3.Object.fromEntries()
Object.fromEntries 這個新的API實(shí)現(xiàn)了與 Object.entries 相反的操作。這使得根據(jù)對象的 entries 很容易得到 object。
- const object = { x: 23, y:24 };
- const entries = Object.entries(object); //[['x', 23], ['y', 24]]
- const result = Object.fromEntries(entries); // { x: 23, y: 24 }
ES2017引入了Object.entries, 這個方法可以將對象轉(zhuǎn)換為數(shù)組,這樣對象就可以使用數(shù)組原型中的眾多內(nèi)置方法，比如map、 filter、reduce，舉個例子，我們想提取下列對象obj中所有value大于21的鍵值對，如何操作呢？
- // ES10之前
- const obj = {
- a: 21,
- b: 22,
- c: 23
- }
- console.log(Object.entries(obj)) //[['a',21],["b", 22],["c", 23]]
- let arr = Object.entries(obj).filter(([a, b]) => b > 21) //[["b", 22],["c", 23]]
- let obj1 = {}
- for (let [name, age] of arr) {
- obj1[name] = age
- }
- console.log(obj1) // {b: 22, c: 23}
上例中得到了數(shù)組arr，想再次轉(zhuǎn)化為對象，就需要手動寫一些代碼來處理，但是有了Object.fromEntries()就很容易實(shí)現(xiàn)
- // 用Object.fromEntries()來實(shí)現(xiàn)
- const obj = {
- a: 21,
- b: 22,
- c: 23
- }
- let res = Object.fromEntries(Object.entries(obj).filter(([a, b]) => b > 21))
- console.log(111, res) // {b: 22, c: 23}
Object.fromEntries()的支持情況：
4.String.trimStart 和 String.trimEnd
移除開頭和結(jié)尾的空格，之前我們用正則表達(dá)式來實(shí)現(xiàn)，現(xiàn)在ES10新增了兩個新特性，讓這變得更簡單！
trimStart() 方法從字符串的開頭刪除空格，trimLeft()是此方法的別名。
- let str = ' 前端工匠 '
- console.log(str.length) // 6
- str = str.trimStart()
- console.log(str.length) // 5
- let str1 = str.trim() // 清除前后的空格
- console.log(str1.length) // 4
- str.replace(/^\s+/g, '') // 也可以用正則實(shí)現(xiàn)開頭刪除空格
trimEnd() 方法從一個字符串的右端移除空白字符，trimRight 是 trimEnd 的別名。
- let str = ' 浪里行舟 '
- console.log(str.length) // 6
- str = str.trimEnd()
- console.log(str.length) // 5
- let str1 = str.trim() //清除前后的空格
- console.log(str1.length) // 4
- str.replace(/\s+$/g, '') // 也可以用正則實(shí)現(xiàn)右端移除空白字符
String.trimStart和String.trimEnd 兩者兼容性一致，下圖以trimStart為例：
5.String.prototype.matchAll
如果一個正則表達(dá)式在字符串里面有多個匹配，現(xiàn)在一般使用g修飾符或y修飾符，在循環(huán)里面逐一取出。
- function collectGroup1 (regExp, str) {
- const matches = []
- while (true) {
- const match = regExp.exec(str)
- if (match === null) break
- matches.push(match[1])
- }
- return matches
- }
- console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
- // [ 'foo', 'bar', 'baz' ]
值得注意的是，如果沒有修飾符 /g, .exec() 只返回第一個匹配。現(xiàn)在通過ES9的String.prototype.matchAll方法，可以一次性取出所有匹配。
- function collectGroup1 (regExp, str) {
- let results = []
- for (const match of str.matchAll(regExp)) {
- results.push(match[1])
- }
- return results
- }
- console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
- // ["foo", "bar", "baz"]
上面代碼中，由于string.matchAll(regex)返回的是遍歷器，所以可以用for...of循環(huán)取出。
String.prototype.matchAll的支持情況：
6.try…catch
在ES10中，try-catch語句中的參數(shù)變?yōu)榱艘粋€可選項。以前我們寫catch語句時，必須傳遞一個異常參數(shù)。這就意味著，即便我們在catch里面根本不需要用到這個異常參數(shù)也必須將其傳遞進(jìn)去
- // ES10之前
- try {
- // tryCode
- } catch (err) {
- // catchCode
- }
這里 err 是必須的參數(shù)，在 ES10 可以省略這個參數(shù)：
- // ES10
- try {
- console.log('Foobar')
- } catch {
- console.error('Bar')
- }
try…catch的支持情況：
7.BigInt
JavaScript 所有數(shù)字都保存成 64 位浮點(diǎn)數(shù)，這給數(shù)值的表示帶來了兩大限制。一是數(shù)值的精度只能到 53 個二進(jìn)制位（相當(dāng)于 16 個十進(jìn)制位），大于這個范圍的整數(shù)，JavaScript 是無法精確表示的，這使得 JavaScript 不適合進(jìn)行科學(xué)和金融方面的精確計算。二是大于或等于2的1024次方的數(shù)值，JavaScript 無法表示，會返回Infinity。
- // 超過 53 個二進(jìn)制位的數(shù)值，無法保持精度
- Math.pow(2, 53) === Math.pow(2, 53) + 1 // true
- // 超過 2 的 1024 次方的數(shù)值，無法表示
- Math.pow(2, 1024) // Infinity
現(xiàn)在ES10引入了一種新的數(shù)據(jù)類型 BigInt（大整數(shù)），來解決這個問題。BigInt 只用來表示整數(shù)，沒有位數(shù)的限制，任何位數(shù)的整數(shù)都可以精確表示。
創(chuàng)建 BigInt 類型的值也非常簡單，只需要在數(shù)字后面加上 n 即可。例如，123 變?yōu)?123n。也可以使用全局方法 BigInt(value) 轉(zhuǎn)化，入?yún)?value 為數(shù)字或數(shù)字字符串。
- const aNumber = 111;
- const aBigInt = BigInt(aNumber);
- aBigInt === 111n // true
- typeof aBigInt === 'bigint' // true
- typeof 111 // "number"
- typeof 111n // "bigint"
如果算上 BigInt，JavaScript 中原始類型就從 6 個變?yōu)榱?7 個。
-
Boolean
-
Null
-
Undefined
-
Number
-
String
-
Symbol (new in ECMAScript 2015)
-
BigInt (new in ECMAScript 2019)
BigInt的支持情況：
8.Symbol.prototype.description
我們知道，Symbol 的描述只被存儲在內(nèi)部的 [[Description]]，沒有直接對外暴露，我們只有調(diào)用 Symbol 的 toString() 時才可以讀取這個屬性：
- Symbol('desc').description; // "desc"
- Symbol('').description; // ""
- Symbol().description; // undefined
Symbol.prototype.description的支持情況：
9.Function.prototype.toString()
ES2019中，F(xiàn)unction.toString()發(fā)生了變化。之前執(zhí)行這個方法時，得到的字符串是去空白符號的。而現(xiàn)在，得到的字符串呈現(xiàn)出原本源碼的樣子：
- function sum(a, b) {
- return a + b;
- }
- console.log(sum.toString());
- // function sum(a, b) {
- // return a + b;
- // }
Function.prototype.toString()的支持情況：
參考資料
-
再學(xué)JavaScript ES（6-10）全版本語法大全
-
ECMAScript 6 入門
-
MDN文檔
-
ES2019新特性你知道哪些？
-
ES2018新特性——每個JS開發(fā)者都需要了解
-
細(xì)解JavaScript ES7 ES8 ES9 新特性
作者簡介：
浪里行舟：碩士研究生，專注于前端。個人公眾號：「前端工匠」，致力于打造適合初中級工程師能夠快速吸收的一系列優(yōu)質(zhì)文章！
【原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請注明原文作者和出處為.com】
當(dāng)前題目：盤點(diǎn)ES7、ES8、ES9、ES10的新特性
網(wǎng)站鏈接：http://www.fisionsoft.com.cn/article/cocjidg.html
