千古前端图文教程：ES6 变量的解构赋值详解（数组、对象、字符串与实战应用）

本教程对应项目《Web：千古前端图文教程》中「05-JavaScript基础：ES6语法」系列。解构赋值是 ES6 最常用、最能精简代码的语法特性之一，本文以 05-ES6：变量的解构赋值.md 为主体，结合仓库内数组、剩余参数、模块化等相关章节的配套代码，系统讲解数组解构、对象解构、字符串解构的语法规则、边界情况与真实开发场景。读完本文，你将能熟练用一行代码完成多变量赋值、接口数据提取、模块按名导入等操作，写出更简洁、更清晰的 ES6 代码。

解构赋值的概念

解构赋值：ES6 允许我们，按照一一对应的方式，从数组或者对象中提取值，再将提取出来的值赋值给变量。

拆开来看：

• 解构：分解数据结构；
• 赋值：给变量赋值。

解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。它是 ES6 提出四大组件之外的高频实用特性之一——正如仓库 01-编程语言和JavaScript简介.md 中提到的：「类似于解构、展开、代理等看起来很炫很实用的特性」正是让代码简洁直观的重要语法糖。

数组的解构赋值

数组的解构赋值：将数组中的值按照位置提取出来，然后赋值给变量。

语法

在 ES6 之前，当我们在为一组变量赋值时，一般是这样写：

var a = 1;
var b = 2;
var c = 3;

或者是这样写：

var arr = [1, 2, 3];

var a = arr[0];
var b = arr[1];
var c = arr[2];

现在有了 ES6 之后，我们可以通过数组解构的方式进行赋值（根据位置进行一一对应）：

let [a, b, c] = [1, 2, 3];

二者的效果是一样的，但明显后者的代码更简洁优雅。

嵌套数组的解构

数组解构支持嵌套结构，等号左边的「格式」与右边对应，即可完成解构。仓库 18-数组简介.md 中有如下举例：

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

注意点（重要）：

1. 等号左边的个数和格式，必须和右边的一模一样，才能完全解构；
2. 当然，左边的个数和右边的个数，也可以不一样（未匹配到的变量会得到 undefined，见下节）。

未匹配到的情况

数组的解构赋值，是根据位置进行一一对应来赋值的。可如果左边的数量大于右边的数量时（也就是变量的数量大于值的数量时），多余的变量要怎么处理呢？

答案是：如果变量在一一对应时，没有找到对应的值，那么，多余的变量会被赋值为 undefined。

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

解构时，左边允许有默认值

在解构赋值时，是允许使用默认值的。举例如下：

{
    //一个变量时
    let [foo = true] = [];
    console.log(foo); //输出结果：true
}

{
    //两个变量时
    let [a, b] = ['千古壹号']; //a 赋值为：千古壹号。b没有赋值
    console.log(a + ',' + b); //输出结果：千古壹号,undefined
}

{
    //两个变量时
    let [a, b = 'qianguyihao'] = ['千古壹号']; //a 赋值为：千古壹号。b 采用默认值 qianguyihao
    console.log(a + ',' + b); //输出结果：千古壹号,qianguyihao
}

关于默认值的两个关键行为（仓库 18-数组简介.md 中的补充举例）：

let [a, b = 3, c = 4] = [1, 2];
console.log(a); // 1
console.log(b); // 2。默认值被覆盖。
console.log(c); // 4。继续保持默认值。

也就是说：只要右边的值不是 undefined，左边的默认值就会被覆盖；只有右边恰好是 undefined（或缺失）时，默认值才会生效。

将右边的 undefined 和 null 赋值给变量

如果我们在赋值时，采用的是 undefined 或者 null，那会有什么区别呢？

{
    let [a, b = 'qianguyihao'] = ['千古壹号', undefined]; //b 虽然被赋值为 undefined，但是 b 会采用默认值
    console.log(a + ',' + b); //输出结果：千古壹号,qianguyihao
}

{
    let [a, b = 'qianguyihao'] = ['千古壹号', null]; //b 被赋值为 null
    console.log(a + ',' + b); //输出结果：千古壹号,null
}

上方代码分析：

• undefined：相当于什么都没有，此时 b 采用默认值；
• null：相当于有值，但值为 null。

这条规则是理解「默认值何时生效」的核心：默认值只在对应位置为 undefined 时启用，null 并不会触发默认值。

数组解构与剩余参数配合使用

解构赋值与剩余参数（rest 参数）配合，可以「打包」剩余元素。仓库 07-剩余参数和扩展运算符.md 中有专门一节讲解两者的配合：

const students = ['张三', '李四', '王五'];
let [s1, ...s2] = students;

console.log(s1); // '张三'
console.log(s2); // ['李四', '王五']

使用扩展运算符打包剩余数据时，有一个硬性约束：扩展运算符只能写在最后。这种写法在函数参数、数据拆分等场景中非常常用。

对象的解构赋值

对象的解构赋值：将对象中的值按照属性匹配的方式提取出来，然后赋值给变量。

语法

在 ES6 之前，我们从接口拿到 json 数据后，一般这么赋值：

var name = json.name;

