20個JavaScript代碼片段，提升你的JavaScript技能，讓你更專業(yè)
英文 | https://medium.com/geekculture/20-javascript-snippets-to-code-like-a-pro-86f5fda5598e
翻譯 | 楊小二
1、單行 If-Else 語句
const age = 12;let ageGroup;// LONG FORMif (age > 18) {ageGroup = "An adult";} else {ageGroup = "A child";}// SHORTHANDageGroup = age > 18 ? "An adult" : "A child";
但是，不要過度使用它。它會使你的代碼更加冗長。明智的做法是僅用此替換簡單的表達式以提高可讀性并減少代碼行數(shù)。
2、從數(shù)組中刪除重復項
在 JavaScript 中，Set 是一個集合，它允許你僅存儲唯一值。這意味著刪除任何重復的值。
因此，要從數(shù)組中刪除重復項，你可以將其轉換為集合，然后再轉換回數(shù)組。
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]
困惑嗎？讓我解釋一下它是如何工作的：
1)、new Set(numbers)從數(shù)字列表中創(chuàng)建一個集合。創(chuàng)建集合會自動刪除所有重復值。
2）、展開運算符...將任何可迭代對象轉換為數(shù)組。這意味著將集合轉換回數(shù)組。[...new Set(numbers)]
3、 較短的 If-Else 的空合并
這也是 if-else 的簡寫。
你可以使用看漲合并，而不是使用 if-else 構造來檢查值是否為空。該nullish合并操作 ??，如果沒有定義左側返回右側。如果是，則返回左側：
let maybeSomething;// LONG FORMif(maybeSomething){console.log(maybeSomething)} else {console.log("Nothing found")}//SHORTHANDconsole.log(maybeSomething ?? "Nothing found")
4、防止崩潰的可選鏈
如果訪問未定義的屬性，則會產(chǎn)生錯誤。這就是可選鏈的用武之地。
在未定義屬性時使用可選鏈運算符，undefined將返回而不是錯誤。這可以防止你的代碼崩潰。
例如：
const student = {name: "Matt",age: 27,address: {state: "New York"},};// LONG FORMconsole.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined// SHORTHANDconsole.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined
5、在沒有第三個變量的情況下交換兩個變量
在 JavaScript 中，你可以使用解構從數(shù)組中拆分值。這可以應用于交換兩個變量而無需第三個：
let x = 1;let y = 2;// LONGER FORMlet temp = x;x = y;y = temp;// SHORTHAND[x, y] = [y, x];
6、將任何值轉換為布爾值
在 JavaScript 中，你可以使用 !! 在 JS 中將任何內(nèi)容轉換為布爾值。
例如，這里有一些例子：
!!true // true!!2 // true!![] // true!!"Test" // true!!false // false!!0 // false!!"" // false
7、擴展運算符
使用擴展運算符組合兩個數(shù)組...：
const nums1 = [1, 2, 3];const nums2 = [4, 5, 6];// LONG FORMlet newArray = nums1.concat(nums2);// SHORTHANDnewArray = [...nums1, ...nums2];
也可以使用此語法代替將值推送到數(shù)組：
let numbers = [1, 2, 3];// LONGER FORMnumbers.push(4);numbers.push(5);// SHORTHANDnumbers = [...numbers, 4, 5];
8、傳播解構
使用擴展運算符將剩余元素分配給變量：
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;
9、 使用 && 進行短路評估
不必用if語句檢查某事是否為真，你可以使用&&運算符：
var isReady = true;function doSomething(){console.log("Yay!");}// LONGER FORMif(isReady){doSomething();}// SHORTHANDisReady && doSomething();
10、類固醇的字符串
通過將字符串包裝在反引號內(nèi)并${}用于嵌入值，從而在字符串之間插入變量。
例如：
const age = 41;const sentence = `I'm ${age} years old`;// result: I'm 41 years old
11、 從數(shù)組中查找特定元素
使用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");
12、對象屬性賦值
你是否希望對象鍵與值具有相同的名稱？你可以省略對象文字來執(zhí)行此操作：
const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";// LONGER FORMconst person = {name: name,city: city,age: age,favoriteFood: favoriteFood};// SHORTHANDconst person = { name, city, age, favoriteFood };
13、壓縮 For 循環(huán)
使用內(nèi)置forEach()方法通過一行代碼循環(huán)遍歷數(shù)組：
const numbers = [1, 2, 3, 4, 5];// LONGER FORMfor(let i = 0; i < numbers.length; i++){console.log(numbers[i]);}// SHORTHANDnumbers.forEach(number => console.log(number));
14、 默認功能參數(shù)
你可以為函數(shù)參數(shù)提供默認值：
// LONG FORMfunction pickUp(fruit) {if(fruit === undefined){console.log("I picked up a Banana");} else {console.log(`I picked up a ${fruit}`);}}// SHORTHANDfunction pickUp(fruit = "Banana") {console.log(`I picked up a ${fruit}`)}pickUp("Mango"); // -> I picked up a MangopickUp(); // -> I picked up a Banana
15、將對象的值收集到數(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);
16、檢查一個項目是否存在于數(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
17、壓縮多個條件
避免使用長|| 檢查多個條件鏈，你可以使用你剛剛在上一個技巧中學到的東西——即，使用 includes() 方法：
const num = 1;// LONGER FORMif(num == 1 || num == 2 || num == 3){console.log("Yay");}// SHORTHANDif([1,2,3].includes(num)){console.log("Yay");}
18、 指數(shù)運算符
你Math.pow()習慣把一個數(shù)字提高到一個冪嗎？你知道你也可以使用**運算符嗎？
// LONGER FORMMath.pow(4,2); // 16Math.pow(2,3); // 8// SHORTHAND4**2 // 162**3 // 8
19、 Math.floor() 簡寫
四舍五入Math.floor()并不是什么新鮮事。但是你知道你也可以使用~~運算符嗎？
例如：
// LONG FORMMath.floor(5.25) // -> 5.0// SHORTHAND~~5.25 // -> 5.0
20、 用一行代碼分配多個值
使用解構語法在一行中分配多個值：
let num1, num2;// LONGER FORMnum1 = 10;num2 = 100;// SHORTHAND[] = [10, 100];
這也適用于使用 JavaScript 對象：
student = {name: "Matt",age: 29,};// LONGER FORMlet name = student.name;let age = student.age;// SHORTHANDlet { name, age } = student;
結論
我希望你喜歡它并學到了一些新東西。
感謝你的閱讀，編程快樂！
學習更多技能
請點擊下方公眾號
