JavaScript ES6+ 最佳实践
1. 变量声明：从 var 到 let/const
问题代码：var 存在变量提升，只有函数作用域，没有块级作用域，容易导致变量污染。
// 变量提升导致意外行为
console.log(num); // undefined 而非报错
var num = 10;
// 没有块级作用域
var name = '张三';
if (true) {var name = '李四'; // 覆盖外部作用域的name
}
console.log(name); // 输出 '李四'for (var i = 0; i < 5; i++) {setTimeout(function() {console.log(i); // 输出5个5}, 100);
}
ES6+ 解决方案：
const name = '张三'; // 不可重新赋值的常量
if (true) {let name = '李四'; // 块级作用域
}
console.log(name); // '张三'for (let i = 0; i < 5; i++) {setTimeout(() => console.log(i), 100); // 0,1,2,3,4
}
最佳实践：
- 默认使用
const - 需要重新赋值时使用
let - 避免使用
var
2. 函数定义：从函数表达式到箭头函数
问题代码：冗长的语法，this 绑定问题。
var add = function(a, b) {return a + b;
};var obj = {value: 1,increment: function() {var self = this;setTimeout(function() {self.value++;}, 100);}
};
ES6+ 解决方案：
const add = (a, b) => a + b;const obj = {value: 1,increment() {setTimeout(() => {this.value++;}, 100);}
};
特性：
- 箭头函数继承外层
this - 方法简写语法
- 隐式返回
3. 异步编程：从回调地狱到 Promise/async-await
问题代码：
getData(function(a) {getMoreData(a, function(b) {getEvenMoreData(b, function(c) {getFinalData(c, function(result) {console.log('Result:', result);}, failCallback);}, failCallback);}, failCallback);
}, failCallback);
ES6+ 解决方案：
// Promise 链
getData().then(a => getMoreData(a)).then(b => getEvenMoreData(b)).then(c => getFinalData(c)).then(result => console.log('Result:', result)).catch(error => console.error(error));// async、await
async function processData() {try {const a = await getData();const b = await getMoreData(a);const c = await getEvenMoreData(b);const result = await getFinalData(c);console.log('Result:', result);} catch (error) {console.error(error);}
}
优势：
- 线性代码结构
- 统一错误处理
- 更好的可读性
4. 参数处理：从 arguments 到剩余参数
问题代码：
function sum() {var args = Array.prototype.slice.call(arguments);return args.reduce(function(total, num) {return total + num;}, 0);
}
ES6+ 解决方案：
function sum(...numbers) {return numbers.reduce((total, num) => total + num, 0);
}
特点：
- 真正的数组
- 更清晰的参数定义
- 可与普通参数混用
5. 面向对象：从构造函数到类语法
问题代码：
function Person(name) {this.name = name;
}
Person.prototype.sayHello = function() {console.log('Hello, ' + this.name);
};
ES6+ 解决方案：
class Person {constructor(name) {this.name = name;}sayHello() {console.log(`Hello, ${this.name}`);}// 静态方法static create(name) {return new Person(name);}
}
新增特性：
- 继承 (
extends) - 静态方法
- 私有字段 (
#field) - 静态块
6. 字符串处理：从拼接符到模板字符串
问题代码：
var name = '张三';
var age = 25;
var message = name + '今年' + age + '岁';
ES6+ 解决方案：
const message = `${name}今年${age}岁`;
高级用法：
// 多行字符串
const html = `
<div><h1>${title}</h1><p>${content}</p>
</div>
`;// 标签模板
function highlight(strings, ...values) {return strings.reduce((result, str, i) => `${result}${str}<span class="highlight">${values[i] || ''}</span>`, '');
}
const output = highlight`Hello ${name}, welcome to ${siteName}!`;
7. 对象和数组处理：从手动操作到展开运算符
问题代码：
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var combined = arr1.concat(arr2);var obj1 = { a: 1, b: 2 };
var obj2 = { b: 3, c: 4 };
var merged = Object.assign({}, obj1, obj2);
ES6+ 解决方案：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
实用技巧：
// 数组复制
const copy = [...original];// 对象属性覆盖
const defaults = { color: 'red', size: 'medium' };
const config = { ...defaults, ...userConfig };// 剩余参数解构
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
8. 数组迭代：从 for 循环到高阶函数
问题代码：
var numbers = [1, 2, 3, 4];
var doubled = [];
for (var i = 0; i < numbers.length; i++) {doubled.push(numbers[i] * 2);
}
ES6+ 解决方案：
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
常用高阶函数：
// 过滤
const evens = numbers.filter(n => n % 2 === 0);// 累加
const sum = numbers.reduce((total, num) => total + num, 0);// 查找
const firstEven = numbers.find(n => n % 2 === 0);// 检查
const allPositive = numbers.every(n => n > 0);
const hasNegative = numbers.some(n => n < 0);
9. 模块系统：从 IIFE 到 ES Modules
问题代码：
// math.js
(function() {function add(a, b) { return a + b; }function subtract(a, b) { return a - b; }window.math = { add: add, subtract: subtract };
})();// app.js
math.add(1, 2);
ES6+ 解决方案：
// math.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }// app.js
import { add } from './math.js';
add(1, 2);
现代模块特性：
- 命名导出/默认导出
- 动态导入 (
import()) - 顶层 await
- 模块元信息 (
import.meta)
10. 其他重要 ES6+ 特性
解构赋值
// 对象解构
const { name, age } = person;
const { name: personName, age: personAge } = person;// 数组解构
const [first, second] = numbers;
const [head, ...tail] = numbers;
可选链 (?.) 和空值合并 (??)
// 避免 Cannot read property 'x' of undefined/null
const street = user?.address?.street ?? 'Unknown';// 函数调用可选链
someInterface.customMethod?.();
BigInt
const bigNumber = 9007199254740991n;
const biggerNumber = bigNumber + 1n;
全局对象标准化
// 浏览器环境
globalThis === window; // true// Node.js 环境
globalThis === global; // true
11.类型系统缺陷
原始问题：
// 1. typeof null === 'object'
typeof null; // "object" (从JS诞生就存在的bug)// 2. 隐式类型转换
[] + {}; // "[object Object]"
{} + []; // 0// 3. == 的强制类型转换
'0' == false; // true
现代化实践：
// 1. 使用 Object.prototype.toString 检测类型
Object.prototype.toString.call(null); // "[object Null]"// 2. 避免隐式转换，使用显式转换
Number([]) + Number({}); // NaN// 3. 始终使用 ===
'0' === false; // false