ES6（ECMAScript 2015）新特性详解
ES6，即 ECMAScript 2015，是 JavaScript 发展史上的一个重要里程碑。它不仅增强了语言的表达能力，还为大型项目开发提供了更优雅、更安全的语法支持。本文将结合代码示例，系统梳理 ES6 的核心新特性。
一、变量声明：let 与 const
虽然你的代码中没有直接体现，但 ES6 引入了块级作用域的 let 和常量声明 const，解决了 var 带来的变量提升和作用域混乱问题。
let a = 1;
const PI = 3.14159; // 不可重新赋值
二、解构赋值（Destructuring Assignment）
ES6 允许从数组或对象中“提取”值，并赋给变量，语法简洁直观。
数组解构
// 一次性声明多个变量
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3
// 嵌套解构
const arr = [1, [2, 3, [4], 5], 6];
const [x, [y, z, [w], v]] = arr;
对象解构
const obj = {
name: 'cxy',
age: 18,
sex: 'boy',
hobbies: { n: '玩' }
};
// 解构嵌套对象
let { name: name1, age, hobbies: { n } } = obj;
console.log(name1, age, n); // 'cxy' 18 '玩'
// 甚至可以解构字符串的 length 属性
const { length } = 'hello';
console.log(length); // 5
三、模板字符串（Template Literals）
使用反引号(``) 定义字符串，支持多行文本和插值表达式 ${}。
let myName = 'fengfeng';
console.log(`hello, i am ${myName}`);
// 输出：hello, i am fengfeng
console.log(`hello, i am ${myName.toUpperCase()}`);
// 输出：hello, i am FENGFENG
相比传统字符串拼接，模板字符串更清晰、功能更强。
四、函数默认参数（Default Parameters）
函数参数可设置默认值，提升 API 的健壮性和可读性。
function foo(x = 1, y = 1) {
return x + y;
}
console.log(foo(3, 4)); // 7
console.log(foo(3)); // 4（y 使用默认值 1）
五、剩余参数（Rest Parameters）
ES6 用 ...args 替代传统的 arguments 对象，获得真正的数组，便于操作。
它的作用是：把“剩下的部分”打包成一个新数组（或对象） 。
function foo(...args) {
console.log(arguments); // 类数组对象（不推荐使用）
console.log(args); // 真正的数组 [1, 2, 3, 4]
}
foo(1, 2, 3, 4);
// rest 运算符配合解构
const users = ['zs', 'ls', 'ww', 'kk', 'cxy'];
const [coach, ...players] = users;
console.log(coach); // 'zs'
console.log(players); // ['ls', 'ww', 'kk', 'cxy']
解释：
coach拿走第一个元素'zs'...player把剩下的所有元素收集到一个新数组player中
注意：
arguments是类数组，不能直接调用数组方法；而...args是标准数组。
rest的使用规范
- rest 必须放在最后否则报错
const [...rest, last] = arr; // SyntaxError
-
在对象解构中使用 Rest（ES2018+）
-
- 对象 rest 也必须放在最后,它收集的是未被显式解构的其余属性
const obj = { name: 'cxy', age: 18, sex: 'boy', city: 'BJ' };
const { name, ...others } = obj;
console.log(name); // 'cxy'
console.log(others); // { age: 18, sex: 'boy', city: 'BJ' }
- Rest 不在最后
const [a, ...b, c] = [1,2,3]; // 报错！
- 不允许多个 Rest
const [...a, ...b] = arr; // 不允许
六、for...of 循环
提供更语义化的遍历方式，适用于可迭代对象（如字符串、数组等）。
let myName = 'fengfeng';
for (let char of myName) {
console.log(char);
}
// 依次输出：f e n g f e n g
相比传统的 for (let i=0; i<arr.length; i++)，for...of 更简洁、可读性更强。
七、对象属性简写（Shorthand Properties）
当对象的属性名与变量名相同时，可省略重复书写。
const sex = 'boy';
const obj = {
name: 'cxy',
age: 18,
sex, // 等价于 sex: sex
hobbies: { n: '玩' }
};
八、新增数据类型：BigInt
为解决 JavaScript 中超过 Number.MAX_SAFE_INTEGER（即 (2^{53} - 1)）的整数精度丢失问题，ES2020（虽非 ES6，但常被提及）引入了 BigInt。
let num = 1234567890987654321n;
console.log(num, typeof num); // 1234567890987654321n 'bigint'
注意：
BigInt不能与普通Number混合运算，需显式转换。
九、指数运算符 **（ES7，2016）
虽然属于 ES7，但常与 ES6 特性一起使用：
console.log(2 ** 10); // 1024
替代了 Math.pow(2, 10)，语法更直观。
总结
ES6 极大地提升了 JavaScript 的开发体验，使其更适合企业级、大型项目的开发。主要优势包括：
- 语法更简洁：解构、模板字符串、属性简写等减少冗余代码；
- 功能更强大：默认参数、rest 参数、
for...of提升逻辑表达能力； - 类型更安全：
let/const避免变量污染，BigInt支持大整数； - 语义更清晰：代码可读性显著提高。
掌握这些特性，不仅能写出更现代的 JavaScript 代码，也为学习 React、Vue 等现代前端框架打下坚实基础。