var age = json.age;

var sex = json.sex;

上面这种写法，过于麻烦了。

现在，有了 ES6 之后，我们可以使用对象解构的方式进行赋值。举例如下：

const person = { name: 'qianguyihao', age: 28, sex: '男' };
let { name, age, sex } = person; // 对象的解构赋值

console.log(name); // 打印结果：qianguyihao
console.log(age); // 打印结果：28
console.log(sex); // 打印结果：男

上方代码可以看出，对象的解构与数组的解构，有一个重要的区别：数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，是根据键来取值的。

未匹配到的情况

对象的解构赋值，是根据属性名进行一一对应来赋值的。可如果左边的数量大于右边的数量时（也就是变量的数量大于值的数量时），多余的变量要怎么处理呢？

答案是：如果变量在一一对应时，没有找到对应的值，那么，多余的变量会被赋值为 undefined。

const person = { name: 'qianguyihao', age: 28 };
let { name, age, sex } = person;

console.log(sex); // undefined

给左边的变量自定义命名

对象的解构赋值里，左边的变量名一定要跟右边的属性名保持一致么？答案是不一定。我们可以单独给左边的变量自定义命名。

举例如下：

const person = { name: 'qianguyihao', age: 28 };
let { name: myName, age: myAge } = person; // 对象的解构赋值

console.log(myName); // 打印结果：qianguyihao
console.log(myAge); // 打印结果：28

console.log(name); // 打印报错：Uncaught ReferenceError: name is not defined
console.log(age); // 打印报错：Uncaught ReferenceError: age is not defined

上方的第 2 行代码中（请牢记）：

• 等号左边的属性名 name、age 是对应等号右边的属性名；
• 等号左边的 myName、myAge 是左边自定义的变量名。

或者，我们也可以理解为：将右边 name 的值赋值给左边的 myName 变量，将右边 age 的值赋值给左边的 myAge 变量。现在，你应该一目了然了吧？

圆括号的使用

如果变量 foo 在解构之前就已经定义了，此时你再去解构，就会出现问题。下面是错误的代码，编译会报错：

let foo = 'haha';
{ foo } = { foo: 'smyhvae' };
console.log(foo);

要解决报错，只要在解构的语句外边，加一个圆括号即可：

let foo = 'haha';
({ foo } = { foo: 'smyhvae' });
console.log(foo); //输出结果：smyhvae

这是因为：{ foo } = {...} 在行首会被 JavaScript 解析器当作一个代码块（block）而不是表达式，圆括号可以将它显式地标记为赋值表达式。

实战应用：ES6 模块的按名导入

对象解构赋值最典型的真实场景之一，就是 ES6 模块化中的按名导入。仓库 JavaScript模块化：ES6.md 中，主模块 main.js 引入常规暴露（逐个 export）的模块时，用的正是对象解构赋值的语法：

import { foo1, foo2 } from './module1'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。
import { fn1, fn2 } from './module2';   //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module2 中的对象名一致。

仓库中明确指出这一关键约束：

• 对于采用常规暴露（逐个 export）的模块，引入时必须用对象解构赋值的形式，即 import { 名字 } from '...'，且名字要与暴露时的名字一致；如果写成 import myModule from '...' 这种默认导入的形式，运行时会得到 undefined 并报错。

字符串解构

字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。举例如下：

const [a, b, c, d] = 'hello';
console.log(a);
console.log(b);
console.log(c);

console.log(typeof a); //输出结果：string

打印结果：

h
e
l
string

字符串解构的核心原理：字符串具有可迭代（iterable）与类数组（array-like）双重特征，解构时会按字符位置一一提取，且提取出的每个元素类型依然是字符串（string），并不会被转换成数组或字符对象。

解构赋值的开发要点小结

围绕「数组解构、对象解构、字符串解构」三类语法，把本节的核心结论汇总如下：

场景	规则	示例
数组解构	按位置一一对应取值	let [a, b, c] = [1, 2, 3]
对象解构	按**属性名（键）**匹配取值	let { name, age } = person
未匹配到的变量	一律得到 undefined	let [a, b] = [1] 中 b 为 undefined
默认值	仅在对应值为 undefined 时生效，null 不触发	let [a = 1] = [undefined] → a 为 1
自定义变量名	对象解构可用 { 属性名: 新变量名 } 重命名	let { name: myName } = person
已声明变量的解构	需用圆括号包住整条语句	({ foo } = { foo: 'x' })
配合剩余参数	... 必须写在解构列表的最后	let [s1, ...s2] = students
嵌套结构	左右格式一致即可深层解构	let [a, b, [c]] = [1, 2, [3]]

掌握解构赋值后，你可以把「先逐个取值、再逐个赋值」的啰嗦写法，压缩成一行代码，无论是处理接口返回的 JSON 数据、批量声明变量，还是按名导入模块，代码的可读性与可维护性都会有明显提升。相关内容还可结合仓库的 07-剩余参数和扩展运算符.md（解构与展开的配合）、JavaScript模块化：ES6.md（import 解构导入）以及 18-数组简介.md（数组解构与默认值）继续深入学习。