ES8中五個(gè)最具變革性的JavaScript特性
ES8包含了許多有價(jià)值的特性,徹底改變了我們編寫(xiě)JavaScript的方式。
代碼變得更簡(jiǎn)潔、更易編寫(xiě),并升級(jí)了新功能。
我們來(lái)看看這些特性,看看你是否錯(cuò)過(guò)了哪些。
1.尾隨逗號(hào)
在ES8之前,尾隨逗號(hào)會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤!
? 之前:
const colors = [
'red',
'blue',
'green',
'yellow', // ? 不允許
];
const person = {
name: 'Tari Ibaba',
site: 'codingbeautydev.com' // ? 不行
};但這引發(fā)了一些問(wèn)題，重新排列列表會(huì)帶來(lái)麻煩:
我們還必須總是在最后一項(xiàng)添加逗號(hào)才能添加新項(xiàng) — 這會(huì)使git差異變得混亂:
所以ES8修復(fù)了所有這些:
? 現(xiàn)在:
const colors = [
'red',
'blue',
'green',
'yellow', // ? yes
];
const person = {
name: 'Tari Ibaba',
site: 'codingbeautydev.com', // ? yes
};它們帶來(lái)的好處也使得像Prettier這樣的工具在格式化后默認(rèn)添加它們:
2.async/await
這就是async/await的起源!
不再需要煩人的then()嵌套:
? 之前:
wait().then(() => {
console.log('WHERE ARE YOU?! ??');
});
function wait() {
return new Promise((resolve) =>
setTimeout(resolve, 10 * 1000)
);
}? 現(xiàn)在:
// ?? immediately invoked function expression (IIFE)
(async () => {
await wait();
console.log('WHERE ARE YOU?! ??');
})();
function wait() {
return new Promise((resolve) =>
setTimeout(resolve, 10 * 1000)
);
}區(qū)別很明顯:
? 之前:
function getSuggestion() {
fetch('https://api.example/suggestion', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({}) // Pass the necessary payload here
})
.then((res) => {
return res.json();
})
.then((data) => {
const { suggestion } = data;
console.log(suggestion);
});
}? 現(xiàn)在:
async function getSuggestion() {
const res = await fetch('https://api.example/suggestion');
const { suggestion } = await res.json();
console.log(suggestion);
}10行 → 3行。
使用async/await,我們終于可以為異步代碼使用原生的 try-catch:
? ES8之前:
startWorkout();
function startWorkout() {
goToGym()
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});
}
function goToGym() {
return new Promise((resolve, reject) => {
if (Math.random() > 0.5) {
reject(new Error("I'm tired today!??"));
}
resolve("Let's go!??♂?");
});
}? 現(xiàn)在:
startWorkout();
// ? async/await
async function startWorkout() {
try {
await goToGym();
} catch (err) {
console.log(err);
}
}
function goToGym() {
return new Promise((resolve, reject) => {
if (Math.random() > 0.5) {
reject(new Error("I'm tired today!??"));
}
resolve("Let's go!??♂?");
});
}3.強(qiáng)大的Object靜態(tài)方法
Object.values()
一個(gè)出色的靜態(tài)方法,可以將對(duì)象的所有值提取到一個(gè)數(shù)組中:
const person = {
name: 'Tari Ibaba',
site: 'codingbeautydev.com',
color: '??blue',
};
const arr = Object.values(person);
// ['Tari Ibaba', 'codingbeautydev.com', '??blue']
console.log(arr);非常適合數(shù)據(jù)可視化:
const fruits = [
{
name: 'Banana',
pic: '??',
color: 'yellow',
},
{
name: 'Apple',
pic: '??',
color: 'red',
},
];
const keys = Object.keys(fruits.at(0));
const header = keys.map((key) => `| ${key} |`).join('');
const rows = fruits
.map((fruit) =>
keys.map((key) => `| ${fruit[key]} |`).join('')
).join('\n');
console.log(header + '\n' + rows);
Object.entries()
const person = {
name: 'Tari Ibaba',
site: 'codingbeautydev.com',
color: '??blue',
};
const arr = Object.entries(person);
/*
[
['name', 'Tari Ibaba'],
['site', 'codingbeautydev.com'],
['color', '??blue']
]
*/
console.log(arr);將對(duì)象中的每個(gè)鍵值對(duì)捆綁在一起,生成一個(gè)元組列表:
非常適合使用對(duì)象的鍵和值進(jìn)行數(shù)據(jù)轉(zhuǎn)換:
以ID為鍵的對(duì)象 → 對(duì)象列表:
? 之前:
const tasks = {
1: {
title: '???HIIT 30 minutes today',
complete: false,
},
2: {
name: 'Buy the backpack??',
complete: true,
},
};
const taskList = Object.keys(tasks).map((id) => ({
id,
...tasks[id],
}));
console.log(taskList);? 現(xiàn)在:
// ? 更簡(jiǎn)潔
const taskList = Object.entries(tasks).map(
([id, task]) => ({
id,
...task,
})
);
console.log(taskList);
4.原生字符串填充
2016年3月22日,流行的NPM包left-pad被創(chuàng)建者作為一種抗議形式下架,導(dǎo)致數(shù)千個(gè)軟件項(xiàng)目崩潰。
這讓許多人擔(dān)心我們可能過(guò)度依賴外部模塊 — 即使是像字符串填充這樣簡(jiǎn)單的功能。
但幸運(yùn)的是,ES8為JavaScript帶來(lái)了原生的字符串填充功能,即padStart和padEnd字符串方法:
const name = 'tari';
console.log(name.padStart(9, ' ')); // ' tari'
console.log(name.padEnd(10, '??')); // 'tari????????'我們不再需要依賴另一個(gè)第三方依賴。
5. Object.getOwnPropertyDescriptors()
名字聽(tīng)起來(lái)有點(diǎn)花哨,但很容易理解。
描述符是屬性的屬性 — 以下之一:
- value
- enumerable
- get
- set
- configurable
- enumerable
const person = {
name: 'Tari Ibaba',
color: '??color',
age: 999,
greet: () => console.log('Hey!'),
};
console.log(
Object.getOwnPropertyDescriptors(person)
);
最后的思考
總的來(lái)說(shuō),ES8對(duì)JavaScript來(lái)說(shuō)是一個(gè)重大飛躍,引入了幾個(gè)已成為現(xiàn)代開(kāi)發(fā)必不可少的特性。使你能夠編寫(xiě)更簡(jiǎn)潔、更富表現(xiàn)力和更清晰的代碼。
