JavaScript簡(jiǎn)寫技巧
1. 合并數(shù)組
普通寫法：
我們通常使用Array中的concat()方法合并兩個(gè)數(shù)組。用concat()方法來(lái)合并兩個(gè)或多個(gè)數(shù)組，不會(huì)更改現(xiàn)有的數(shù)組，而是返回一個(gè)新的數(shù)組。請(qǐng)看一個(gè)簡(jiǎn)單的例子：
let apples = ['🍎', '🍏']; let fruits = ['🍉', '🍊', '🍇'].concat(apples); console.log( fruits ); //=> ["🍉", "🍊", "🍇", "🍎", "🍏"]
簡(jiǎn)寫方法：
我們可以通過(guò)使用ES6擴(kuò)展運(yùn)算符(...)來(lái)減少代碼，如下所示：
let apples = ['🍎', '🍏']; let fruits = ['🍉', '🍊', '🍇', ...apples]; // <-- here console.log( fruits ); //=> ["🍉", "🍊", "🍇", "🍎", "🍏"]
得到的輸出與普通寫法相同。
2. 合并數(shù)組（在開(kāi)頭位置）
普通寫法：
假設(shè)我們想將apples數(shù)組中的所有項(xiàng)添加到Fruits數(shù)組的開(kāi)頭，而不是像上一個(gè)示例中那樣放在末尾。我們可以使用
let apples = ['🍎', '🍏']; let fruits = ['🥭', '🍌', '🍒']; // Add all items from apples onto fruits at start Array.prototype.unshift.apply(fruits, apples) console.log( fruits ); //=> ["🍎", "🍏", "🥭", "🍌", "🍒"]
現(xiàn)在紅蘋果和綠蘋果會(huì)在開(kāi)頭位置合并而不是末尾。
簡(jiǎn)寫方法：
我們依然可以使用ES6擴(kuò)展運(yùn)算符(...)縮短這段長(zhǎng)代碼，如下所示：
let apples = ['🍎', '🍏']; let fruits = [...apples, '🥭', '🍌', '🍒']; // <-- here console.log( fruits ); //=> ["🍎", "🍏", "🥭", "🍌", "🍒"]
3. 克隆數(shù)組
普通寫法：
我們可以使用Array中的slice()方法輕松克隆數(shù)組，如下所示：
let fruits = ['🍉', '🍊', '🍇', '🍎']; let cloneFruits = fruits.slice(); console.log( cloneFruits ); //=> ["🍉", "🍊", "🍇", "🍎"]
簡(jiǎn)寫方法：
我們可以使用ES6擴(kuò)展運(yùn)算符(...)像這樣克隆一個(gè)數(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 ); //=> 🍏
簡(jiǎn)寫方法：
我們可以通過(guò)解構(gòu)賦值用一行代碼實(shí)現(xiàn)相同的結(jié)果：
let apples = ['🍎', '🍏']; let [redApple, greenApple] = apples; // <-- here console.log( redApple ); //=> 🍎 console.log( greenApple ); //=> 🍏
5. 模板字面量
普通寫法：
通常，當(dāng)我們必須向字符串添加表達(dá)式時(shí)，我們會(huì)這樣做：
// 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
簡(jiǎn)寫方法：
通過(guò)模板字面量，我們可以使用反引號(hào)()，這樣我們就可以將表達(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 = 10
6. For循環(huán)
普通寫法：
我們可以使用for循環(huán)像這樣循環(huán)遍歷一個(gè)數(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
}
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎
簡(jiǎn)寫方法：
我們可以使用for...of語(yǔ)句實(shí)現(xiàn)相同的結(jié)果，而代碼要少得多，如下所示：
let fruits = ['🍉', '🍊', '🍇', '🍎'];
// Using for...of statement
for (let fruit of fruits) {
console.log( fruit );
}
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎
7. 箭頭函數(shù)
普通寫法：
要遍歷數(shù)組，我們還可以使用Array中的forEach()方法。但是需要寫很多代碼，雖然比最常見(jiàn)的for循環(huán)要少，但仍然比f(wàn)or...of語(yǔ)句多一點(diǎn)：
let fruits = ['🍉', '🍊', '🍇', '🍎'];
// Using forEach method
fruits.forEach(function(fruit){
console.log( fruit );
});
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎
簡(jiǎn)寫方法：
但是使用箭頭函數(shù)表達(dá)式，允許我們用一行編寫完整的循環(huán)代碼，如下所示：
let fruits = ['🍉', '🍊', '🍇', '🍎']; fruits.forEach(fruit => console.log( fruit )); // <-- Magic ✨ //=> 🍉 //=> 🍊 //=> 🍇 //=> 🍎
大多數(shù)時(shí)候我使用的是帶箭頭函數(shù)的forEach循環(huán)，這里我把for...of語(yǔ)句和forEach循環(huán)都展示出來(lái)，方便大家根據(jù)自己的喜好使用代碼。
8. 在數(shù)組中查找對(duì)象
普通寫法：
要通過(guò)其中一個(gè)屬性從對(duì)象數(shù)組中查找對(duì)象的話，我們通常使用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 }
簡(jiǎn)寫方法：
哇！上面我們寫了這么多代碼來(lái)實(shí)現(xiàn)這個(gè)邏輯。但是使用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ù)
普通寫法：
let num = parseInt("10")
console.log( num ) //=> 10
console.log( typeof num ) //=> "number"
簡(jiǎn)寫方法：
我們可以通過(guò)在字符串前添加+前綴來(lái)實(shí)現(xiàn)相同的結(jié)果，如下所示：
let num = +"10"; console.log( num ) //=> 10 console.log( typeof num ) //=> "number" console.log( +"10" === 10 ) //=> true
10. 短路求值
普通寫法：
如果我們必須根據(jù)另一個(gè)值來(lái)設(shè)置一個(gè)值不是falsy值，一般會(huì)使用if-else語(yǔ)句，就像這樣：
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"
簡(jiǎn)寫方法：
但是使用短路求值(||)，我們可以用一行代碼執(zhí)行此操作，如下所示：
function getUserRole(role) {
return role || 'USER'; // <-- here
}
console.log( getUserRole() ) //=> "USER"
console.log( getUserRole('ADMIN') ) //=> "ADMIN"
基本上，expression1 || expression2被評(píng)估為真表達(dá)式。因此，這就意味著如果第一部分為真，則不必費(fèi)心求值表達(dá)式的其余部分。
補(bǔ)充幾點(diǎn)
箭頭函數(shù)
如果你不需要this上下文，則在使用箭頭函數(shù)時(shí)代碼還可以更短：
let fruits = ['🍉', '🍊', '🍇', '🍎']; fruits.forEach(console.log);
在數(shù)組中查找對(duì)象
你可以使用對(duì)象解構(gòu)和箭頭函數(shù)使代碼更精簡(jiǎn)：
// 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";
最后，我想借用一段話來(lái)作結(jié)尾：
代碼之所以是我們的敵人，是因?yàn)槲覀冎械脑S多程序員寫了很多很多的狗屎代碼。如果我們沒(méi)有辦法擺脫，那么最好盡全力保持代碼簡(jiǎn)潔。
如果你喜歡寫代碼——真的，真的很喜歡寫代碼——你代碼寫得越少，說(shuō)明你的愛(ài)意越深。
到此這篇關(guān)于JavaScript簡(jiǎn)寫技巧的文章就介紹到這了,更多相關(guān)JavaScript簡(jiǎn)寫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面 移動(dòng)DIV
本篇文章主要介紹javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面，移動(dòng)DIV。話不多說(shuō)，附上代碼實(shí)例。需要的朋友來(lái)看下吧2016-12-12
詳解Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用
本篇文章主要介紹了Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
使用SyntaxHighlighter實(shí)現(xiàn)HTML高亮顯示代碼的方法
syntaxhighlighter是一個(gè)小開(kāi)源項(xiàng)目，它可以在網(wǎng)頁(yè)中對(duì)各種程序源代碼語(yǔ)法進(jìn)行加亮顯示。2010-02-02
Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解
這篇文章主要介紹了Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解,本文講解了列表的抽象數(shù)據(jù)類型定義、如何實(shí)現(xiàn)列表類等內(nèi)容,需要的朋友可以參考下2015-03-03
javascript實(shí)現(xiàn)簡(jiǎn)單頁(yè)面倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單頁(yè)面倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了JS返回iframe中frameBorder屬性值的方法,分析了frameBorder屬性的功能及javascript獲取frameBorder屬性值的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JS動(dòng)態(tài)增刪表格行的方法,涉及JavaScript針對(duì)表格元素動(dòng)態(tài)操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-03-03
對(duì)于不同類型的需要重復(fù)計(jì)算的問(wèn)題，循環(huán)和遞歸兩種方法各有所長(zhǎng)，能給出更直觀簡(jiǎn)單的方案，下面為大家詳細(xì)的介紹下JavaScript的遞歸與循環(huán)，感興趣的朋友可以了解下2013-08-08
這篇文章主要為大家詳細(xì)介紹了原生js自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript實(shí)現(xiàn)移動(dòng)端滑動(dòng)選擇日期功能
這篇文章主要介紹了JavaScript實(shí)現(xiàn)滑動(dòng)選擇日期功能，基于sui-mobile的移動(dòng)端實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-06-06