JavaScript解构赋值实用技巧与进阶指南
本文深入解析JavaScript解构赋值语法，涵盖对象与数组的完整及简写形式、嵌套结构处理、默认值设置机制及计算属性。详细演示函数参数解构、动态属性访问、变量交换及数组拷贝等实用技巧，并指出undefined与null在默认值判定中的关键差异，帮助开发者编写更简洁高效的代码。
一、核心概念
引入解构的必要性，示例如下：
const student = {
name: 'ZhangSan',
age: 18,
scores: {
math: 19,
english: 85,
chinese: 100
}
};
function displayInfo(student) {
console.log('name:', student.name);
console.log('math:', student.scores.math);
console.log('english:', student.scores.english);
console.log('chinese:', student.scores.chinese);
}
displayInfo(student);此方式虽能达成目标，但代码显得繁琐。若对象层级较深，属性访问链将显著延长。尽管这并非致命缺陷，但采用解构赋值能显著提升代码的简洁性与可读性。
接下来探讨解构赋值的定义。参考 MDN 官方描述：
解构赋值是一种 JavaScript 表达式。借助该语法，可从对象或数组中提取属性值，并将其赋值给其他变量。
本质上，解构是将复杂结构拆解为简单组成部分。该语法适用于变量声明及赋值操作。此外，还支持嵌套解构以处理深层结构。
例如，对前述对象执行解构操作：
function displayInfo(student) {
const { name, scores: {math, english, chinese} } = student;
console.log('name:', name);
console.log('math:', math);
console.log('english:', english);
console.log('chinese:', chinese);
}如此处理，代码是否更为精简？
二、解构类型
依据 MDN 对解构赋值的定义，可将其划分为两大类别：
- 对象解构
- 数组解构
下文将分别阐述这两种解构方式。
1. 对象解构详解
对象解构亦称对象属性分配模式，允许将对象属性值赋给对应变量。其包含两种写法：
let obj = {x: 1, y: 2, z: 3};
let {x: a, y: b, z: c} = obj;
console.log(a, b, c)
let {x, y, z} = obj;
console.log(x, y, z)- 第一种（第3行）为对象解构的标准形式，对象的每个属性均对应一个变量。冒号前标识源对象中的属性名，冒号后指定目标变量名；
- 第二种（第5行）为对象解构的简写形式，当源对象属性名与目标变量名一致时，可采用此简写。
若需向已存在的变量赋值，需特别注意语法规范：
let obj = {x: 1, y: 2, z: 3};
let x = 0, y = 0, z = 0;
({x, y, z} = obj)
console.log(x, y, z)务必使用括号将赋值表达式包裹。若省略括号，解构对象将被解析为块语句，而块语句无法置于赋值表达式左侧。
在使用解构赋值时，可为变量指定默认值：
const person = {
name: 'ZhangSan',
height: 180
};
const { name, height, age = 25 } = person;
console.log(name, height, age);此处为 age 属性设定了默认值。若源对象中不存在 age 属性，则 age 将被赋予默认值 25，而非 undefined。
若分配的对象属性值为 undefined，则触发默认值机制：
const {x = 2} = {x: undefined};
console.log(x); // 22. 数组解构详解
执行数组解构时，系统实际利用迭代器将所需值与结构源分离。因此，可对各类可迭代对象使用数组解构，涵盖字符串、数组、集合、Map 及 DOM 元素。此外，解构赋值还可与扩展运算符结合使用。
（1）字符串处理
let message = 'Hello';
let [a, b] = message;
let [x, y, ...z] = message;
console.log(a, b); // H e
console.log(x, y, z); // H e ['l', 'l', 'o']（2）数组处理
let numbers = [1, 2, 3];
let [x, y, z] = numbers;
console.log(x, y, z); // 1 2 3（3）集合处理
let set = new Set().add('foo').add('bar');
let [a, b] = set;
console.log(a, b); // foo bar（4）Map 对象处理
let map = new Map().set('a', 1).set('b', 2);
let [x, y] = map;
console.log(x, y); // ["a", 1] ["b", 2]在数组解构中，存储变量的数组内每个变量均映射至解构数组相同索引处的对应项。
若解构中某项无需使用，可利用逗号操作符进行占位分隔：
const rgb = [200, 255, 100];
const [,, blue] = rgb;
console.log(blue); // 100与对象解构类似，数组解构亦可为局部变量设定默认值：
const rgb = [200];
const [red = 255, green, blue = 255] = rgb;
console.log(`R: ${red}, G: ${green}, B: ${blue}`);若变量已预先存在，可采用如下写法：
let red = 100, green = 200, blue = 50;
const rgb = [200, 255, 100];
[red, green] = rgb;
console.log(`R: ${red}, G: ${green}, B: ${blue}`);与对象解构不同之处，此处无需使用括号将数组包裹。
若分配给变量的值为 undefined，则启用默认值：
const [x = 1] = [undefined];
console.log(x); // 1默认值未必为固定常量，亦可由计算属性生成：
function foo() {
return 1;
}
let obj1 = {x: 2};
let obj2 = {x: undefined};
let {x=foo()} = obj1;
console.log(x); // 2
let {x=foo()} = obj2;
console.log(x); // 1若需将数组部分元素赋给特定变量，而将其余元素归集至另一变量，可采用如下方式：
let [greeting,...intro] = ["Hello", "I" , "am", "CUGGZ"];
console.log(greeting); // "Hello"
console.log(intro); // ["I", "am", "CUGGZ"]三、嵌套解构
前述内容涵盖普通数组与对象解构。实际上，解构赋值同样适用于嵌套数组及嵌套对象。例如，文章开篇示例即为嵌套对象解构：
const student = {
name: 'ZhangSan',
age: 18,
scores: {
math: 19,
english: 85,
chinese: 100
}
};
const { name, scores: {math, english, chinese} } = student; 另举一例，展示嵌套数组解构：
let numbers = [1, [2, 3, 4], 5];
let [a, [b, c, d], e] = numbers;
console.log(a, b, c, d, e); // 1 2 3 4 5四、高级应用技巧
1. 函数解构应用
（1）函数参数解构
可对函数参数实施解构赋值：
function foo([a, b]) {
console.log(a + b);
}
foo([1, 2]); // 3
function bar({x, y}) {
console.log(x, y);
}
foo({x: 1, y: 2}); // 1 2亦可对函数返回值实施解构赋值：
function getStudentInfo() {
return {
name: 'ZhangSan',
age: 18,
scores: {
math: 19,
english: 85,
chinese: 100
}
};
}
const { name, scores: {math, english, chinese} } = getStudentInfo();
console.log(name, math, english, chinese);2. 循环内解构
当需遍历对象键值对时，亦可应用对象解构：
const students = [
{
'name': 'ZhangSan',
'grade': 80
},
{
'name': 'LiSi',
'grade': 75
},
{
'name': 'WangWu',
'grade': 95
}
];
for(let {name, grade} of students){
console.log(name, grade);
}3. 动态属性解构
诸多场景下，对象属性的 key 在编译期未知，仅于运行时确定。例如存在方法 getStudentInfo，接收 key 参数并返回对应属性值：
getStudentInfo('name');
getStudentInfo('age'); 鉴于传递给 getStudentInfo 方法的参数具有动态性，代码可编写如下：
const getStudentInfo = key => {
const {[key]: value} = student;
return value;
}务必注意，包裹 key 的方括号不可省略，否则将导致返回 undefined 值。
4. 变量交换
数组解构的一项实用功能在于实现局部变量交换。传统做法通常借助临时变量完成交换：
let width = 300;
let height = 400;
let temp = width;
width = height;
height = temp;
console.log(width, height)若采用数组解构赋值，实现过程将大幅简化：
let width = 300;
let height = 400;
[width, height] = [height, width];
console.log(width, height)5. 数组拷贝
可结合解构赋值与 rest 运算符实现数组拷贝：
const rgb = [200, 255, 100];
const [...newRgb] = rgb;
// 等同于 const newRgb = [...rgb]
console.log(newRgb)四、解构赋值注意事项
为防止从数组中提取出值为 undefined 的对象，可在表达式左侧数组中为任意对象预设默认值。
含义解析：若定义变量或其值被设置为 undefined，而 null、空字符串、false 在变量解析过程中均视为有效值，此时默认赋值机制将失效。
示例如下：
const {a = '1', b = '2', c = '3', d = '4', e = '5'} = {a: 'a', b: null, c: undefined, d: false, e: ''}
console.log(a); //a
console.log(b); //null
console.log(c); //3
console.log(d); //false
console.log(e); // ""若仅依据属性存在与否来绑定默认值，可直接使用解构赋值。
总结
至此，关于 JavaScript 解构赋值的文章介绍完毕。如需了解更多 JavaScript 解构赋值相关内容，请检索本站往期文章或继续浏览后续相关文章。感谢大家的支持！
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58