1. 解構(gòu)賦值與重命名

在解構(gòu)對(duì)象時(shí)，可以直接重命名變量，避免命名沖突。

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

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

應(yīng)用場(chǎng)景：從 API 返回的數(shù)據(jù)中提取字段時(shí)，字段名與現(xiàn)有變量沖突。

2. 快速移除數(shù)組中的假值

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

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

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

應(yīng)用場(chǎng)景：清理用戶輸入或 API 返回的數(shù)組。

3. 數(shù)組去重

使用 Set 快速去重。

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

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

應(yīng)用場(chǎng)景：處理重復(fù)數(shù)據(jù)時(shí)。

4. 按屬性對(duì)對(duì)象數(shù)組排序

使用 sort() 方法輕松實(shí)現(xiàn)對(duì)象數(shù)組排序。

css
代碼解讀
復(fù)制代碼
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 }]

應(yīng)用場(chǎng)景：對(duì)用戶列表、商品列表等數(shù)據(jù)排序。

5. 數(shù)組扁平化

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

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

應(yīng)用場(chǎng)景：處理嵌套 JSON 數(shù)據(jù)或數(shù)組。

6. 快速獲取數(shù)組最后一項(xiàng)

使用 arr.at(-1) 獲取數(shù)組最后一項(xiàng)。

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

應(yīng)用場(chǎng)景：處理?xiàng)；蜿?duì)列時(shí)。

7. 生成連續(xù)數(shù)字?jǐn)?shù)組

使用 Array 和 keys() 快速生成連續(xù)數(shù)字?jǐn)?shù)組。

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

應(yīng)用場(chǎng)景：生成索引或序列。

8. 合并對(duì)象

使用擴(kuò)展運(yùn)算符合并對(duì)象。

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

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

應(yīng)用場(chǎng)景：合并配置或狀態(tài)對(duì)象。

9. 快速刪除對(duì)象屬性

通過(guò)解構(gòu)賦值刪除對(duì)象中的某些屬性。

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

應(yīng)用場(chǎng)景：清理對(duì)象中的無(wú)用字段。

10. 首字母大寫

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

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

應(yīng)用場(chǎng)景：格式化用戶輸入或顯示內(nèi)容。

11. 記憶化函數(shù)

緩存函數(shù)結(jié)果，避免重復(fù)計(jì)算。

ini
代碼解讀
復(fù)制代碼
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 (從緩存中獲取)

應(yīng)用場(chǎng)景：優(yōu)化計(jì)算密集型函數(shù)。

12. 防抖函數(shù)

限制高頻觸發(fā)的函數(shù)調(diào)用。

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

應(yīng)用場(chǎng)景：搜索框輸入、窗口調(diào)整大小事件。

13. 節(jié)流函數(shù)

控制函數(shù)調(diào)用頻率。

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

應(yīng)用場(chǎng)景：滾動(dòng)事件、鼠標(biāo)移動(dòng)事件。

14. 安全訪問(wèn)嵌套屬性

使用可選鏈操作符安全訪問(wèn)嵌套屬性。

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

應(yīng)用場(chǎng)景：避免訪問(wèn)未定義屬性時(shí)報(bào)錯(cuò)。

15. 空值合并運(yùn)算符

為變量提供默認(rèn)值。

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

應(yīng)用場(chǎng)景：處理空值或未定義值。

16. 格式化日期

使用 Intl.DateTimeFormat 格式化日期。

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

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

應(yīng)用場(chǎng)景：國(guó)際化項(xiàng)目中顯示用戶友好的日期格式。

17. 生成隨機(jī)顏色

快速生成隨機(jī)顏色。

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

應(yīng)用場(chǎng)景：動(dòng)態(tài)生成顏色主題。

18. Promise 超時(shí)處理

為異步操作設(shè)置超時(shí)時(shí)間。

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

應(yīng)用場(chǎng)景：網(wǎng)絡(luò)請(qǐng)求超時(shí)處理。

19. localStorage 封裝

封裝 localStorage，簡(jiǎn)化數(shù)據(jù)存儲(chǔ)。

javascript
代碼解讀
復(fù)制代碼
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' }

應(yīng)用場(chǎng)景：本地存儲(chǔ)用戶數(shù)據(jù)。

20. 優(yōu)雅的 console.log

為日志添加時(shí)間戳和樣式。

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

應(yīng)用場(chǎng)景：調(diào)試時(shí)更清晰地查看日志。