ES9中五個(gè)最具變革性的JavaScript特性
過去10年里，JavaScript取得了長(zhǎng)足進(jìn)步，每年都有全新的功能升級(jí)。
今天，我們來看看早期ES9中引入的5個(gè)最重要的特性，看看你是否錯(cuò)過了其中一些。
1. 異步生成器和迭代
異步生成器是ES9中一個(gè)強(qiáng)大的特性。
就像普通的生成器，但現(xiàn)在它可以在異步工作（如網(wǎng)絡(luò)請(qǐng)求）后彈出值：
function* asyncGenerator() {
yield new Promise((resolve) =>
setTimeout(() => resolve('done this ?'), 2000)
);
yield new Promise((resolve) =>
setTimeout(() => resolve('done that ?'), 3000)
);
}當(dāng)我們調(diào)用.next()時(shí)，我們會(huì)得到一個(gè)Promise：
const asyncGen = asyncGenerator();
asyncGen.next().value.then(console.log);
asyncGen.next().value.then(console.log);這是一個(gè)強(qiáng)大的工具，可以在web應(yīng)用中以結(jié)構(gòu)化+可讀的方式流式傳輸數(shù)據(jù) — 看看這個(gè)為類似YouTube的視頻分享應(yīng)用緩沖和流式傳輸數(shù)據(jù)的函數(shù)：
async function* streamVideo({ id }) {
let endOfVideo = false;
const downloadChunk = async (sizeInBytes) => {
const response = await fetch(
`api.example.com/videos/${id}`
);
const { chunk, done } = await response.json();
if (done) endOfVideo = true;
return chunk;
};
while (!endOfVideo) {
const bufferSize = 500 * 1024 * 1024;
yield await downloadChunk(bufferSize);
}
}現(xiàn)在要消費(fèi)這個(gè)生成器，我們將使用for await of — 異步迭代：
for await (const chunk of streamVideo({ id: 2341 })) {
// process video chunk
}我想知道實(shí)際的YouTube JavaScript代碼是否使用了這樣的生成器？
2.對(duì)象的剩余/展開運(yùn)算符
毫無疑問，你在某處遇到過現(xiàn)代的展開語法。
這是一種快速且不可變地克隆數(shù)組的天才方法：
const colors = ['??', '??', '??'];
console.log([...colors, '??']);
// ['??', '??', '??', '??']在ES6之前我們從未有過它，現(xiàn)在它無處不在。
Redux就是一個(gè)重要的例子：
export default function userState(state = initialUserState, action) {
console.log(arr);
switch (action.type) {
case ADD_ITEM:
return {
...state,
arr: [...state.arr, action.newItem]
};
default:
return state;
}
}從ES9開始，它也適用于對(duì)象：
const info = {
name: 'Coding Beauty',
site: 'codingbeautydev.com',
};
console.log({ ...info, theme: '??' });
/* Output:
{
name: 'Coding Beauty',
site: 'codingbeautydev.com',
theme: '??'
}
*/覆蓋屬性：
const langs = {
j: 'java',
c: 'c++',
};
console.log({ ...langs, j: 'javascript' });
// Output: { j: 'javascript', c: 'c++' }這使得它特別適合在默認(rèn)值的基礎(chǔ)上構(gòu)建，尤其是在制作公共實(shí)用程序時(shí)。
或者像我用Material UI定制默認(rèn)主題那樣：
使用展開語法，你甚至可以去掉不想在副本中出現(xiàn)的對(duì)象屬性。
const colors = {
yellow: '??',
blue: '??',
red: '??',
};
const { yellow, ...withoutYellow } = colors;
console.log(withoutYellow);
// Output: { blue: '??', red: '??' }這就是如何以不可變的方式從對(duì)象中移除屬性。
3. String.raw
當(dāng)我使用String.raw時(shí)，我是在說：只給我我給你的東西。不要處理任何東西。不要?jiǎng)幽切┺D(zhuǎn)義字符：
不再需要轉(zhuǎn)義反斜杠，我們不用寫：
const filePath = 'C:\\Code\\JavaScript\\tests\\index.js';
console.log(`The file path is ${filePath}`);
// Output: The file path is C:\Code\JavaScript\tests\index.js而是寫：
const filePath = String.raw`C:\Code\JavaScript\tests\index.js`;
console.log(`The file path is ${filePath}`);
// Output: The file path is C:\Code\JavaScript\tests\index.js非常適合編寫帶有大量這些反斜杠的正則表達(dá)式：
像這樣但更糟：
從這個(gè)?：
const patternString = 'The (\\w+) is (\\d+)';
const pattern = new RegExp(patternString);
const message = 'The number is 100';
console.log(pattern.exec(message));
// ['The number is 100', 'number', '100']到這個(gè)?：
const patternString = String.raw`The (\w+) is (\d+)`;
const pattern = new RegExp(patternString);
const message = 'The number is 100';
console.log(pattern.exec(message));
// ['The number is 100', 'number', '100']所以"raw"意味著未處理的。
這就是為什么我們有String.raw()但沒有String.cooked()。
4. 復(fù)雜的正則表達(dá)式特性
說到正則表達(dá)式，ES9并沒有讓人失望。
它完全裝載了最先進(jìn)的正則表達(dá)式特性，用于高級(jí)字符串搜索和替換。
向后查找斷言
這是一個(gè)新特性，用于確保只有某個(gè)特定模式出現(xiàn)在你要搜索的內(nèi)容之前：
- 正向后查找：白名單 ?<=pattern
- 負(fù)向后查找：黑名單 ?<!pattern
const str = "It's just $5, and I have €20 and ￡50";
// Only match number sequence if $ comes first
const regexPos = /(?<=\$)\d+/g;
console.log(str.match(regexPos)); // ['5']
const regexNeg = /(?<!\$)\d+/g;
console.log(str.match(regexNeg)); // ['20', '50']命名捕獲組
捕獲組一直是正則表達(dá)式中最寶貴的特性之一，用于以復(fù)雜的方式轉(zhuǎn)換字符串。
const str = 'The cat sat on a map';
// $1 -> [a-z]
// $2 -> a
// $3 -> t
// () indicates group
str.replace(/([a-z])(a)(t)/g, '$1*$3');
// -> The c*t s*t on a map通常，這些組按照它們?cè)谡齽t表達(dá)式中的相對(duì)位置命名：1, 2, 3...
但這使得理解和更改那些愚蠢的長(zhǎng)正則表達(dá)式變得更加困難。
所以ES9通過?<name>來命名捕獲組解決了這個(gè)問題：
const str = 'The cat sat on a map';
// left & right
console.log(str.replace(/(?<left>[a-z])(a)(?<right>t)/g, '$<left>*$<right>'));
// -> The c*t s*t on a map你知道當(dāng)VS Code中出現(xiàn)錯(cuò)誤時(shí)，你可以快速Alt + 點(diǎn)擊跳轉(zhuǎn)到錯(cuò)誤發(fā)生的確切位置嗎？??
VS Code使用捕獲組使文件名可點(diǎn)擊，從而實(shí)現(xiàn)這種快速導(dǎo)航。
我想它大概是這樣的：
// The stupidly long regex
const regex = /(?<path>[a-z]:[a-z].(?:?:\\/|(?:\\/?)))[\w \-]+):(?<line>\d+):(?<char>\d+)/gi;
// ? String.raw!
const filePoint = String.raw`C:\coding-beauty\coding-beauty-javascript\index.js:3:5`;
const extractor = /(?<path>[a-z]:[a-z].(?:?:\\/|(?:\\/?)))[\w \-]+):(?<line>\d+):(?<char>\d+)/i;
const [path, lineStr, charStr] = filePoint
.match(regex)[0]
.match(extractor)
.slice(1, 4);
const line = Number(lineStr);
const char = Number(charStr);
console.log({ path, line, char });
// Replace all filePoint with <button> tag
// <button onclick="navigateWithButtonFilepointInnerText">filePoint</button>5. Promise.finally
最后我們有了Promise.finally ??。
你知道finally總是會(huì)運(yùn)行一些代碼，無論是否有錯(cuò)誤嗎？
function startBodyBuilding() {
if (Math.random() > 0.5) {
throw new Error("I'm tired??");
}
console.log('Off to the gym ???♂???');
}
try {
startBodyBuilding();
} catch {
console.log('Stopped excuse??');
} finally {
console.log("I'm going!??♂?");
}所以Promise.finally就像那樣，但是用于異步任務(wù)：
async function startBodyBuilding() {
await think();
if (Math.random() > 0.5) {
throw new Error("I'm tired??");
}
console.log('Off to the gym ???♂???');
}
startBodyBuilding()
.then(() => {
console.log('Started ?');
})
.catch(() => {
console.log('No excuses');
})
.finally(() => {
console.log("I'm going!??♂?");
});Promise.finally()最大的優(yōu)點(diǎn)是當(dāng)你鏈接許多Promise時(shí)：
它也能很好地與Promise鏈一起工作：
getFruitApiUrl().then((url) => {
return fetch(url)
.then((res) => res.json())
.then((data) => {
fruits.push(data);
})
.catch((err) => {
console.error(err);
})
.finally(() => {
console.log(fruits);
});
});這是由ES9帶來的。
最后的思考
ES9標(biāo)志著JavaScript的一個(gè)重大飛躍，引入了幾個(gè)對(duì)現(xiàn)代開發(fā)至關(guān)重要的特性。使你能夠快速編寫更清晰、更簡(jiǎn)潔、更富表現(xiàn)力的代碼。
