JavaScript解构赋值的实用技巧指南
一、基本概念
为什么需要解构呢，先来看一个例子：
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. 数组的解构赋值
在使用数组解构时，实际上会使用迭代器将所需要的值与结构源分开。因此，我们可以对可迭代值使用数组结构，包括字符串、数组、集合、函数映射、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解构赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript设计模式之建造者模式介绍,将一个复杂对象的构造与它的表示相分离,使同样的创建过程可有不同的表示,这就叫做建造者模式,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JavaScript的执行机制，对此感兴趣的同学，可以参考下2021-04-04
这篇文章主要介绍了微信小程序关键字变色实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了JavaScript随机点名器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
在前端浏览器中我们可以通过使用JavaScript的navigator.getBattery()方法来获取当前系统的电池情况,本文将介绍如何使用这个API以及它在实际应用中的使用,需要的可以参考下2023-12-12
网络之美 JavaScript中Get和Set访问器的实现代码
前两天IE9 Beta版发布了，对于从事Web开发的朋友们来说真是个好消息啊，希望将来有一天各个浏览器都能遵循统一的标准。今天要和大家分享的是JavaScript中的Get和Set访问器，和C#中的访问器非常相似。2010-09-09
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。这篇文章主要给大家总结介绍了关于webpack学习教程之前端性能优化的相关资料，需要的朋友可以参考下。2017-12-12
本文章总结了利用jquery与js实现multiple全选与取消全选代码有需要参考的朋友可参考下2012-12-12
用js判断用户浏览器是否是XP SP2的IE6...2007-03-03
这篇文章主要介绍了JS对象和字符串之间互换操作,结合实例形式分析了javascript对象与字符串相互转换的原理与相关操作技巧,需要的朋友可以参考下2019-02-02
最新评论