JavaScript簡(jiǎn)寫(xiě)技巧

更新時(shí)間：2021年08月25日 10:24:01 作者：前端新世界

這篇文章主要介紹了JavaScript簡(jiǎn)寫(xiě)技巧，運(yùn)用簡(jiǎn)寫(xiě)技巧，可以加快開(kāi)發(fā)速度，讓開(kāi)發(fā)工作事半功倍，大家感興趣的話(huà)可以參考本篇文章

1. 合并數(shù)組

普通寫(xiě)法：

我們通常使用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)寫(xiě)方法：

我們可以通過(guò)使用ES6擴(kuò)展運(yùn)算符(...)來(lái)減少代碼，如下所示：

let apples = ['🍎', '🍏'];
let fruits = ['🍉', '🍊', '🍇', ...apples];  // <-- here

console.log( fruits );
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

得到的輸出與普通寫(xiě)法相同。

2. 合并數(shù)組（在開(kāi)頭位置）

普通寫(xiě)法：

假設(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)在紅蘋(píng)果和綠蘋(píng)果會(huì)在開(kāi)頭位置合并而不是末尾。

簡(jiǎn)寫(xiě)方法：

我們依然可以使用ES6擴(kuò)展運(yùn)算符(...)縮短這段長(zhǎng)代碼，如下所示：

let apples = ['🍎', '🍏'];
let fruits = [...apples, '🥭', '🍌', '🍒'];  // <-- here

console.log( fruits );
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

3. 克隆數(shù)組

普通寫(xiě)法：

我們可以使用Array中的slice()方法輕松克隆數(shù)組，如下所示：

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = fruits.slice();

console.log( cloneFruits );
//=> ["🍉", "🍊", "🍇", "🍎"]

簡(jiǎn)寫(xiě)方法：

我們可以使用ES6擴(kuò)展運(yùn)算符(...)像這樣克隆一個(gè)數(shù)組：

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = [...fruits];  // <-- here

console.log( cloneFruits );
//=> ["🍉", "🍊", "🍇", "🍎"]

4. 解構(gòu)賦值

普通寫(xiě)法：

在處理數(shù)組時(shí)，我們有時(shí)需要將數(shù)組“解包”成一堆變量，如下所示：

let apples = ['🍎', '🍏'];
let redApple = apples[0];
let greenApple = apples[1];

console.log( redApple );    //=> 🍎
console.log( greenApple );  //=> 🍏

簡(jiǎn)寫(xiě)方法：

我們可以通過(guò)解構(gòu)賦值用一行代碼實(shí)現(xiàn)相同的結(jié)果：

let apples = ['🍎', '🍏'];
let [redApple, greenApple] = apples;  // <-- here

console.log( redApple );    //=> 🍎
console.log( greenApple );  //=> 🍏

5. 模板字面量

普通寫(xiě)法：

通常，當(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)寫(xiě)方法：

通過(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)

普通寫(xiě)法：

我們可以使用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)寫(xiě)方法：

我們可以使用for...of語(yǔ)句實(shí)現(xiàn)相同的結(jié)果，而代碼要少得多，如下所示：

let fruits = ['🍉', '🍊', '🍇', '🍎'];

// Using for...of statement 
for (let fruit of fruits) {
  console.log( fruit );
}

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

7. 箭頭函數(shù)

普通寫(xiě)法：

要遍歷數(shù)組，我們還可以使用Array中的forEach()方法。但是需要寫(xiě)很多代碼，雖然比最常見(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)寫(xiě)方法：

但是使用箭頭函數(shù)表達(dá)式，允許我們用一行編寫(xiě)完整的循環(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ì)象

普通寫(xiě)法：

要通過(guò)其中一個(gè)屬性從對(duì)象數(shù)組中查找對(duì)象的話(huà)，我們通常使用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)寫(xiě)方法：

哇！上面我們寫(xiě)了這么多代碼來(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ù)

普通寫(xiě)法：

let num = parseInt("10")

console.log( num )         //=> 10
console.log( typeof num )  //=> "number"

簡(jiǎn)寫(xiě)方法：

我們可以通過(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. 短路求值

普通寫(xiě)法：

如果我們必須根據(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)寫(xiě)方法：

但是使用短路求值(||)，我們可以用一行代碼執(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";

最后，我想借用一段話(huà)來(lái)作結(jié)尾：

代碼之所以是我們的敵人，是因?yàn)槲覀冎械脑S多程序員寫(xiě)了很多很多的狗屎代碼。如果我們沒(méi)有辦法擺脫，那么最好盡全力保持代碼簡(jiǎn)潔。

如果你喜歡寫(xiě)代碼——真的，真的很喜歡寫(xiě)代碼——你代碼寫(xiě)得越少，說(shuō)明你的愛(ài)意越深。

到此這篇關(guān)于JavaScript簡(jiǎn)寫(xiě)技巧的文章就介紹到這了,更多相關(guān)JavaScript簡(jiǎn)寫(xiě)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript簡(jiǎn)寫(xiě)技巧

目錄

1. 合并數(shù)組

2. 合并數(shù)組（在開(kāi)頭位置）

3. 克隆數(shù)組

4. 解構(gòu)賦值

5. 模板字面量

6. For循環(huán)

7. 箭頭函數(shù)

8. 在數(shù)組中查找對(duì)象

9. 將字符串轉(zhuǎn)換為整數(shù)

10. 短路求值

補(bǔ)充幾點(diǎn)

箭頭函數(shù)

在數(shù)組中查找對(duì)象

短路求值替代方案

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具