英文 | https://javascript.plainenglish.io/20-javascript-tricks-and-shorthands-1fa2576b2261

翻譯 | 楊小二

我為你收集了一系列有用的 JavaScript 技巧，讓你的代碼看起來更優(yōu)雅和專業(yè)。我希望你會喜歡它！

1、單線 If-Else

在 JavaScript 中，你可以使用三元條件運算符來壓縮 if-else 語句。

例如：

const age = 10;let group;
// LONG VERSIONif (age >= 18) {  group = "Adult";} else {  group = "Child";}
// SHORTHAND VERSIONgroup = age > 18 ? "Adult" : "Child";

請記住，這個簡寫是為了使代碼更簡潔。只有當它清楚地使表達更容易理解時才使用它。

2、空合并

空合并運算符 ?? 如果左側為空，則返回右側。否則，它返回左邊的值。這很有用，因為它省略了冗長的 if 檢查。

空合并的語法是：

someValue ?? defaultValue

例如：

let someValue;
// LONGER EXPRESSIONif(someValue){  console.log(someValue)} else {  console.log("Nothing found")}
//SHORTHANDconsole.log(someValue ?? "Nothing found")

輸出：

Nothing foundNothing found

3、可選鏈

在 JavaScript 中，你可以使用點表示法訪問對象的屬性和方法。

例如：

fruit.color

但是，如果你嘗試訪問未定義對象的屬性，你將看到錯誤。為避免這種情況，你需要確保在訪問其屬性之前定義該對象：

const color = fruit && fruit.color;

但這看起來并不甜。你可以通過在點符號前添加一個問號來使用可選鏈接，如下所示：

const color = fruit?.color;

讓我們看一個真實 JS 對象的例子：

const student = {  name: "Ann",  age: 22,  address: {    state: "California"  },};
// LONG FORMconsole.log(student && student.address && student.address.ZIPCode);
// SHORTHANDconsole.log(student?.address?.ZIPCode);

輸出：

undefinedundefined

4、將任何值轉(zhuǎn)換為布爾值

在 JavaScript 中，你可以將任何內(nèi)容轉(zhuǎn)換為布爾值。這是因為，在底層，JavaScript 中的一切要么是“True”，要么是“False”。

要將任何內(nèi)容轉(zhuǎn)換為布爾值，請使用雙感嘆號 !!。

例如：

!!true    // true!!2       // true!![]      // true!!"Test"  // true
!!false   // false!!0       // false!!""      // false

5、傳播

你可以使用擴展運算符 ... 將一個數(shù)組的元素擴展到另一個數(shù)組中。

例如，讓我們使用擴展運算符將兩個數(shù)字數(shù)組合并在一起：

const nums1 = [1, 2, 3];const nums2 = [4, 5, 6];
// LONG FORMlet newArray = nums1.concat(nums2);
// SHORTHANDnewArray = [...nums1, ...nums2];

在向數(shù)組添加元素時，你還可以將 .push() 方法替換為擴展運算符。

例如：

let numbers = [1, 2, 3];
// LONGER FORMnumbers.push(4);numbers.push(5);
// SHORTHANDnumbers = [...numbers, 4, 5];

6、使用擴展運算符進行解構

你可以使用擴展運算符 ... 來解構對象的剩余值。

為了演示，讓我們創(chuàng)建一個學生對象。讓我們將 name 和 age 屬性分配給變量，并將剩余的屬性分配給第三個變量：

const student = {  name: "Matt",  age: 23,  city: "Helsinki",  state: "Finland",};
// LONGER FORMconst name = student.name;const age = student.age;const address = { city: student.city, state: student.state };
// SHORTHANDconst { name, age, ...address } = student;

7、從數(shù)組中刪除重復項

你可以通過將數(shù)組轉(zhuǎn)換為集合，然后將集合中的值添加回數(shù)組來刪除數(shù)組的重復項。

這是有效的，因為集合是唯一的項目集合。

換句話說，一個集合中不能有兩個相同的值。因此，將數(shù)組轉(zhuǎn)換為集合會刪除引擎蓋下的重復項。

例如：

const nums = [1,1,1,1,3,4,5]const uniqueNums = [...new Set(nums)];

這是實現(xiàn)其效果的另一種方法：

const nums = [1,1,1,1,3,4,5]const uniqueNums = Array.from(new Set(nums))

順便說一句，如果你需要一組獨特的物品，為什么不使用 set 呢？

8、短路評估中的 && 運算符

你是否使用 if 檢查來查看表達式的計算結果是否為真？

你可以使用短路 && 運算符對速記進行相同的操作。

例如：

var ready = true;
function action(){  console.log("Yeah");}
// LONGER EXPRESSIONif(ready){  action();}
// SHORTHANDready && action();

輸出：

YeahYeah

9、將值嵌入到字符串中

