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