JavaScript ES6+ 学习笔记JavaScript ES6+ 学习笔记一、解构赋值（Destructurin

JavaScript ES6+ 学习笔记

ES6（ECMAScript 2015）是 JavaScript 发展史上的重要分水岭。在此之前，JavaScript 虽然因“单线程、轻量、灵活”等特性广受欢迎，但也存在诸多缺陷：如变量提升导致的逻辑混乱、缺乏类（class）语法、没有模块系统、不支持常量等。
自 2015 年起，JavaScript 开始向企业级开发语言转型——“别的语言有的，它也要有”，以更好地支撑大型项目开发。本文将系统梳理 ES6 及后续版本中几个核心且实用的新特性。

一、解构赋值（Destructuring Assignment）

解构赋值允许我们从数组或对象中一次性提取多个值并赋给变量，极大提升了代码的简洁性与可读性。

1. 数组解构

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

2. 嵌套数组解构

const arr = [1, [2, 3, [4], 5]];
const [x, [y, z, [w], v]] = arr;
console.log(x, y, z, w, v); // 1 2 3 4 5

3. 对象解构

要求左右两边的属性名一致：

const obj = { name: 'liu', age: 18, sex: 'boy' };
let { name, age, sex } = obj;
console.log(name, age, sex); // liu 18 boy

支持嵌套解构：

const user = { info: { hobby: '唱跳' } };
let { info: { hobby } } = user;
console.log(hobby); // 唱跳

二、剩余参数（Rest Operator）`...`

... 运算符可用于收集“剩余”的元素，常与解构配合使用。

数组中的剩余参数

const users = ['Darvin Ham', 'James', 'Luka', 'Davis'];
const [captain, ...players] = users;
console.log(captain); // Darvin Ham
console.log(players); // ['James', 'Luka', 'Davis']

字符串也可解构

const [first, second, ...rest] = 'hello';
console.log(first, second, rest); // h e ['l', 'l', 'o']

注意：... 在函数参数中表示“剩余参数”，替代了老旧的 arguments 对象，且返回真正的数组。

function foo(...args) {
    console.log(args); // [1, 2, 3, 4]
}
foo(1, 2, 3, 4);

三、对象属性简写（Shorthand Properties）

当对象的属性名与变量名相同时，可省略重复书写：

const name = 'Alice';
const age = 25;

// ES5 写法
const person1 = { name: name, age: age };

// ES6 简写
const person2 = { name, age };

这不仅减少冗余，也让代码更优雅。

四、模板字符串（Template Literals）

使用反引号 ` 包裹字符串，支持多行文本和插值表达式 ${} ：

const myname = 'bailandi';
console.log(`我的名字是：${myname}`);
console.log(`Hello, I am ${myname.toUpperCase()}`); // 支持表达式求值

相比传统的 'Hello ' + name 拼接方式，模板字符串语义更清晰、功能更强大。

五、`for...of` 循环

for...of 是一种语义明确的迭代语法，适用于所有可迭代对象（如数组、字符串、Set、Map 等）：

const arr = [1, 2, 3];
for (let item of arr) {
    console.log(item); // 1 2 3
}

const str = 'hi';
for (let char of str) {
    console.log(char); // h i
}

相较于 for (let i=0; i<arr.length; i++)，for...of 更关注“值”而非“索引”，代码更简洁直观。

六、BigInt：大整数类型

JavaScript 的 Number 类型基于 IEEE 754 双精度浮点数（1 符号位 + 11 指数位 + 52 尾数位），最大安全整数为 2⁵³ - 1（即 9007199254740991） 。超过此范围将发生精度丢失：

let num = 1234567890987654321;
console.log(num); // 1234567890987654400 ❌ 精度丢失！

ES2020 引入 BigInt 解决此问题：

字面量后加 n：123n
或使用构造函数：BigInt("1234567890987654321")

let big = 1234567890987654321n;
console.log(big); // 1234567890987654321n ✅ 精确表示

⚠️ 注意：BigInt 不能与 Number 混用，也不支持 Math 函数。

七、指数运算符 `**`

ES7（2016）新增 ** 用于幂运算，替代 Math.pow()：

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

语法更直观，符合数学直觉。

八、函数参数默认值

ES6 允许在函数定义时直接设置参数默认值：

function foo(x = 1, y = 1) {
    return x + y;
}
console.log(foo(3, 4)); // 7
console.log(foo(3));    // 4（y 使用默认值 1）

避免了在函数体内手动判断 undefined 的繁琐逻辑。

总结：ES6+ 让 JavaScript 更“优雅”

特性	作用	优势
解构赋值	快速提取数据	代码简洁、可读性强
`...` 运算符	收集/展开元素	灵活处理不定参数
对象简写	简化对象字面量	减少重复代码
模板字符串	多行+插值	替代字符串拼接
`for...of`	遍历可迭代对象	语义清晰
`BigInt`	支持大整数	解决精度丢失
`**`	幂运算	语法更自然
参数默认值	设置默认参数	提升函数健壮性

这些特性共同推动 JavaScript 从“脚本语言”迈向现代化、工程化、企业级的编程语言。掌握它们，是编写高质量、可维护前端/Node.js 代码的基础。

📌 提示：虽然 JS 不适合做大量数值计算（性能与精度限制），但通过 BigInt、合理架构与类型检查，我们仍可在大型项目中构建可靠系统。

JavaScript ES6+ 学习笔记