自從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代碼。不過，咱們在追求代碼簡潔的同時，也一定要注意保持代碼的可讀性和維護性，大家在實際開發中，還是要根據具體情況來選擇合適的簡寫方式哦！

閱讀原文：原文鏈接