色五月, ES9中5个最具变革性的JavaScript特质

色五月，

往时10年里，JavaScript赢得了长足跳跃，每年齐有全新的功能升级。

今天，咱们来望望早期ES9中引入的5个最鬈曲的特质，望望你是否错过了其中一些。

1. 异步生成器和迭代

异步生成器是ES9中一个纷乱的特质。

就像平淡的生成器，但咫尺它不错在异步职责（如蚁集肯求）后弹出值：

function* asyncGenerator { yield new Promise((resolve) => setTimeout( => resolve('done this ')， 2000) ); yield new Promise((resolve) => setTimeout( => resolve('done that ')， 3000) );}

当咱们调用.next时，咱们会得到一个Promise：

const asyncGen = asyncGenerator;asyncGen.next.value.then(console.log);asyncGen.next.value.then(console.log);

这是一个纷乱的用具，不错在web期骗中以结构化+可读的神气流式传输数据 — 望望这个为同样YouTube的视频共享期骗缓冲和流式传输数据的函数：

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); }}

咫尺要破费这个生成器，咱们将使用for await of — 异步迭代：

for await (const chunk of streamVideo({ id: 2341 })) { // process video chunk}

我想知谈本体的YouTube JavaScript代码是否使用了这么的生成器？

2.对象的剩余/伸开运算符

毫无疑问，你在某处碰到过当代的伸开语法。

这是一种快速且不成变地克隆数组的天才表率：

const colors = [''， ''， ''];console.log([...colors， '']); // [''， ''， ''， '']

在ES6之前咱们从未有过它，咫尺它无处不在。

Redux等于一个鬈曲的例子：

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启动，它也适用于对象：

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++' }

这使得它超越符合在默许值的基础上构建，尤其是在制作人人实用表率时。

或者像我用Material UI定制默许主题那样：

使用伸开语法，你甚而不错去掉不想在副本中出现的对象属性。

const colors = { yellow: ''， blue: ''， red: ''，};const { yellow， ...withoutYellow } = colors;console.log(withoutYellow);// Output: { blue: ''， red: '' }

这等于何如以不成变的神气从对象中移除属性。

3. String.raw

当我使用String.raw时，我是在说：只给我我给你的东西。不要处理任何东西。不要动那些转义字符：

不再需要转义反斜杠，咱们无谓写：

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

相称符合编写带有渊博这些反斜杠的正则抒发式：

像这么但更糟：

从这个 ：

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

到这个 ：

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. 复杂的正则抒发式特质

说到正则抒发式，ES9并莫得让东谈主失望。

它整个装载了开头进的正则抒发式特质，用于高档字符串搜索和替换。

向后查找断言

这是一个新特质，用于确保只好某个特定阵势出咫尺你要搜索的内容之前：

正向后查找：白名单 ?

负向后查找：黑名单 ?

const str = "It's just $5， and I have €20 and £50";// Only match number sequence if $ comes firstconst regexPos = /(?

定名拿获组

拿获组一直是正则抒发式中最认简直特质之一，用于以复杂的神气调遣字符串。

const str = 'The cat sat on a map';// $1 -> [a-z]// $2 -> a// $3 -> t// indicates groupstr.replace(/([a-z])(a)(t)/g， '$1*$3');// -> The c*t s*t on a map

频频，这些组按照它们在正则抒发式中的相对位置定名：1， 2， 3...

但这使得贯穿和革新那些愚蠢的长正则抒发式变得愈加困难。

是以ES9通过?来定名拿获组处治了这个问题：

const str = 'The cat sat on a map';// left & rightconsole.log(str.replace(/(?[a-z])(a)(?t)/g， '$*$'));// -> The c*t s*t on a map

你知谈当VS Code中出现乖谬时，你不错快速Alt + 点击跳转到乖谬发生的真确位置吗？

VS Code使用拿获组使文献名可点击，从而齐备这种快速导航。

幼女白丝

我想它大略是这么的：

// The stupidly long regexconst regex = /(?[a-z]:[a-z].(?:?:\\/|(?:\\/?)))[\w \-]+):(?\d+):(?\d+)/gi;// String.raw!const filePoint = String.raw`C:\coding-beauty\coding-beauty-javascript\index.js:3:5`;const extractor = /(?[a-z]:[a-z].(?:?:\\/|(?:\\/?)))[\w \-]+):(?\d+):(?\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 tag// filePoint

5. Promise.finally

临了咱们有了Promise.finally 。

你知谈finally老是会运行一些代码，无论是否有乖谬吗？

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就像那样，关联词用于异步任务：

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最大的优点是当你鸠合好多Promise时：

它也能很好地与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记号着JavaScript的一个要紧飞跃色五月，，引入了几个对当代建造至关鬈曲的特质。使你能够快速编写更明晰、更粗略、更富默契力的代码。