写 JS 很久了，你是否发现自己还在用
var、手动拼字符串、arguments、传统 for 循环？那可能说明——你错过了整个现代 JS 世界的进化。
从 ES6（2015）开始，JavaScript 迎来了它真正意义上的“成人礼”，从“能完成任务”变为“优雅、现代、可维护、企业级开发语言”。
今天，我会带你用一个轻松的角度，完全掌握 ES6+ 的核心能力，让你从根本上改变写 JS 的方式。
🍃一、为什么 ES6+ 这么重要？
ES6 之前，JS 可以说“能用但不好用”：
- 没有模块系统
- 没有 class
- 参数处理混乱
- 异步写法灾难
var变量提升让人摸不着头脑- 数组、对象处理缺乏优雅方式
- 字符串模板非常丑
为了变成真正适合大型项目的语言，ES6 对 JS 进行了史诗级增强，可以用四个字概括：
更优雅、更安全、更现代、更好维护。
下面我们用实例讲清楚你必须掌握的 ES6+ 技巧。
🧩二、结构更清晰：数组与对象的解构（Destructuring）
解构是 ES6 必学能力，它让“声明变量”这件小事也变得优雅。
✅1. 一次声明多个变量（数组解构）
传统写法：
let a = 1;
let b = 2;
let c = 3;
ES6：
let [a, b, c] = [1, 2, 3];
超爽，是不是？
✅2. 支持嵌套解构
const arr = [1, [2, 3, [4], 5]];
const [a, [b, c, [d], e]] = arr;
console.log(a, b, c, d, e);
这种写法几乎像“模式匹配”，只要左右结构一致即可自动拆解。
✅3. 剩余元素：rest 运算符 ...
让你拿到数组除首项外的所有剩余内容：
const arr = [1, 2, 3, 4, 5];
const [a, ...rest] = arr;
console.log(a, rest); // 1 [2,3,4,5]
同样适用于字符串：
const [x, y, ...others] = 'hello';
console.log(x, y, others); // h e ["l","l","o"]
🧱三、对象解构：更强大、更优雅
假设我们有一个对象：
const obj = {
name: 'lxp',
age: 18,
sex: 'boy',
like: {
n: '唱跳'
}
};
传统写法：
let name = obj.name;
let age = obj.age;
let n = obj.like.n;
ES6 解构写法：
let { name, age, like: { n } } = obj;
console.log(name, age, n);
是不是清爽很多？
💡对象属性简写（Shorthand Property）
当对象的 key 与变量名一致时，可以省略 key：
const sex = 'boy';
const obj = {
name: 'lxp',
age: 18,
sex, // 等价于 sex: sex
};
大量用于 Vue/React 的 props 数据构建。
🎨四、模板字符串（Template Literal）：彻底告别拼接地狱
传统写法：
console.log("Hello, I am " + myName);
ES6 写法：
console.log(`Hello, I am ${myName}`);
不仅可插值，还支持换行、表达式：
console.log(`Hello, I am ${myName.toUpperCase()}`);
多行字符串也完美支持：
const text = `
第一行
第二行
第三行
`;
🔁五、for…of：更语义化的遍历方式
遍历字符串或数组：
for (let ch of myName) {
console.log(ch);
}
for of 专门用来遍历可迭代对象，比传统 for 可读性好太多。
🧮六、BigInt：解决 JS 的“数学遗憾”
JavaScript 中最大安全整数是：
2^53 - 1
超过就会丢失精度。
ES2020 推出了 BigInt —— 专为大整数而生。
let num = 122345678811111111n;
console.log(num, typeof num);
n 就是 BigInt 的标识符。
金融、计数系统、精确计算都要用到它。
⚡七、指数运算符 **（ES7）
以前：
Math.pow(2, 10);
现在：
2 ** 10;
更直观、可读性更强。
🧠八、函数增强：默认参数 + 剩余参数
1️⃣ 默认参数（Default Parameters）
以前写默认值：
function foo(x, y) {
x = x || 1;
y = y || 1;
return x + y;
}
现在：
function foo(x = 1, y = 1) {
return x + y;
}
2️⃣ 剩余参数（Rest Parameters）
比 arguments 更现代，更干净：
function foo(...args) {
console.log(args);
}
foo(1, 2, 3, 4);
它是 真正的数组，而 arguments 是伪数组。
🔥九、总结：ES6+ 到底改变了什么？
如果说 ES6 前的 JavaScript 是“能干活的小伙子”，
那么 ES6+ 的 JavaScript 就是“企业级开发的成熟工程师”。
它让整个语言变得：
- 更强大
- 更优雅
- 更安全
- 更灵活
- 更易维护
现代项目（Vue、React、Node、TS）都高度依赖这些新特性。
🎯最后，你应该记住这些 ES6+ 必学点：
| 能力 | 用途 |
|---|---|
| 解构赋值 | 写更少的代码、结构清晰 |
| Rest / Spread | 函数参数、数组/对象操作神器 |
| 模板字符串 | 字符串拼接救星 |
| for…of | 更语义化的遍历 |
| BigInt | 解决大整数准确性 |
| 默认参数 | 让函数更安全 |
| 指数运算符 | 更直观的数学表达 |
掌握这些，你的代码风格会发生质的提升。
