20 個(gè)提高效率的 JavaScript 縮寫(xiě)技巧
JavaScript中有很多速記技巧，可以縮短代碼長(zhǎng)度，減少冗余，提高代碼的可讀性和可維護(hù)性。本文將介紹20個(gè)提高效率的JS縮寫(xiě)技巧，幫助你告別寫(xiě)垃圾的生活，輕松寫(xiě)出優(yōu)雅的代碼！
01、從數(shù)組中刪除假值
您可以使用 filter() 組合布爾值來(lái)簡(jiǎn)化從數(shù)組中刪除假值的過(guò)程。false 值是指將 false 視為條件的值，例如 null、未定義、空字符串（“”或 ''）、0、NaN 和 false。
傳統(tǒng)寫(xiě)法：
let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];let filterArray = arr.filter(value => {if(value) {return value};});// [12, 'xyz', -25, 0.5]
簡(jiǎn)化寫(xiě)法：
let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];let filterArray = arr.filter(value => Boolean(value)); // [12, 'xyz', -25, 0.5]
更簡(jiǎn)化的寫(xiě)法：
let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];let filterArray = arr.filter(Boolean); // [12, 'xyz', -25, 0.5]
Boolean 是 JavaScript 的內(nèi)置構(gòu)造函數(shù)，通過(guò)將值傳遞給它來(lái)將值轉(zhuǎn)換為布爾值。在本例中，Boolean 構(gòu)造函數(shù)作為回調(diào)函數(shù)傳遞給 filter() 方法，從而將每個(gè)數(shù)組元素轉(zhuǎn)換為布爾值。只有轉(zhuǎn)換結(jié)果為 true 的元素才會(huì)保留在新數(shù)組中。
注意：該方法也會(huì)過(guò)濾掉0。如果不需要過(guò)濾掉0，則需要額外判斷。
02、數(shù)組搜索
當(dāng)搜索數(shù)組時(shí)，indexOf()用于獲取搜索項(xiàng)的位置。如果未找到該項(xiàng)目，則返回值為-1。在 JavaScript 中，0 被視為 false，大于或小于 0 的數(shù)字被視為 true。因此，需要這樣寫(xiě)：
傳統(tǒng)寫(xiě)法：
if(arr.indexOf(item) > -1) {}if(arr.indexOf(item) === -1) {}
簡(jiǎn)化寫(xiě)法：
if(~arr.indexOf(item)) {}if(!~arr.indexOf(item)) {}
按位 NOT (~) 運(yùn)算符對(duì)于除 -1 之外的任何值都返回“真”值。要否定它，只需使用 !~ 即可?；蛘撸梢允褂胕ncludes()函數(shù)：
if(arr.includes(item)) {}
03、空值合并運(yùn)算符
null 合并運(yùn)算符 (??) 用于為 null 或 .undefined 的變量提供默認(rèn)值
傳統(tǒng)寫(xiě)法：
const fetchUserData = () => {return 'Xiuer Old';};const data = fetchUserData();const username = data !== null && data !== undefined ? data : 'Guest';
簡(jiǎn)化寫(xiě)法：
const fetchUserData = () => {return 'Xiuer Old';};const data = fetchUserData();const username = data ?? 'medium';
另外，還有一個(gè)空合并賦值運(yùn)算符（??=），用于當(dāng)變量為空（null或undefined）時(shí)執(zhí)行賦值操作。
傳統(tǒng)寫(xiě)法：
let variable1 = null;let variable2 = "Xiuer Old";if (variable1 === null || variable1 === undefined) {variable1 = variable2;}
簡(jiǎn)化寫(xiě)法：
let variable1 = null;let variable2 = "Xiuer Old";variable1 ??= variable2;
??=寫(xiě)法更簡(jiǎn)潔，更容易閱讀。它首先檢查變量 1 是否為 null 或未定義，如果是，則將值賦給變量 2。如果variable1已經(jīng)有一個(gè)非空值，則不會(huì)發(fā)生賦值。
04、邏輯或賦值運(yùn)算符
邏輯或賦值運(yùn)算符 (||=) 用于為變量指定默認(rèn)值。
傳統(tǒng)寫(xiě)法：
let count;if (!count) {count = 0;}
簡(jiǎn)化寫(xiě)法：
let count;count ||= 0;
當(dāng) count 為假值（例如 undefined、null、false、0、NaN 或空字符串）時(shí)，邏輯 OR 賦值運(yùn)算符將賦值 0。count 否則，它保留 count 的原始值。
05、多值匹配
對(duì)于多個(gè)值的匹配，可以將所有值放入一個(gè)數(shù)組中，然后使用indexOf()方法進(jìn)行檢查。indexOf() 方法是 JavaScript 數(shù)組的內(nèi)置方法，用于返回指定元素在數(shù)組中第一次出現(xiàn)的位置索引。如果數(shù)組中不存在該元素，則返回-1。
傳統(tǒng)寫(xiě)法：
if (value === 1 || value === 'one' || value === 2 || value === 'two') {// ...}
簡(jiǎn)化寫(xiě)法：
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {// ...}
06、三元表達(dá)式
這可以使用三元表達(dá)式 if...else 來(lái)簡(jiǎn)化。
傳統(tǒng)寫(xiě)法：
let isAdmin;if (user.role === 'admin') {isAdmin = true;} else {isAdmin = false;}
簡(jiǎn)化寫(xiě)法：
const isAdmin = user.role === 'admin' ? true : false;更簡(jiǎn)化的寫(xiě)法：
const isAdmin = user.role === 'admin';07、短路評(píng)估
將一個(gè)變量的值分配給另一個(gè)變量時(shí)，您可能需要確保源變量不為 null、未定義或?yàn)榭?。您可以編?xiě)包含多個(gè)條件的長(zhǎng) if 語(yǔ)句，或使用短路求值來(lái)簡(jiǎn)化。
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {let variable2 = variable1;}
使用短路評(píng)估簡(jiǎn)化的代碼如下：
const variable2 = variable1 || 'new';對(duì)于邏輯 OR (||) 運(yùn)算符，以下值被視為 false：
false
0
空字符串（“”或“”）
null
undefined
NaN
因此，如果值本身可能是其中之一，則不適合使用短路評(píng)估。
短路評(píng)估還可以避免函數(shù)調(diào)用中不必要的函數(shù)執(zhí)行。
傳統(tǒng)寫(xiě)法：
function fetchData() {if (shouldFetchData) {return fetchDataFromAPI();} else {return null;}}
簡(jiǎn)化寫(xiě)法：
function fetchData() {return shouldFetchData && fetchDataFromAPI();}
當(dāng) shouldFetchData 為 true 時(shí)，短路評(píng)估繼續(xù)執(zhí)行函數(shù)的 fetchDataFromAPI() 并返回其結(jié)果。如果shouldFetchData為假值，短路求值將直接返回假值（null），避免不必要的函數(shù)調(diào)用。
08、科學(xué)計(jì)數(shù)法
可以使用科學(xué)和技術(shù)方法來(lái)表示數(shù)字以省略尾隨零。例如，1e7it 實(shí)際上意味著 1 后面跟著 7 個(gè)零。它代表 10,000,000 的十進(jìn)制等值。
傳統(tǒng)寫(xiě)法：
for (let i = 0; i < 10000; i++) {}簡(jiǎn)化寫(xiě)法：
for (let i = 0; i < 1e7; i++) {}下面的所有比較都將返回 true1e0 === 1;1e1 === 10;1e2 === 100;1e3 === 1000;1e4 === 10000;1e5 === 100000;
09、位運(yùn)算符
雙位 NOT 運(yùn)算符有一個(gè)非常實(shí)際的用途，您可以用它來(lái)替換 Math.floor() 函數(shù)，在執(zhí)行相同操作時(shí)速度更快。
傳統(tǒng)寫(xiě)法：
Math.floor(4.9) === 4 //true簡(jiǎn)化寫(xiě)法：
~~4.9 === 4 //true10、指數(shù)求冪
指數(shù)求冪運(yùn)算可以使用 * 來(lái)簡(jiǎn)化。
傳統(tǒng)寫(xiě)法：
Math.pow(2,3); // 8Math.pow(2,2); // 4Math.pow(4,3); // 64
簡(jiǎn)化寫(xiě)法：
2**3 // 82**4 // 44**3 // 64
從ES7（ECMAScript 2016）開(kāi)始，JavaScript引入了指數(shù)冪運(yùn)算符**，使指數(shù)冪運(yùn)算更加簡(jiǎn)潔。
11、雙非運(yùn)算符
在 JavaScript 中，雙非按位運(yùn)算符 ~~ 可用于對(duì)數(shù)字進(jìn)行向下舍入，類(lèi)似于 Math.floor() 方法的功能。
傳統(tǒng)寫(xiě)法：
const floor = Math.floor(6.8); // 6簡(jiǎn)化寫(xiě)法：
const floor = ~~6.8; // 6注：雙非位運(yùn)算符僅適用于 32 位整數(shù)，即范圍為 -(231) 到 (231)-1，即 -2147483648 到 2147483647。雙非位運(yùn)算符 ( ~~ ) 對(duì)于大于 2147483647 或小于 0 的數(shù)字給出不正確的結(jié)果，因此建議在這種情況下使用 Math.floor() 方法。
12、對(duì)象屬性
ES6 提供了一種更簡(jiǎn)單的方法來(lái)為對(duì)象分配屬性。如果變量名與對(duì)象的鍵名相同，則可以使用縮寫(xiě)表示法進(jìn)行賦值。
傳統(tǒng)寫(xiě)法：
= '微信公眾號(hào)：web前端開(kāi)發(fā)';const age = 18;const person = {name: name,age: age};
簡(jiǎn)化寫(xiě)法：
const name = 'Yangxiaoai';const age = 30;const person = {name,age};
13、箭頭函數(shù)
箭頭函數(shù)可以簡(jiǎn)化經(jīng)典函數(shù)的編寫(xiě)。
傳統(tǒng)寫(xiě)法：
function sayHello(name) {console.log('Hello', name);}setTimeout(function() {console.log('Loaded')}, 2000);list.forEach(function(item) {console.log(item);});
簡(jiǎn)化寫(xiě)法：
sayHello = name => console.log('Hello', name);setTimeout(() => console.log('Loaded'), 2000);list.forEach(item => console.log(item));
如果箭頭函數(shù)只有一條語(yǔ)句，它將隱式返回其計(jì)算結(jié)果，并且 returnthe 關(guān)鍵字可以省略：
傳統(tǒng)寫(xiě)法：
function calcCircumference(diameter) {return Math.PI * diameter}
簡(jiǎn)化寫(xiě)法：
calcCircumference = diameter => (Math.PI * diameter;)
14、參數(shù)解構(gòu)
如果使用一些流行的 Web 框架，例如 React 和 Vue，可以使用數(shù)組或?qū)ο笪淖中问降臄?shù)據(jù)在組件之間傳遞信息。要在組件中使用數(shù)據(jù)對(duì)象，需要對(duì)它們進(jìn)行解構(gòu)。
傳統(tǒng)寫(xiě)法：
const observable = require('mobx/observable');const action = require('mobx/action');const runInAction = require('mobx/runInAction');const store = this.props.store;const form = this.props.form;const loading = this.props.loading;const errors = this.props.errors;const entity = this.props.entity;
簡(jiǎn)化寫(xiě)法：
import { observable, action, runInAction } from 'mobx';const { store, form, loading, errors, entity } = this.props;
還可以為變量指定新的變量名稱(chēng)：
const { store, form, loading, errors, entity:contact } = this.props;15、擴(kuò)展運(yùn)算符
ES6中引入的擴(kuò)展運(yùn)算符可以簡(jiǎn)化一些對(duì)數(shù)組和對(duì)象的操作。
傳統(tǒng)寫(xiě)法：
// Merge arraysconst odd = [1, 3, 5];const nums = [2, 4, 6].concat(odd);// Clone an arrayconst arr = [1, 2, 3, 4];const arr2 = arr.slice();
簡(jiǎn)化寫(xiě)法：
// Merge arraysconst odd = [1, 3, 5];const nums = [2, 4, 6, ...odd];console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]// Clone an arrayconst arr = [1, 2, 3, 4];const arr2 = [...arr];
與 concat() 函數(shù)不同，可以使用展開(kāi)運(yùn)算符將一個(gè)數(shù)組插入到另一個(gè)數(shù)組中的任意位置。
const odd = [1, 3, 5];const nums = [2, ...odd, 4, 6];
你還可以將擴(kuò)展運(yùn)算符與 ES6 的解構(gòu)語(yǔ)法結(jié)合使用：
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };console.log(a) // 1console.log(b) // 2console.log(z) // { c: 3, d: 4 }
擴(kuò)展運(yùn)算符還可以用于合并對(duì)象：
傳統(tǒng)寫(xiě)法：
let fname = { firstName : 'medium' };let lname = { lastName : 'xiuer'}let full_names = Object.assign(fname, lname);
簡(jiǎn)化寫(xiě)法：
let full_names = {...fname, ...lname};16、強(qiáng)制參數(shù)
在傳統(tǒng)的JavaScript編寫(xiě)中，為了確保函數(shù)參數(shù)傳入一個(gè)有效的值，我們需要使用條件語(yǔ)句來(lái)拋出錯(cuò)誤。通過(guò)使用強(qiáng)制參數(shù)縮寫(xiě)可以實(shí)現(xiàn)相同的邏輯。
傳統(tǒng)寫(xiě)法：
function foo(bar) {if(bar === undefined) {throw new Error('Missing parameter!');}return bar;}
簡(jiǎn)化寫(xiě)法：
mandatory = () => {throw new Error('Missing parameter!');}foo = (bar = mandatory()) => {return bar;}
這里定義了一個(gè)名為強(qiáng)制的函數(shù)，拋出錯(cuò)誤，表明函數(shù)參數(shù)沒(méi)有傳入。然后，在 foo 函數(shù)的參數(shù)列表中，使用分配默認(rèn)值的方法將參數(shù)設(shè)置為強(qiáng)制（）調(diào)用 結(jié)果。如果 bar 沒(méi)有傳入?yún)?shù)或者傳入了 false 值，會(huì)觸發(fā) Mustadal() 函數(shù)的執(zhí)行。
17、轉(zhuǎn)換為布爾值
使用雙邏輯 NOT 運(yùn)算符可以將任何值轉(zhuǎn)換為布爾值。
!!23 // TRUE!!"" // FALSE!!0 // FALSE!!{} // TRUE
單個(gè)邏輯 NOT 運(yùn)算符已經(jīng)可以將值轉(zhuǎn)換為布爾類(lèi)型并對(duì)它取反，因此，第二個(gè)邏輯 NOT 運(yùn)算符再次對(duì)其取反，將其返回到其原始含義并將其保留為布爾類(lèi)型。
18、變量交換
使用數(shù)組解構(gòu)可以輕松實(shí)現(xiàn)變量交換。
傳統(tǒng)寫(xiě)法（使用臨時(shí)變量完成兩個(gè)變量的交換）：
let a = 5;let b = 10;const temp = a;a = b;b = temp;
簡(jiǎn)化寫(xiě)法（使用數(shù)組解構(gòu)賦值完成兩個(gè)變量的交換）：
let a = 5;let b = 10;[] = [b, a];
這里我們創(chuàng)建一個(gè)包含兩個(gè)元素[b, a]的數(shù)組，然后，使用數(shù)組解構(gòu)賦值將值分別賦給變量a和b。由于左邊的數(shù)組和右邊的數(shù)組結(jié)構(gòu)相同，所以交換兩個(gè)值。
19、變量聲明
當(dāng)需要同時(shí)聲明多個(gè)變量時(shí)，可以使用變量聲明的簡(jiǎn)寫(xiě)方法，以節(jié)省時(shí)間和空間。
傳統(tǒng)寫(xiě)法：
let x;let y;let z = 3;
簡(jiǎn)化寫(xiě)法：
let x, y, z = 3;不過(guò)，這種優(yōu)化存在一些爭(zhēng)議。很多人認(rèn)為這樣寫(xiě)會(huì)影響代碼的可讀性，因?yàn)橐恍袑?xiě)了很多變量，不如一行一個(gè)變量那么清晰，所以可以有選擇地采用。
如果有多個(gè)變量需要賦予相同的值，可以使用連續(xù)相等來(lái)實(shí)現(xiàn)。
傳統(tǒng)寫(xiě)法：
let a = 100;let b = 100;let c = 100;
簡(jiǎn)化寫(xiě)法：
let a = b = c = 100;20、For循環(huán)
JavaScript 中傳統(tǒng)的 for 循環(huán)語(yǔ)法使用數(shù)組的長(zhǎng)度作為迭代器來(lái)遍歷數(shù)組。 還有許多 for 循環(huán)快捷方式提供了迭代數(shù)組中對(duì)象的不同方式，例如：
for...of：用于遍歷內(nèi)置字符串、數(shù)組、類(lèi)數(shù)組對(duì)象、NodeList。
for...in：一個(gè)字符串，用于訪問(wèn)數(shù)組的索引并遍歷對(duì)象字面量，并記錄屬性名稱(chēng)和值。
Array.forEach：使用回調(diào)函數(shù)對(duì)數(shù)組元素及其索引執(zhí)行操作。
傳統(tǒng)寫(xiě)法：
for (let i = 0; i < arr.length; i++) {console.log("item: ", arr[i]);}}
簡(jiǎn)化寫(xiě)法：
for (let str of arr) {console.log("item: ", str);}arr.forEach((str) => {console.log("item: ", str);});for (let index in arr) {console.log(index, arr[index]);}
對(duì)于對(duì)象字面量，還可以使用 for...in 來(lái)遍歷：
const obj = { a: 1, b: 3, c: 5 };for (let key in obj) {console.log(key, obj[key]);}
總結(jié)
以上就是我今天想與你分享的20個(gè)關(guān)于JavaScript的縮寫(xiě)技巧，希望這些技巧能夠?qū)δ阌兴鶐椭?，如果你覺(jué)得有用的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，這樣，你將會(huì)閱讀到更多優(yōu)質(zhì)文章內(nèi)容，以幫助你學(xué)習(xí)能夠有用有趣的知識(shí)。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
