1. 解构赋值简化变量声明
直接从对象或数组中提取值并赋值给变量,减少冗余代码。
javascript
const user = { name: 'Alice', age: 30 };
const { name, age } = user; // 等价于 name = user.name, age = user.age
const arr = [1, 2, 3];
const [a, b] = arr; // a=1, b=2
2. 模板字面量(Template Literals)
用反引号 ` 包裹字符串,支持多行文本和变量嵌入。
javascript
const name = 'Bob';
console.log(`Hello, ${name}!
Today is ${new Date().toDateString()}.`);
3. 箭头函数缩短代码
简化函数语法,自动绑定上下文(this)。
javascript
// 传统函数
const sum = function(a, b) { return a + b; };
// 箭头函数
const sum = (a, b) => a + b;
4. 可选链操作符(Optional Chaining ?.)
安全访问深层嵌套的对象属性,避免因 undefined 报错。
javascript
const user = { address: { city: 'New York' } };
const city = user?.address?.city; // 若 address 不存在,返回 undefined
5. 空值合并运算符(Nullish Coalescing ??)
为变量提供默认值,仅在值为 null 或 undefined 时生效。
javascript
const price = 0;
const displayPrice = price ?? 'N/A'; // 0(因为 0 不是 null/undefined)
6. 展开运算符(Spread Operator ...)
快速合并数组或对象。
javascript
const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // [1, 2, 3]
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }
7. 数组方法:map、filter、reduce
用函数式编程替代 for 循环。
javascript
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]
const evens = numbers.filter(n => n % 2 === 0); // [2]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 6
8. 短路求值(Short-Circuit Evaluation)
利用逻辑运算符简化条件判断。
javascript
// 仅当 isLogged 为 true 时执行函数
isLogged && showDashboard();
// 设置默认值
const username = user.name || 'Guest';
9. 使用 Set 快速去重数组
将数组转换为 Set 自动去重。
javascript
const numbers = [1, 2, 2, 3];
const unique = [...new Set(numbers)]; // [1, 2, 3]
10. 对象属性简写
当属性名与变量名相同时,可省略键值。
javascript
const name = 'Alice';
const age = 30;
// 传统写法
const user = { name: name, age: age };
// 简写
const user = { name, age };
总结
这些小技巧能显著提升代码的可读性和简洁性,但需注意浏览器兼容性(如可选链 ?. 和空值合并 ?? 需现代环境支持)。合理使用它们,让你的 JavaScript 更优雅! 🚀