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