16 個 JavaScript 簡寫神技，提效 60%！
作者：story
本文分享 16 個最常用的 JavaScript 的簡寫技巧，掌握它們可以讓我們編寫出更簡潔、更優雅的代碼，并顯著提升開發效率（增加摸魚時間）。
JavaScript 是一門強大且靈活的語言，擁有豐富的特性和語法糖。分享下 16 個最常用的 JavaScript 的簡寫技巧，掌握它們可以讓我們編寫出更簡潔、更優雅的代碼，并顯著提升開發效率（增加摸魚時間）。
1. 三元運算符簡化條件判斷
// 傳統寫法
let result;
if (someCondition) {
result = 'yes';
} else {
result = 'no';
}
// 簡寫方式
const result = someCondition ? 'yes' : 'no';2. 空值合并運算符
// 傳統寫法
const name = user.name !== null && user.name !== undefined ? user.name : 'default';
// 簡寫方式
const name = user.name ?? 'default';3. 可選鏈操作符
// 傳統寫法
const street = user && user.address && user.address.street;
// 簡寫方式
const street = user?.address?.street;4. 數組去重
// 傳統寫法
function unique(arr) {
return arr.filter((item, index) => arr.indexOf(item) === index);
}
// 簡寫方式
const unique = arr => [...new Set(arr)];5. 快速取整
// 傳統寫法
const floor = Math.floor(4.9);
// 簡寫方式
const floor = ~~4.9;6. 合并對象
// 傳統寫法
const merged = Object.assign({}, obj1, obj2);
// 簡寫方式
const merged = {...obj1, ...obj2};7. 短路求值
// 傳統寫法
if (condition) {
doSomething();
}
// 簡寫方式
condition && doSomething();8. 默認參數值
// 傳統寫法
function greet(name) {
name = name || 'Guest';
console.log(`Hello ${name}`);
}
// 簡寫方式
const greet = (name = 'Guest') => console.log(`Hello ${name}`);9. 解構賦值
10. 字符串轉數字
11. 多重條件判斷
12. 快速冪運算
13. 對象屬性簡寫
14. 數組映射
15. 交換變量值
16. 動態對象屬性
// 傳統寫法
const obj = {};
obj[dynamic + 'name'] = value;
// 簡寫方式
const obj = {
[`${dynamic}name`]: value
};責任編輯：趙寧寧
來源：
JavaScript