你可以通過將字符串包裝在反引號內(nèi)并使用 ${} 將變量嵌入到字符串中。

例如：

const age = 41;const sentence = `I'm ${age} years old`;
// result: I'm 41 years old

這些字符串有時被稱為“類固醇字符串”。

10、對象屬性分配

如果你希望對象鍵與值具有相同的名稱，則可以省略對象文字。

例如：

const name = "Luis", city = "Paris", age = 43, food = "Spaghetti";
// LONGER EXPRESSIONlet person = {  name: name,  city: city,  age: age,  food: food};
// SHORTHANDperson = { name, city, age, food };

11、默認值

在 JavaScript 中，你可以擁有一個帶有默認參數(shù)值的函數(shù)。

通過這種方式，你可以在提供或不提供參數(shù)值的情況下調(diào)用該函數(shù)。

讓我們看一個例子：

// LONGER EXPRESSIONfunction pick(fruit) {  if(fruit === undefined){    console.log("I just picked up a Mango");  } else {    console.log(`I just picked up a ${fruit}`);  }}
// SHORTHANDfunction pick(fruit="Mango") {  console.log(`I just picked up a ${fruit}`)}
pick("Pineapple");  // -> I picked up a Pineapplepick();             // -> I picked up a Mango

12、一行聲明變量

你可以將變量聲明合并為一行，而不是每個聲明使用一行。

例如：

// LONGER FORMlet name;let age;let favoriteFood = "Pizza";
// SHORTHANDlet name, age, favoriteFood = "Pizza";

13、對象值作為數(shù)組

使用 Object.values() 方法將一個對象的所有值收集到一個數(shù)組中。

例如：

const info = { name: "Matt", country: "Finland", age: 35 };
// LONGER FORMlet data = [];for (let key in info) {  data.push(info[key]);}
// SHORTHANDconst data = Object.values(info);

14、在數(shù)組中查找元素

使用內(nèi)置的 find() 方法查找與特定條件匹配的元素。

例如：

const fruits = [  { type: "Banana", color: "Yellow" },  { type: "Apple", color: "Green" }];
// LONGER FORMlet yellowFruit;for (let i = 0; i < fruits.length; ++i) {  if (fruits[i].color === "Yellow") {    yellowFruit = fruits[i];  }}
// SHORTHANDyellowFruit = fruits.find((fruit) => fruit.color === "Yellow");

15、檢查數(shù)組中的項

你可以使用 includes() 方法，而不是使用 indexOf() 方法來檢查元素是否在數(shù)組中。

例如：

let numbers = [1, 2, 3];
// LONGER FORMconst hasNumber1 = numbers.indexOf(1) > -1 // -> True
// SHORTHAND/CLEANER APPROACHconst hasNumber1 = numbers.includes(1)     // -> True

16、多條件檢查

使用 includes() 方法避免條件鏈。

例如：

const num = 1;
// LONGER FORMif(num == 1 || num == 2 || num == 3){  console.log("Yay");}
// SHORTHANDif([1,2,3].includes(num)){  console.log("Yay");}

17、用一行代碼分配多個值

你可以使用解構在一行代碼中分配多個值。

例如：

let num1, num2;
// LONGER FORMnum1 = 10;num2 = 100;
// SHORTHAND[num1, num2] = [10, 100];

這也適用于對象：

student = {  name: "Matt",  age: 29,};
// LONGER FORMlet name = student.name;let age = student.age;
// SHORTHANDlet { name, age } = student;

18、在沒有第三個變量的情況下交換兩個變量

使用解構從數(shù)組中提取值。這可以應用于在沒有第三個的情況下交換兩個變量。

例如：

let x = 1;let y = 2;
// LONGER FORMlet temp = x;x = y;y = temp;
// SHORTHAND[x, y] = [y, x];

19、 Math.pow() 簡寫

你可以不使用 Math.pow() 函數(shù)來將數(shù)字求冪，而是使用 ** 運算符作為速記：

// LONGER FORMMath.pow(4,2); // 16Math.pow(2,3); // 8
// SHORTHAND4**2 // 162**3 // 8

20、 Math.floor() 簡寫

你可以使用 ~~ 運算符作為簡寫，而不是使用 Math.floor() 函數(shù)來向下舍入數(shù)字：

// LONG FORMMath.floor(5.25) // -> 5.0
// SHORTHAND~~5.25 // -> 5.0

寫在最后

感謝你看到這里，希望我今天與你分享的內(nèi)容，能夠?qū)δ阌兴鶐椭蚕Ｍ阆矚g它。

最后，祝編程快樂！

20個讓你看起來更加專業(yè)的 JavaScript 技巧

學習更多技能
請點擊下方公眾號

20個讓你看起來更加專業(yè)的 JavaScript 技巧

學習更多技能請點擊下方公眾號

學習更多技能
請點擊下方公眾號