WEB前端開發(fā)社區(qū) 今天
今天，我想分享一些JavaScript功能的內(nèi)容，你應(yīng)該在日常代碼中使用這些功能，希望今天的內(nèi)容對你有所幫助。1、JavaScript字符串填充
如果你在2016年就使用JavaScript進(jìn)行工作的話，我想，你可能會記得這一left-pad事件。總而言之，NPM上有一個JavaScript軟件包，可用于在字符串上，對于那些多加上的字符，可以將其從NPM中刪除，由于它受到軟件包的依賴，因此，在世界范圍內(nèi)引起了多米諾骨牌效應(yīng)，破壞了軟件的構(gòu)建。雖然，NPM解決了該問題，它在TC39的民間變得十分明顯，隨著ES2017的出現(xiàn)，它們推出了.padStart()和.padEnd()。要將0添加到字符串的開頭，我們將使用.padStart()，傳遞字符串的目標(biāo)長度，用于填充當(dāng)前字符串的字符串。在下面的示例中，我將字符串“ 1”填充為長度為“ 5”。let str = "1";str = str.padStart(5,0);console.log(str) // output is 00001
另外，我們可能想填充字符串的末尾，為此我們使用.padEnd()。類似地，我們傳遞字符串的目標(biāo)長度，并傳遞字符串作為當(dāng)前字符串的填充。
在下面的示例中，我將字符串“ 1”填充長度為“ 5”。但是，這一次會將填充添加到末尾。let str = "1";str = str.padEnd(5,0);console.log(str) // result is 10000
2、Spread運(yùn)算符
Spread運(yùn)算符并不是最新最閃亮的JavaScript功能，早在2015年作為ES2015規(guī)范的一部分問世，但是它的一些用例經(jīng)常被忽略。Spread運(yùn)算符的第一個用例是將項(xiàng)目從一個數(shù)組添加到另一個數(shù)組。在下面的示例中，我有一個包含3種水果的數(shù)組，但是我想要第二個數(shù)組包含第四種水果，因此我使用了傳播運(yùn)算符來復(fù)制原始水果，并添加第四種水果。const arr1 = ["Apple", "Orange", "Pear"]const arr2 = [...arr1, "Banana"]console.log(arr2) // ["Apple", "Orange", "Pear", "Banana"]
我們可以對對象執(zhí)行類似的操作，但是，具有額外的好處，即可以覆蓋原始對象中的值。const personA = {name: "Jonathan",age: 21,}const personB = { ...personA,name: 'Charlie'}console.log(personB) // {name: "Charlie", age: 21}從Spread運(yùn)算符開始，我們有了Rest參數(shù)，這有點(diǎn)像相反。該rest語法收集多個元素，并將它們“壓縮”為單個元素。該rest參數(shù)的一個好用例是在對數(shù)組進(jìn)行分解時將其剩余元素分組。在下面的示例中，我們對一些水果進(jìn)行了解構(gòu)，因此蘋果是獨(dú)立存在的，其余的水果則排列在一個水果陣列中。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，此功能使你可以查找數(shù)組是否包含項(xiàng)。在之前Array.prototype.includes，可以通過遍歷數(shù)組并將找到的項(xiàng)設(shè)置為true來實(shí)現(xiàn)此目的，請參見下文：const fruits = ["Dragonfruit", "Kiwi", "Mango", "Pear", "Starfruit"];let found = false;fruits.forEach(function(fruit) {if (fruit === 'Kiwi') { found = true; }});console.log(found); // Outputs `true`現(xiàn)在，有了Array.prototype.includes，我們可以將其顯著減少到以下：const fruits = ["Dragonfruit", "Kiwi", "Mango", "Pear", "Starfruit"];const found = fruits.includes("Kiwi");console.log(found); // Outputs `true`注意：作為開發(fā)人員，我們不必?fù)?dān)心現(xiàn)在如何實(shí)現(xiàn)此搜索，因此瀏覽器可以自己優(yōu)化此行為。
5、可選鏈接
我要談的第五功能，也是最后一個功能，“可選鏈接”。可選的鏈接允許我們嘗試檢索嵌套在對象中的深層數(shù)據(jù)，而不必處理數(shù)據(jù)可能不存在的情況。讓我們看一下下面的示例，在此示例中，我們正在定義Jonathan一些元數(shù)據(jù)。const jonathan = {name: "Jonathan",meta: {age: 21 }}const age = jonathan.meta.age;const gender = jonathan.other.gender; // Will throw errorconsole.log(age);console.log(gender);如果我們運(yùn)行此代碼，則會導(dǎo)致錯誤，因?yàn)閛ther該對象的部分不存在。
通過可選的鏈接，我們可以這樣來防止出現(xiàn)此錯誤：如果屬性不存在，請不要在對象樹中走得更遠(yuǎn)。我使用可選鏈接更新了以下代碼。const jonathan = {name: "Jonathan",meta: {age: 21 }}const age = jonathan?.meta?.age;const gender = Jonathan?.other?.gender;console.log(age); // outputs 21console.log(gender); // outputs "undefined"如果我們現(xiàn)在運(yùn)行此命令，將不再有錯誤，并且性別是未定義的，我們可以單獨(dú)處理。
JavaScript的發(fā)展速度比以往任何時候都快，它每年更新一次，使它保持新鮮，因此，我們需要不斷的學(xué)習(xí)它的相關(guān)知識。
