15 個 JavaScript 簡寫技巧，效率提升 70%
作者：前端君
自從ES6問世以來，JavaScript的語法變得更加簡潔和易讀。下面就由前端君來給大家好好講講，如何用一些簡寫技巧來讓JavaScript代碼更加優雅。
自從ES6問世以來，JavaScript的語法變得更加簡潔和易讀。下面就由前端君來給大家好好講講，如何用一些簡寫技巧來讓JavaScript代碼更加優雅。
1. 箭頭函數
這個可是簡化函數表達式的神器，而且它沒有自己的this，用起來特別方便。
// 以前寫法
var greet = function(name) {
console.log("Hello, " + name);
};
// 現在簡化后
const greet = name => console.log(`Hello, ${name}`);2. 默認參數
給函數參數設置默認值，這樣調用函數時就不用擔心忘記傳參數了。
function createUser(name = "Guest", age = 30) {
// ...
}3. 模板字符串
用反引號來定義字符串，不僅支持多行文本，還能直接嵌入變量，簡直是太方便了。
const message = `Hello,
My name is ${name}`;4. 解構賦值
從數組或對象中直接提取數據賦值給變量，省去了中間的步驟。
對象解構：
const { prop1, prop2 } = obj;數組解構：
const [first, second] = arr;5. 展開運算符
這個運算符可以用來復制數組、合并數組或對象，用法超級靈活。
const newArray = [...oldArray];
const newObj = { ...obj1, ...obj2 };6. 計算屬性名
允許我們用表達式作為對象的鍵名，這樣就能動態地設置鍵名了。
const keyName = "dynamicKey";
const obj = {
[keyName]: "value"
};7. 簡化的對象方法定義
定義對象的方法時，可以省略function關鍵字，讓代碼更加簡潔。
const obj = {
method() {
// 方法體
}
};8. 類的簡寫
在類中定義方法時，也可以省略function關鍵字，還能用static關鍵字定義靜態方法，真是省心省力。
class MyClass {
constructor() {}
method() {}
static staticMethod() {}
}9. 簡單的getter/setter
簡化了對象屬性的讀取和設置，用起來特別直觀。
class Person {
constructor(age) {
this._age = age;
}
get age() {
return this._age;
}
set age(value) {
this._age = value;
}
}10. for...of循環
遍歷可迭代對象（比如數組、字符串、Map、Set等）的元素，用起來特別方便。
for (let value of iterable) {
console.log(value);
}11. Promise 和 async/await
這個組合真是異步操作的救星，讓咱們可以用同步的方式寫出異步代碼，特別是async/await避免了煩人的回調地獄。
async function fetchData() {
try {
let response = await fetch(url);
let data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}12. 省略分號
雖然這不是推薦的做法，但JavaScript會自動插入分號，在某些情況下可以省略它們，不過還是建議大家為了代碼的可讀性，盡量不要省略分號。
13. 運算符簡寫
- 三元運算符：代替簡單的if...else語句，讓代碼更加簡潔。
const result = condition ? trueValue : falseValue;- 邏輯運算符賦值：&&=, ||=, ??=分別代表邏輯與賦值、邏輯或賦值、空值合并賦值。
let x;
x ||= "default"; // 如果x是falsey，則賦值"default"- 空值合并運算符：??用于處理null或undefined。
const userSetting = userPref ?? 'default';14. import/export模塊化
簡化了模塊的導入導出，讓代碼的組織更加清晰。
// 導入所有成員
import * as lib from './lib';
// 導出多個成員
export { member1, member2 };
// 默認導出
export default class MyClass {};15. Rest 參數
這個參數可以收集剩余的參數到一個數組中，特別適合處理可變數量的參數。
function sum(...args) {
return args.reduce((a, b) => a + b, 0);
}以上這些技術都能幫助我們寫出更加簡潔、高效的JavaScript代碼。不過，咱們在追求代碼簡潔的同時，也一定要注意保持代碼的可讀性和維護性，大家在實際開發中，還是要根據具體情況來選擇合適的簡寫方式哦！
責任編輯：武曉燕
來源：
前端新世界
