使用 let 和 const 替代 var
在 ES6 中，let 和 const 提供了块级作用域，解决了 var 的变量提升和全局污染问题。const 声明的常量不可重新赋值，适合引用对象或数组时保持引用不变。
const user = { name: 'Alice' };
user.name = 'Bob'; // 允许修改属性
user = {}; // 报错，const 不允许重新赋值
建议优先使用 const，仅在需要重新赋值时使用 let，减少意外的全局变量声明。
解构赋值简化代码
解构赋值可以从数组或对象中快速提取值,避免繁琐的访问方式。
// 数组解构
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3
// 对象解构
const { name, age } = { name: 'Tom', age: 20 };
console.log(name, age); // Tom 20
结合默认参数,还能为解构的值提供默认值，避免 undefined 错误。
模板字符串替代字符串拼接
模板字符串使用反引号（`）包裹，支持多行字符串和变量插值，比传统的 拼接更直观。
const name = 'Lucy';
const age = 25;
const message = `Hello, my name is ${name} and I'm ${age} years old.`;
console.log(message); // Hello, my name is Lucy and I'm 25 years old.
还可以在模板字符串中直接嵌入表达式,如 ${Math.random()}。
箭头函数简化函数写法
箭头函数语法简洁,且不绑定自己的 this，适合回调函数。
// 传统函数
const add = function(a, b) {
return a + b;
};
// 箭头函数
const add = (a, b) => a + b;
// 单参数可省略括号
const square = x => x * x;
注意：箭头函数不能用作构造函数，也没有 arguments 对象。
默认参数与剩余参数
默认参数为函数参数提供默认值,避免 undefined 错误；剩余参数（...args）将不定数量的参数收集为数组。
// 默认参数
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
// 剩余参数
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
两者结合使用,可以灵活处理函数参数。
数组方法 map、filter、reduce
这些高阶方法能以函数式风格处理数组,避免显式循环。
map：遍历数组并返回新数组，每个元素经过处理。const numbers = [1, 2, 3]; const doubled = numbers.map(n => n * 2); // [2, 4, 6]
filter：筛选符合条件的元素。const evens = numbers.filter(n => n % 2 === 0); // [2]
reduce：将数组.reduce 为单个值。const total = numbers.reduce((sum, n) => sum + n, 0); // 6
对象简写与动态属性名
ES6 允许对象简写写法，属性名与变量名相同时可省略冒号和值；动态属性名通过 [expression] 实现。
const key = 'age';
const user = {
name: 'John', // 简写
[key]: 30, // 动态属性名
greet() { // 方法简写
console.log('Hi!');
}
};
代码更简洁,同时支持灵活的属性命名。
Set 与 Map 的使用
Set 是唯一值集合，Map 是键值对集合，比数组更适合特定场景。
// Set 去重
const unique = new Set([1, 2, 2, 3]); // {1, 2, 3}
// Map 存储键值对
const map = new Map();
map.set('a', 1);
map.set('b', 2);
console.log(map.get('a')); // 1
Set 提供 add、delete、has 方法，Map 提供 set、get、has 方法，操作高效。
Promise 处理异步操作
Promise 解决回调地狱问题，提供链式调用处理异步流程。
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Data loaded'), 1000);
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
结合 async/await 语法，异步代码可同步风格编写，提高可读性。
事件委托优化性能
事件委托利用事件冒泡机制,将事件监听器绑定到父元素，减少监听器数量。
document.getElementById('list').addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
console.log('Clicked:', e.target.textContent);
}
});
动态添加的子元素也能自动触发事件,适合列表或表格等场景，提升性能。
这些技巧覆盖了变量声明、函数、数组、对象、异步等多个方面，掌握它们能显著提升 JavaScript 代码的简洁性、可读性和性能，在实际开发中，结合场景灵活运用，才能写出更高质量的代码。
