25個實用的JavaScript開發(fā)小技巧
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";
請記住，這種速記旨在使代碼更簡潔，并在簡單的if-else 語句中保存代碼行，如上面的語句。不要過度使用它，因為它會降低代碼的可讀性！
2、 空合并
空合并運算符 ?? ，如果左側(cè)未定義，則返回右側(cè)。如果是，則返回左側(cè)：
let maybeSomething;// LONG FORMif(maybeSomething){console.log(maybeSomething)} else {console.log("Nothing found")}//SHORTHANDconsole.log(maybeSomething ?? "Nothing found")
3、可選鏈
如果你使用運算符訪問對象的屬性，但未定義該屬性，則會引發(fā)錯誤。這是使用可選鏈接的地方。
如果你使用可選鏈運算符？，并且屬性未定義，返回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
4、將任何值轉(zhuǎn)換為布爾值
使用雙感嘆號 (!!) 在 JS 中將任何內(nèi)容轉(zhuǎn)換為布爾值。
!!true // true!!2 // true!![] // true!!"Test" // true!!false // false!!0 // false!!"" // false
5、擴展運算符
你可以使用擴展運算符 (...) 將一個數(shù)組的元素“擴展”到另一個數(shù)組中。例如，讓我們連接兩個數(shù)字?jǐn)?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];
6、使用擴展運算符進行解構(gòu)
你可以使用帶有解構(gòu)的擴展運算符將剩余元素分配給新變量：
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;
在上面的例子中，city和state屬性被分配給一個address常量作為剩余部分。
7、從數(shù)組中刪除重復(fù)項
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]
8、 使用 && 進行短路評估
不必用if語句檢查某事是否為真，你可以使用&&運算符：
var isReady = true;function doSomething(){console.log("Yay!");}// LONGER FORMif(isReady){doSomething();}// SHORTHANDisReady && doSomething();
9、 類固醇的字符串
你可以通過將字符串包裝在反引號內(nèi)并使用${}來嵌入值來直接將變量嵌入到字符串中：
const age = 41;const sentence = `I'm ${age} years old`;// result: I'm 41 years old
10、Switch-Case 更短的替代方案
你可以使用具有與鍵關(guān)聯(lián)的函數(shù)名稱的對象來替換switch語句：
const num = 3// LONGER FORMswitch (num) {case 1:someFunction();break;case 2:someOtherFunction();break;case 3:yetAnotherFunction();break;}// SHORTHANDvar cases = {1: someFunction,2: someOtherFunction,3: yetAnotherFunction,};cases[num]();
不，我沒有忘記在cases對象中調(diào)用函數(shù)！
11、對象屬性分配
如果你希望對象鍵與值具有相同的名稱，則可以省略對象文字：
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 };
12、箭頭函數(shù)
與使用function關(guān)鍵字聲明函數(shù)不同，使用箭頭函數(shù)語法會更清晰：
// LONGER FORMfunction greetLong(name) {console.log(`Hi, ${name}`);}// SHORTHANDconst greetShort = name => console.log(`Hi, ${name}`);
注意：在本例中，由于函數(shù)中只有一個表達式，你可以省略大括號 ( {})。但是，如果表達式需要多于一行，則需要使用大括號！
13、不帶返回關(guān)鍵字返回
使用箭頭函數(shù)時，如果return函數(shù)中只有一個表達式，則可以省略關(guān)鍵字和函數(shù)的花括號：
// LONGER FORMfunction toPoundsLong(kilos) {return kilos * 2.205;}// SHORTHANDconst toPoundsShort = kilos => kilos * 2.205;
14、更短的 for 循環(huán)
for有時你可能希望使用內(nèi)置forEach()方法更簡潔地循環(huán)，而不是在集合上使用循環(huán)：
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));
15、 函數(shù)參數(shù)的默認(rèn)值
在 JavaScript 中，你可以為函數(shù)參數(shù)提供默認(rèn)值，以便可以帶或不帶參數(shù)調(diào)用函數(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
順便說一句，你還可以使用箭頭函數(shù)使其更短！
const pick = (fruit = "Banana") => console.log(`I picked up a ${fruit}`)16、聲明變量
你可以像這樣巧妙地將變量聲明組合成一行：
// LONGER FORMlet name;let age;let favoriteFood = "Pizza";// SHORTHANDlet name, age, favoriteFood = "Pizza";
17、 將值放入數(shù)組
你可以使用Object.values()獲取對象的值并將它們放入數(shù)組而不是循環(huán)：
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);
18、在數(shù)組中查找元素
使用數(shù)組的內(nèi)置find()方法查找與特定條件匹配的元素，而不是使用冗長的循環(huán)：
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");
19、檢查一個項目是否在數(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
20、檢查多個條件
避免長|| 檢查多個條件鏈時，你可以使用你剛剛在上一個技巧中學(xué)到的東西——即，使用 includes() 方法：
const num = 1;// LONGER FORMif(num == 1 || num == 2 || num == 3){console.log("Yay");}// SHORTHANDif([1,2,3].includes(num)){console.log("Yay");}
21、使用一行分配多個值
你可以使用解構(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;
22、在沒有第三個變量的情況下交換兩個變量
在 JavaScript 中，您可以使用解構(gòu)從數(shù)組中提取值。這也可用于在沒有第三個幫助程序的情況下交換兩個變量：
let x = 1;let y = 2;// LONGER FORMlet temp = x;x = y;y = temp;// SHORTHAND[] = [y, x];
23、指數(shù)運算符
你可以使用 ** 運算符，而不是使用 Math.pow() 函數(shù)來將數(shù)字求冪：
// LONGER FORMMath.pow(4,2); // 16Math.pow(2,3); // 8// SHORTHAND4**2 // 162**3 // 8
24、舍入數(shù)字時 Math.floor 的簡寫
你可以使用 ~~ 運算符，而不是使用 Math.floor() 函數(shù)來向下舍入數(shù)字：
// LONG FORMMath.floor(5.25) // -> 5.0// SHORTHAND~~5.25 // -> 5.0
25、將字符串轉(zhuǎn)換為數(shù)字
你可以使用一元運算符 ( +) 將字符串轉(zhuǎn)換為數(shù)字：
// LONGER FORMconst num = parseInt("1000");// SHORTHANDconst num = +"1000";
我想將這個速記包括在列表中，但人們可能會爭論它是否有用，因為它實際上看起來有點令人困惑。
感謝你的閱讀。
學(xué)習(xí)更多技能
請點擊下方公眾號
