英文 | https://javascript.plainenglish.io/5-javascript-features-that-you-might-not-know-about-but-will-improve-your-code-80f93d704b62
翻譯 | 小愛
今天，我想分享一些JavaScript功能的内容，你應該在日常代碼中使用這些功能，希望今天的内容對你有所幫助。
1、JavaScript字元串填充
如果你在2016年就使用JavaScript進行工作的話，我想，你可能會記得這一left-pad事件。
總而言之，NPM上有一個JavaScript軟體包，可用于在字元串上，對于那些多加上的字元，可以将其從NPM中删除，由于它受到軟體包的依賴，是以，在世界範圍内引起了多米諾骨牌效應，破壞了軟體的建構。
雖然，NPM解決了該問題，它在TC39的民間變得十分明顯，随着ES2017的出現，它們推出了.padStart()和.padEnd()。
要将0添加到字元串的開頭，我們将使用.padStart()，傳遞字元串的目标長度，用于填充目前字元串的字元串。在下面的示例中，我将字元串“ 1”填充為長度為“ 5”。
let str = "1";
str = str.padStart(5,0);
console.log(str) // output is 00001 另外，我們可能想填充字元串的末尾，為此我們使用.padEnd()。類似地，我們傳遞字元串的目标長度，并傳遞字元串作為目前字元串的填充。
在下面的示例中，我将字元串“ 1”填充長度為“ 5”。但是，這一次會将填充添加到末尾。
let str = "1";
str = str.padEnd(5,0);
console.log(str) // result is 10000 2、Spread運算符
Spread運算符并不是最新最閃亮的JavaScript功能，早在2015年作為ES2015規範的一部分問世，但是它的一些用例經常被忽略。
Spread運算符的第一個用例是将項目從一個數組添加到另一個數組。在下面的示例中，我有一個包含3種水果的數組，但是我想要第二個數組包含第四種水果，是以我使用了傳播運算符來複制原始水果，并添加第四種水果。
const arr1 = ["Apple", "Orange", "Pear"]
const arr2 = [...arr1, "Banana"]
console.log(arr2) // ["Apple", "Orange", "Pear", "Banana"] 我們可以對對象執行類似的操作，但是，具有額外的好處，即可以覆寫原始對象中的值。
const personA = {
name: "Jonathan",
age: 21,
}
const personB = {
...personA,
name: 'Charlie'
}
console.log(personB) // {name: "Charlie", age: 21} 3、Rest參數
從Spread運算符開始，我們有了Rest參數，這有點像相反。該rest文法收集多個元素，并将它們“壓縮”為單個元素。
該rest參數的一個好用例是在對數組進行分解時将其剩餘元素分組。在下面的示例中，我們對一些水果進行了解構，是以蘋果是獨立存在的，其餘的水果則排列在一個水果陣列中。
const [apple, ...fruits] = ["apple", "orange", "pear"];
console.log(apple); // output is "apple"
console.log(fruits); // output is ["orange", "pear"] 4、Array.prototype.includes
我要談的下一個功能是Array.prototype.includes，此功能使你可以查找數組是否包含項。
在之前Array.prototype.includes，可以通過周遊數組并将找到的項設定為true來實作此目的，請參見下文：
const fruits = ["Dragonfruit", "Kiwi", "Mango", "Pear", "Starfruit"];
let found = false;
fruits.forEach(function(fruit) {
if (fruit === 'Kiwi') {
found = true;
}
});
console.log(found); // Outputs `true` 現在，有了Array.prototype.includes，我們可以将其顯着減少到以下：
const fruits = ["Dragonfruit", "Kiwi", "Mango", "Pear", "Starfruit"];
const found = fruits.includes("Kiwi");
console.log(found); // Outputs `true` 注意：作為開發人員，我們不必擔心現在如何實作此搜尋，是以浏覽器可以自己優化此行為。
5、可選連結
我要談的第五功能，也是最後一個功能，“可選連結”。
可選的連結允許我們嘗試檢索嵌套在對象中的深層資料，而不必處理資料可能不存在的情況。
讓我們看一下下面的示例，在此示例中，我們正在定義Jonathan一些中繼資料。
const jonathan = {
name: "Jonathan",
meta: {
age: 21
}
}
const age = jonathan.meta.age;
const gender = jonathan.other.gender; // Will throw error
console.log(age);
console.log(gender); 如果我們運作此代碼，則會導緻錯誤，因為other該對象的部分不存在。
通過可選的連結，我們可以這樣來防止出現此錯誤：如果屬性不存在，請不要在對象樹中走得更遠。我使用可選連結更新了以下代碼。
const jonathan = {
name: "Jonathan",
meta: {
age: 21
}
}
const age = jonathan?.meta?.age;
const gender = Jonathan?.other?.gender;
console.log(age); // outputs 21
console.log(gender); // outputs "undefined" 如果我們現在運作此指令，将不再有錯誤，并且性别是未定義的，我們可以單獨處理。
總結
JavaScript的發展速度比以往任何時候都快，它每年更新一次，使它保持新鮮，是以，我們需要不斷的學習它的相關知識。
感謝你抽出寶貴的時間來閱讀。
學習更多技能
請點選下方公衆号