20個(gè)實(shí)用而專(zhuān)業(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";
請(qǐng)記住，這個(gè)簡(jiǎn)寫(xiě)是為了使代碼更簡(jiǎn)潔。只有當(dāng)它清楚地使表達(dá)更容易理解時(shí)才使用它。
2、空合并
空合并運(yùn)算符 ?? 如果左側(cè)為空，則返回右側(cè)。否則，它返回左邊的值。這很有用，因?yàn)樗÷粤巳唛L(zhǎng)的 if 檢查。
空合并的語(yǔ)法是：
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 中，你可以使用點(diǎn)表示法訪問(wèn)對(duì)象的屬性和方法。
例如：
fruit.color但是，如果你嘗試訪問(wèn)未定義對(duì)象的屬性，你將看到錯(cuò)誤。為避免這種情況，你需要確保在訪問(wèn)其屬性之前定義該對(duì)象：
const color = fruit && fruit.color;但這看起來(lái)并不甜。你可以通過(guò)在點(diǎn)符號(hào)前添加一個(gè)問(wèn)號(hào)來(lái)使用可選鏈接，如下所示：
const color = fruit?.color;讓我們看一個(gè)真實(shí) JS 對(duì)象的例子：
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)換為布爾值。這是因?yàn)?，在底層，JavaScript 中的一切要么是“True”，要么是“False”。
要將任何內(nèi)容轉(zhuǎn)換為布爾值，請(qǐng)使用雙感嘆號(hào) !!。
例如：
!!true // true!!2 // true!![] // true!!"Test" // true!!false // false!!0 // false!!"" // false
5、傳播
你可以使用擴(kuò)展運(yùn)算符 ... 將一個(gè)數(shù)組的元素?cái)U(kuò)展到另一個(gè)數(shù)組中。
例如，讓我們使用擴(kuò)展運(yùn)算符將兩個(gè)數(shù)字?jǐn)?shù)組合并在一起：
const nums1 = [1, 2, 3];const nums2 = [4, 5, 6];// LONG FORMlet newArray = nums1.concat(nums2);// SHORTHANDnewArray = [...nums1, ...nums2];
在向數(shù)組添加元素時(shí)，你還可以將 .push() 方法替換為擴(kuò)展運(yùn)算符。
例如：
let numbers = [1, 2, 3];// LONGER FORMnumbers.push(4);numbers.push(5);// SHORTHANDnumbers = [...numbers, 4, 5];
6、 使用擴(kuò)展運(yùn)算符進(jìn)行解構(gòu)
你可以使用擴(kuò)展運(yùn)算符 ... 來(lái)解構(gòu)對(duì)象的剩余值。
為了演示，讓我們創(chuàng)建一個(gè)學(xué)生對(duì)象。讓我們將 name 和 age 屬性分配給變量，并將剩余的屬性分配給第三個(gè)變量：
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ù)項(xiàng)
你可以通過(guò)將數(shù)組轉(zhuǎn)換為集合，然后將集合中的值添加回?cái)?shù)組來(lái)刪除數(shù)組的重復(fù)項(xiàng)。
這是有效的，因?yàn)榧鲜俏ㄒ坏捻?xiàng)目集合。
換句話(huà)說(shuō)，一個(gè)集合中不能有兩個(gè)相同的值。因此，將數(shù)組轉(zhuǎn)換為集合會(huì)刪除引擎蓋下的重復(fù)項(xiàng)。
例如：
const nums = [1,1,1,1,3,4,5]const uniqueNums = [...new Set(nums)];
這是實(shí)現(xiàn)其效果的另一種方法：
const nums = [1,1,1,1,3,4,5]const uniqueNums = Array.from(new Set(nums))
順便說(shuō)一句，如果你需要一組獨(dú)特的物品，為什么不使用 set 呢？
8、短路評(píng)估中的 && 運(yùn)算符
你是否使用 if 檢查來(lái)查看表達(dá)式的計(jì)算結(jié)果是否為真？
你可以使用短路 && 運(yùn)算符對(duì)速記進(jìn)行相同的操作。
例如：
var ready = true;function action(){console.log("Yeah");}// LONGER EXPRESSIONif(ready){action();}// SHORTHANDready && action();
輸出：
YeahYeah
9、將值嵌入到字符串中
你可以通過(guò)將字符串包裝在反引號(hào)內(nèi)并使用 ${} 將變量嵌入到字符串中。
例如：
const age = 41;const sentence = `I'm ${age} years old`;// result: I'm 41 years old
這些字符串有時(shí)被稱(chēng)為“類(lèi)固醇字符串”。
10、對(duì)象屬性分配
如果你希望對(duì)象鍵與值具有相同的名稱(chēng)，則可以省略對(duì)象文字。
例如：
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 中，你可以擁有一個(gè)帶有默認(rèn)參數(shù)值的函數(shù)。
通過(guò)這種方式，你可以在提供或不提供參數(shù)值的情況下調(diào)用該函數(shù)。
讓我們看一個(gè)例子：
// 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、一行聲明變量
你可以將變量聲明合并為一行，而不是每個(gè)聲明使用一行。
例如：
// LONGER FORMlet name;let age;let favoriteFood = "Pizza";// SHORTHANDlet name, age, favoriteFood = "Pizza";
13、對(duì)象值作為數(shù)組
使用 Object.values() 方法將一個(gè)對(duì)象的所有值收集到一個(gè)數(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ù)組中的項(xiàng)
你可以使用 includes() 方法，而不是使用 indexOf() 方法來(lái)檢查元素是否在數(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è)值
你可以使用解構(gòu)在一行代碼中分配多個(gè)值。
例如：
let num1, num2;// LONGER FORMnum1 = 10;num2 = 100;// SHORTHAND[] = [10, 100];
這也適用于對(duì)象：
student = {name: "Matt",age: 29,};// LONGER FORMlet name = student.name;let age = student.age;// SHORTHANDlet { name, age } = student;
18、在沒(méi)有第三個(gè)變量的情況下交換兩個(gè)變量
使用解構(gòu)從數(shù)組中提取值。這可以應(yīng)用于在沒(méi)有第三個(gè)的情況下交換兩個(gè)變量。
例如：
let x = 1;let y = 2;// LONGER FORMlet temp = x;x = y;y = temp;// SHORTHAND[] = [y, x];
19、 Math.pow() 簡(jiǎn)寫(xiě)
你可以不使用 Math.pow() 函數(shù)來(lái)將數(shù)字求冪，而是使用 ** 運(yùn)算符作為速記：
// LONGER FORMMath.pow(4,2); // 16Math.pow(2,3); // 8// SHORTHAND4**2 // 162**3 // 8
20、 Math.floor() 簡(jiǎn)寫(xiě)
你可以使用 ~~ 運(yùn)算符作為簡(jiǎn)寫(xiě)，而不是使用 Math.floor() 函數(shù)來(lái)向下舍入數(shù)字：
// LONG FORMMath.floor(5.25) // -> 5.0// SHORTHAND~~5.25 // -> 5.0
寫(xiě)在最后
感謝你看到這里，希望我今天與你分享的內(nèi)容，能夠?qū)δ阌兴鶐椭?，也希望你喜歡它。
最后，祝編程快樂(lè)！
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
