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. 空值合并運算符
3. 可選鏈操作符
// 傳統寫法
const street = user && user.address && user.address.street;
// 簡寫方式
const street = user?.address?.street;4. 數組去重
5. 快速取整
// 傳統寫法
const floor = Math.floor(4.9);
// 簡寫方式
const floor = ~~4.9;6. 合并對象
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. 解構賦值
// 傳統寫法
const first = arr[0];
const second = arr[1];
// 簡寫方式
const [first, second] = arr;10. 字符串轉數字
// 傳統寫法
const num = parseInt('123');
// 簡寫方式
const num = +'123';11. 多重條件判斷
// 傳統寫法
if (value === 1 || value === 2 || value === 3) {
// ...
}
// 簡寫方式
if ([1, 2, 3].includes(value)) {
// ...
}12. 快速冪運算
// 傳統寫法
Math.pow(2, 3);
// 簡寫方式
2 ** 3;13. 對象屬性簡寫
// 傳統寫法
const obj = { x: x, y: y };
// 簡寫方式
const obj = { x, y };14. 數組映射
// 傳統寫法
const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
return num * 2;
});
// 簡寫方式
const doubled = numbers.map(num => num * 2);15. 交換變量值
// 傳統寫法
let temp = a;
a = b;
b = temp;
// 簡寫方式
[a, b] = [b, a];16. 動態對象屬性
// 傳統寫法
const obj = {};
obj[dynamic + 'name'] = value;
// 簡寫方式
const obj = {
[`${dynamic}name`]: value
};責任編輯：趙寧寧
來源：
JavaScript
