總結(jié)分享10 個超棒的 JavaScript 簡寫技巧
1.合并數(shù)組
普通寫法：
我們通常使用Array中的concat()方法合并兩個數(shù)組。用concat()方法來合并兩個或多個數(shù)組，不會更改現(xiàn)有的數(shù)組，而是返回一個新的數(shù)組。請
看一個簡單的例子：
let apples = ['??', '??']; let fruits = ['??', '??', '??'].concat(apples); console.log( fruits ); //=> ["??", "??", "??", "??", "??"]
簡寫寫法：
我們可以通過使用ES6擴(kuò)展運(yùn)算符(...)來減少代碼，如下所示：
let apples = ['??', '??']; let fruits = ['??', '??', '??', ...apples]; // <-- here console.log( fruits ); //=> ["??", "??", "??", "??", "??"]
2.合并數(shù)組（在開頭位置）
普通寫法： 假設(shè)我們想將apples數(shù)組中的所有項(xiàng)添加到Fruits數(shù)組的開頭，而不是像上一個示例中那樣放在末尾。我們可以使用Array.prototype.unshift()來做到這一點(diǎn)：
let apples = ['??', '??']; let fruits = ['??', '??', '??']; // Add all items from apples onto fruits at start Array.prototype.unshift.apply(fruits, apples) console.log( fruits ); //=> ["??", "??", "??", "??", "??"]
簡寫寫法：
我們依然可以使用ES6擴(kuò)展運(yùn)算符(...)縮短這段長代碼，如下所示：
let apples = ['??', '??']; let fruits = [...apples, '??', '??', '??']; // <-- here console.log( fruits ); //=> ["??", "??", "??", "??", "??"]
3.克隆數(shù)組
普通寫法：
我們可以使用Array中的slice()方法輕松克隆數(shù)組，如下所示：
let fruits = ['??', '??', '??', '??']; let cloneFruits = fruits.slice(); console.log( cloneFruits ); //=> ["??", "??", "??", "??"]
簡寫寫法：
我們可以使用ES6擴(kuò)展運(yùn)算符(...)像這樣克隆一個數(shù)組：
let fruits = ['??', '??', '??', '??']; let cloneFruits = [...fruits]; // <-- here console.log( cloneFruits ); //=> ["??", "??", "??", "??"]
4.解構(gòu)賦值
普通寫法：
在處理數(shù)組時(shí)，我們有時(shí)需要將數(shù)組“解包”成一堆變量，如下所示：
let apples = ['??', '??']; let redApple = apples[0]; let greenApple = apples[1]; console.log( redApple ); //=> ?? console.log( greenApple ); //=> ??
簡寫寫法：
我們可以通過解構(gòu)賦值用一行代碼實(shí)現(xiàn)相同的結(jié)果：
let apples = ['??', '??']; let [redApple, greenApple] = apples; // <-- here console.log( redApple ); //=> ?? console.log( greenApple ); //=> ??
5.模板字面量
普通寫法：
通常，當(dāng)我們必須向字符串添加表達(dá)式時(shí)，我們會這樣做：
// Display name in between two strings
let name = 'Palash';
console.log('Hello, ' + name + '!');
//=> Hello, Palash!
// Add & Subtract two numbers
let num1 = 20;
let num2 = 10;
console.log('Sum = ' + (num1 + num2) + ' and Subtract = ' + (num1 - num2));
//=> Sum = 30 and Subtract = 10簡寫寫法：
通過模板字面量，我們可以使用反引號(``)，這樣我們就可以將表達(dá)式包裝在${…}`中，然后嵌入到字符串，如下所示：
// Display name in between two strings
let name = 'Palash';
console.log(`Hello, ${name}!`); // <-- No need to use + var + anymore
//=> Hello, Palash!
// Add two numbers
let num1 = 20;
let num2 = 10;
console.log(`Sum = ${num1 + num2} and Subtract = ${num1 - num2}`);
//=> Sum = 30 and Subtract = 106.For循環(huán)
普通寫法：
我們可以使用for循環(huán)像這樣循環(huán)遍歷一個數(shù)組：
let fruits = ['??', '??', '??', '??'];
// Loop through each fruit
for (let index = 0; index < fruits.length; index++) {
console.log( fruits[index] ); // <-- get the fruit at current index
}
//=> ??
//=> ??
//=> ??
//=> ??簡寫寫法：
我們可以使用for...of語句實(shí)現(xiàn)相同的結(jié)果，而代碼要少得多，如下所示：
let fruits = ['??', '??', '??', '??'];
// Using for...of statement
for (let fruit of fruits) {
console.log( fruit );
}
//=> ??
//=> ??
//=> ??
//=> ??7.箭頭函數(shù)
普通寫法：
要遍歷數(shù)組，我們還可以使用Array中的forEach()方法。但是需要寫很多代碼，雖然比最常見的for循環(huán)要少，但仍然比for...of語句多一點(diǎn)：
let fruits = ['??', '??', '??', '??'];
// Using forEach method
fruits.forEach(function(fruit){
console.log( fruit );
});
//=> ??
//=> ??
//=> ??
//=> ??簡寫寫法：
但是使用箭頭函數(shù)表達(dá)式，允許我們用一行編寫完整的循環(huán)代碼，如下所示：
let fruits = ['??', '??', '??', '??']; fruits.forEach(fruit => console.log( fruit )); // <-- Magic ? //=> ?? //=> ?? //=> ?? //=> ??
8.在數(shù)組中查找對象
普通寫法：
要通過其中一個屬性從對象數(shù)組中查找對象的話，我們通常使用for循環(huán)：
let inventory = [
{name: 'Bananas', quantity: 5},
{name: 'Apples', quantity: 10},
{name: 'Grapes', quantity: 2}
];
// Get the object with the name `Apples` inside the array
function getApples(arr, value) {
for (let index = 0; index < arr.length; index++) {
// Check the value of this object property `name` is same as 'Apples'
if (arr[index].name === 'Apples') { //=> ??
// A match was found, return this object
return arr[index];
}
}
}
let result = getApples(inventory);
console.log( result )
//=> { name: "Apples", quantity: 10 }簡寫寫法：
上面我們寫了這么多代碼來實(shí)現(xiàn)這個邏輯。但是使用Array中的find()方法和箭頭函數(shù)=>，允許我們像這樣一行搞定：
// Get the object with the name `Apples` inside the array
function getApples(arr, value) {
return arr.find(obj => obj.name === 'Apples'); // <-- here
}
let result = getApples(inventory);
console.log( result )
//=> { name: "Apples", quantity: 10 }9.將字符串轉(zhuǎn)換為整數(shù)
普通寫法：
parseInt()函數(shù)用于解析字符串并返回整數(shù)：
let num = parseInt("10")
console.log( num ) //=> 10
console.log( typeof num ) //=> "number"簡寫寫法：
我們可以通過在字符串前添加+前綴來實(shí)現(xiàn)相同的結(jié)果，如下所示：
let num = +"10"; console.log( num ) //=> 10 console.log( typeof num ) //=> "number" console.log( +"10" === 10 ) //=> true
10.短路求值
普通寫法：
如果我們必須根據(jù)另一個值來設(shè)置一個值不是falsy值，一般會使用if-else語句，就像這樣：
function getUserRole(role) {
let userRole;
// If role is not falsy value
// set `userRole` as passed `role` value
if (role) {
userRole = role;
} else {
// else set the `userRole` as USER
userRole = 'USER';
}
return userRole;
}
console.log( getUserRole() ) //=> "USER"
console.log( getUserRole('ADMIN') ) //=> "ADMIN"簡寫寫法：
但是使用短路求值(||)，我們可以用一行代碼執(zhí)行此操作，如下所示：
function getUserRole(role) {
return role || 'USER'; // <-- here
}
console.log( getUserRole() ) //=> "USER"
console.log( getUserRole('ADMIN') ) //=> "ADMIN"補(bǔ)充幾點(diǎn)
箭頭函數(shù)：
如果你不需要this上下文，則在使用箭頭函數(shù)時(shí)代碼還可以更短：
let fruits = ['??', '??', '??', '??']; fruits.forEach(console.log);
在數(shù)組中查找對象：
你可以使用對象解構(gòu)和箭頭函數(shù)使代碼更精簡：
// Get the object with the name `Apples` inside the array
const getApples = array => array.find(({ name }) => name === "Apples");
let result = getApples(inventory);
console.log(result);
//=> { name: "Apples", quantity: 10 }短路求值替代方案：
const getUserRole1 = (role = "USER") => role; const getUserRole2 = role => role ?? "USER"; const getUserRole3 = role => role ? role : "USER";
編碼習(xí)慣
最后我想說下編碼習(xí)慣。代碼規(guī)范比比皆是，但是很少有人嚴(yán)格遵守。究其原因，多是在代碼規(guī)范制定之前，已經(jīng)有自己的一套代碼習(xí)慣，很難短時(shí)間改變自己的習(xí)慣。良好的編碼習(xí)慣可以為后續(xù)的成長打好基礎(chǔ)。下面，列舉一下開發(fā)規(guī)范的幾點(diǎn)好處，讓大家明白代碼規(guī)范的重要性：
- 規(guī)范的代碼可以促進(jìn)團(tuán)隊(duì)合作。
- 規(guī)范的代碼可以減少 Bug 處理。
- 規(guī)范的代碼可以降低維護(hù)成本。
- 規(guī)范的代碼有助于代碼審查。
- 養(yǎng)成代碼規(guī)范的習(xí)慣，有助于程序員自身的成長。
到此這篇關(guān)于總結(jié)分享10 個超棒的 JavaScript 簡寫技巧的文章就介紹到這了,更多相關(guān)JS簡寫技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了JavaScript中l(wèi)et與const命令使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
彈窗對我們大家來說應(yīng)該都不陌生,這篇文章主要給大家介紹了關(guān)于小程序展示彈窗常見API的相關(guān)資料,主要包括showToast,?showModal,showLoading和showActionSheet,需要的朋友可以參考下2022-09-09
javascript運(yùn)行機(jī)制之執(zhí)行順序理解
這篇文章主要介紹了javascript運(yùn)行機(jī)制之執(zhí)行順序理解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了javascript表格的渲染組件的相關(guān)資料,需要的朋友可以參考下2015-07-07
js實(shí)現(xiàn)無需數(shù)據(jù)庫的縣級以上聯(lián)動行政區(qū)域下拉控件
縣級以上聯(lián)動行政區(qū)域下拉控件，想必大家對此也有所熟悉，本文為大家介紹下使用js實(shí)現(xiàn)無需數(shù)據(jù)庫的聯(lián)動下拉控件，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要為大家詳細(xì)介紹了p5.js繪制旋轉(zhuǎn)的正方形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章給大家介紹IE6兼容透明背景圖片以及在IE6中的透明圖片不是透明顯示的解決方案,有需要的朋友可以參考下2015-08-08
本文主要介紹了js清除瀏覽器緩存的幾種方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
JS實(shí)現(xiàn)Date日期格式的本地化的方法小結(jié)
為了更好的更新多語言日期的顯示,所以希望實(shí)現(xiàn)日期的本地化格式顯示要求,常規(guī)的特殊字符型格式化無法滿足顯示要求,這里整理了幾種我思考實(shí)現(xiàn)的本地化實(shí)現(xiàn)功能2024-06-06
django js 實(shí)現(xiàn)表格動態(tài)標(biāo)序號的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了django js 實(shí)現(xiàn)表格動態(tài)標(biāo)序號 ,代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07