ES6+：从语法糖到现代 JavaScript 的核心能力这篇文章系统梳理了 ES6+ 为 JavaScript 带来的

ES6+：从语法糖到现代 JavaScript 的核心能力

对前端工程师而言，ES2015（简称 ES6）是一个真正的时代分水岭。
在此之前，JavaScript 既简单又混乱——它能跑，但开发体验并不现代：没有 class、没有模块化、变量提升怪异、对象操作重度依赖原始写法……

ES6+ 的到来彻底改变了这一切。它让 JavaScript 拥有了大型语言所需要的结构化、工程化能力，也让日常开发更加优雅高效。

1. 解构赋值：最优雅的变量声明方式

解构（Destructuring）是 ES6 带来最常用的语法糖之一，它让你能用一种非常“声明式”的方式从数组或对象中提取数据。

1.1 数组解构：一次性声明多个变量

let [a, b, c] = [1, 2, 3];
console.log(a, b, c);

1.2 嵌套数组解构

优雅处理结构更复杂的数据形式：

const arr = [1, [2, 3, [4], 5]];
const [a, [b, c, [d], e]] = arr;
console.log(a, b, c, d, e);

1.3 rest 运算符：剩余内容打包收集

const arr = [1, 2, 3, 4, 5];
const [first, ...rest] = arr;
console.log(first, rest); // 1 [2,3,4,5]

1.4 字符串同样可以解构

const [a, b, ...c] = 'hello';
console.log(a, b, c); // h e ['l','l','o']

1.5 解构字符串的包装对象属性

const { length } = 'hello';
console.log(length); // 5

JS 会自动把原始类型包装成对象，因此可以解构出属性。

2. 对象解构与属性简写：减少冗余，增强可读性

2.1 对象解构（字段名必须一致）

const obj = {
  name: 'l',
  age: 18,
  sex: 'boy',
  like: { n: '唱跳rap篮球' }
};

let { name, age, like: { n } } = obj;
console.log(name, age, n);

2.2 对象属性简写（实际开发中极其常见）

当变量名与属性名一致时，可以使用简写语法：

const sex = 'boy';

const user = {
  name: 'l',
  age: 18,
  sex // 等价于 sex: sex
};

不仅更短，更贴近属性本身的语义。

3. 模板字符串：更强的字符串能力

传统字符串拼接麻烦、难读：

'Hello, I am ' + myName

ES6 的模板字符串解决了这个问题。

let myName = 'ff';

console.log(`Hello, I am ${myName}`);
console.log(`Upper: ${myName.toUpperCase()}`);

... 定义模板字符串
${} 放表达式（可执行，返回值写入字符串）

4. for...of：更优雅的遍历方式

可用于所有可迭代对象：

Array
String
Map
Set
TypedArray
DOM collections 等

let myName = 'hello';

for (let ch of myName) {
  console.log(ch);
}

相比传统 for, 它语义更自然，尤其遍历集合类数据时更加优雅。

5. BigInt：解决 JS 大数精度问题

JS 的 Number 类型基于 64 位双精度浮点数，当数值超过 2^53 - 1 时会出现精度丢失。

ES2020 引入 BigInt 来解决这个问题。

let num = 12345678901234567890123456789n;
console.log(num, typeof num); // bigint

计算示例：

console.log(2n + 3n);

6. 指数运算符 `**`（ES7）

更自然的指数写法：

console.log(2 ** 10);   // 1024

等价于：

Math.pow(2, 10);

7. 函数默认参数：增强函数健壮性

ES6 以前写默认值只能：

x = x || 1;

ES6 提供更合理的方式：

function foo(x = 1, y = 1) {
  return x + y;
}

console.log(foo(3, 4)); // 7
console.log(foo(3));    // 4

8. rest 参数（...args）：替代古老的 arguments

arguments 不是数组，不好用。
REST 参数是真数组，更现代更友好。

function foo(...args) {
  console.log(args);
}

foo(1, 2, 3, 4);

ES6+ 的本质，是让 JS 更加现代化

ES6+ 为 JavaScript 带来的不仅是语法糖，更是一整套更现代、更工程化的开发模式。从解构赋值到模板字符串，从 rest 参数到 BigInt，这些特性共同提升了代码的可读性、健壮性与表达力，让前端在复杂业务场景下依然能够保持优雅与效率。

ES6+：从语法糖到现代 JavaScript 的核心能力