20 個 js 實用技巧，讓你代碼更簡潔高效

1. 解構賦值與重命名

在解構對象時，可以直接重命名變量，避免命名沖突。

arduino
代碼解讀
復制代碼
const user = { name: 'yun', age: 25 };
const { name: userName, age: userAge } = user;

console.log(userName); // yun
console.log(userAge);  // 25

應用場景：從 API 返回的數據中提取字段時，字段名與現有變量沖突。

2. 快速移除數組中的假值

filter(Boolean) 是清理數組中無效值的利器。

ini
代碼解讀
復制代碼
const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);

console.log(filtered); // ["hello", 42, "world"]

應用場景：清理用戶輸入或 API 返回的數組。

3. 數組去重

使用 Set 快速去重。

ini
代碼解讀
復制代碼
const arr = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(arr)];

console.log(unique); // [1, 2, 3, 4]

應用場景：處理重復數據時。

4. 按屬性對對象數組排序

使用 sort() 方法輕松實現對象數組排序。

css
代碼解讀
復制代碼
const users = [  { name: 'yun', age: 25 },  { name: 'mu', age: 20 }];
users.sort((a, b) => a.age - b.age);

console.log(users);
// [{ name: 'yun', age: 20 }, { name: 'mu', age: 25 }]

應用場景：對用戶列表、商品列表等數據排序。

5. 數組扁平化

使用 Array.flat(Infinity) 展平多層嵌套數組。

ini
代碼解讀
復制代碼
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]

應用場景：處理嵌套 JSON 數據或數組。

6. 快速獲取數組最后一項

使用 arr.at(-1) 獲取數組最后一項。

ini
代碼解讀
復制代碼
const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4

應用場景：處理棧或隊列時。

7. 生成連續數字數組

使用 Array 和 keys() 快速生成連續數字數組。

ini
代碼解讀
復制代碼
const numbers = [...Array(5).keys()];
console.log(numbers); // [0, 1, 2, 3, 4]

應用場景：生成索引或序列。

8. 合并對象

使用擴展運算符合并對象。

ini
代碼解讀
復制代碼
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 2 }

應用場景：合并配置或狀態對象。

9. 快速刪除對象屬性

通過解構賦值刪除對象中的某些屬性。

yaml
代碼解讀
復制代碼
const { unwanted, ...rest } = { unwanted: 0, a: 1, b: 2 };
console.log(rest); // { a: 1, b: 2 }

應用場景：清理對象中的無用字段。

10. 首字母大寫

快速將字符串首字母大寫。

python
代碼解讀
復制代碼
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
console.log(capitalize('hello')); // 'Hello'

應用場景：格式化用戶輸入或顯示內容。

11. 記憶化函數

緩存函數結果，避免重復計算。

ini
代碼解讀
復制代碼
const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
};

const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);

console.log(memoizedSquare(4)); // 16
console.log(memoizedSquare(4)); // 16 (從緩存中獲取)

應用場景：優化計算密集型函數。

12. 防抖函數

限制高頻觸發的函數調用。

javascript
代碼解讀
復制代碼
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

應用場景：搜索框輸入、窗口調整大小事件。

13. 節流函數

控制函數調用頻率。

ini
代碼解讀
復制代碼
function throttle(fn, delay) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= delay) {
      fn.apply(this, args);
      last = now;
    }
  };
}

應用場景：滾動事件、鼠標移動事件。

14. 安全訪問嵌套屬性

使用可選鏈操作符安全訪問嵌套屬性。

sql
代碼解讀
復制代碼
const user = { address: { street: 'Main St' } };
console.log(user?.address?.street); // 'Main St'
console.log(user?.contact?.phone); // undefined

應用場景：避免訪問未定義屬性時報錯。

15. 空值合并運算符

為變量提供默認值。

ini
代碼解讀
復制代碼
const value = null ?? 'default';
console.log(value); // 'default'

應用場景：處理空值或未定義值。

16. 格式化日期

使用 Intl.DateTimeFormat 格式化日期。

javascript
代碼解讀
復制代碼
const date = new Date();
const formatted = new Intl.DateTimeFormat('zh-CN', {
  dateStyle: 'full',
}).format(date);

console.log(formatted); // 2024年11月24日星期日

應用場景：國際化項目中顯示用戶友好的日期格式。

17. 生成隨機顏色

快速生成隨機顏色。

javascript
代碼解讀
復制代碼
const randomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
console.log(randomColor()); // '#a3e12f'

應用場景：動態生成顏色主題。

18. Promise 超時處理

為異步操作設置超時時間。

javascript
代碼解讀
復制代碼
const timeout = (promise, ms) => {
  return Promise.race([
    promise,
    new Promise((_, reject) => setTimeout(() => reject('timeout'), ms))
  ]);
};

應用場景：網絡請求超時處理。

19. localStorage 封裝

封裝 localStorage，簡化數據存儲。

javascript
代碼解讀
復制代碼
const storage = {
  set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
  get: (key) => JSON.parse(localStorage.getItem(key)),
};

storage.set('user', { name: 'Yun' });
console.log(storage.get('user')); // { name: 'Yun' }

應用場景：本地存儲用戶數據。

20. 優雅的 console.log

為日志添加時間戳和樣式。

javascript
代碼解讀
復制代碼
const log = (...args) => console.log(`%c[${new Date().toLocaleTimeString()}]`, 'color: #bada55', ...args);
log('Hello, world!'); // [12:34:56] Hello, world!

應用場景：調試時更清晰地查看日志。