20個實用而專業(yè)的JavaScript技巧
英文 | https://javascript.plainenglish.io/20-javascript-tricks-and-shorthands-1fa2576b2261
翻譯 | 楊小二
const age = 10;let group;// LONG VERSIONif (age >= 18) {group = "Adult";} else {group = "Child";}// SHORTHAND VERSIONgroup = age > 18 ? "Adult" : "Child";
請記住，這個簡寫是為了使代碼更簡潔。只有當(dāng)它清楚地使表達(dá)更容易理解時才使用它。
2、空合并
空合并運算符 ?? 如果左側(cè)為空，則返回右側(cè)。否則，它返回左邊的值。這很有用，因為它省略了冗長的 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、傳播
你可以使用擴(kuò)展運算符 ... 將一個數(shù)組的元素擴(kuò)展到另一個數(shù)組中。
例如，讓我們使用擴(kuò)展運算符將兩個數(shù)字?jǐn)?shù)組合并在一起：
const nums1 = [1, 2, 3];const nums2 = [4, 5, 6];// LONG FORMlet newArray = nums1.concat(nums2);// SHORTHANDnewArray = [...nums1, ...nums2];
在向數(shù)組添加元素時，你還可以將 .push() 方法替換為擴(kuò)展運算符。
例如：
let numbers = [1, 2, 3];// LONGER FORMnumbers.push(4);numbers.push(5);// SHORTHANDnumbers = [...numbers, 4, 5];
6、 使用擴(kuò)展運算符進(jìn)行解構(gòu)
你可以使用擴(kuò)展運算符 ... 來解構(gòu)對象的剩余值。
為了演示，讓我們創(chuàng)建一個學(xué)生對象。讓我們將 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ù)組中刪除重復(fù)項
你可以通過將數(shù)組轉(zhuǎn)換為集合，然后將集合中的值添加回數(shù)組來刪除數(shù)組的重復(fù)項。
這是有效的，因為集合是唯一的項目集合。
換句話說，一個集合中不能有兩個相同的值。因此，將數(shù)組轉(zhuǎn)換為集合會刪除引擎蓋下的重復(fù)項。
例如：
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 檢查來查看表達(dá)式的計算結(jié)果是否為真？
你可以使用短路 && 運算符對速記進(jìn)行相同的操作。
例如：
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、默認(rèn)值
在 JavaScript 中，你可以擁有一個帶有默認(rèn)參數(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、用一行代碼分配多個值
你可以使用解構(gòu)在一行代碼中分配多個值。
例如：
let num1, num2;// LONGER FORMnum1 = 10;num2 = 100;// SHORTHAND[] = [10, 100];
這也適用于對象：
student = {name: "Matt",age: 29,};// LONGER FORMlet name = student.name;let age = student.age;// SHORTHANDlet { name, age } = student;
18、在沒有第三個變量的情況下交換兩個變量
使用解構(gòu)從數(shù)組中提取值。這可以應(yīng)用于在沒有第三個的情況下交換兩個變量。
例如：
let x = 1;let y = 2;// LONGER FORMlet temp = x;x = y;y = temp;// SHORTHAND[] = [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它。
最后，祝編程快樂！
學(xué)習(xí)更多技能
請點擊下方公眾號
