一篇文章带你了解JavaScript的解构赋值

2022-03-16

目录

1.?什么是解构赋值？
2.?数组的解构赋值

2.1) 数组解构赋值的默认值
2.2) 数组解构赋值的应用

类数组中的应用
交换变量的值

3.?对象的解构赋值

3.1) 对象解构赋值的默认值

3.2)对一个已声明的变量解构赋值

4.?字符串的解构赋值

总结

1.?什么是解构赋值？

将属性/值从对象/数组中取出,赋值给其他变量

通俗来说，即解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量。
让我们通过一个例子看看：

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

一篇文章带你了解JavaScript的解构赋值

文章图片

将数组的值获取出来，赋值给a, b, c

2.?数组的解构赋值模式（结构）匹配
即左边与右边的结构相同 (如左边是数组，右边也要是数组)
索引值相同的完成赋值
即左边与右边的索引值相同的完成赋值
通过例子来理解一下：
对于第一个：

let [e, [ , , f], g] = [1, [2, 4, 5], 3]; // 可以正确输出console.log(e, f, g);

一篇文章带你了解JavaScript的解构赋值

文章图片

但是如果写成这样，则会报错。

let [e, [ , , f], [g]] = [1, [2, 4, 5], 3]; console.log(e, f, g);

一篇文章带你了解JavaScript的解构赋值

文章图片

因为左边与右边的结构不匹配，右边索引为 2 的地方是个 3，而左边是个数组，无法完成匹配。
对于第二个

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

索引值相同的完成赋值，a的索引值是 1，对应右边索引值为 1 的值是 2，所以a = 2。

2.1) 数组解构赋值的默认值

const [a, b] = []; console.log(a, b);

一篇文章带你了解JavaScript的解构赋值

文章图片

当左边对应的索引在右边为undefined时(如右边不存在这个值的情况)，此时赋值的是undefined
那我们如何修改这个赋值呢？
通过在左边给变量写个 = 想要的值，即默认值。
所以，当左边的值=== undefined时，如果有默认值，左边的值会等于默认值

const [a = 1, b = 2] = []; console.log(a, b);

【一篇文章带你了解JavaScript的解构赋值】

一篇文章带你了解JavaScript的解构赋值

文章图片

2.2) 数组解构赋值的应用

类数组中的应用比如arguments中的应用
将arguments中的值提取出来

function fun() {const [a, b, c] = arguments; console.log(a, b); }fun(1, 2, 3, 4);

一篇文章带你了解JavaScript的解构赋值

文章图片

比如NodeList中的应用
在这里，将p元素提取出来

解构赋值的应用 - 锐客网one
two
three

一篇文章带你了解JavaScript的解构赋值

文章图片

交换变量的值

let a = 1, b = 2; [a, b] = [b, a]; // 相当于 [a, b] = [2, 1]; console.log(a, b);

一篇文章带你了解JavaScript的解构赋值

文章图片

3.?对象的解构赋值模式（结构）匹配
即左边与右边的结构相同 (如左边是对象，右边也要是对象)
属性名相同的完成赋值
即左边与右边的属性名相同的完成赋值
通过例子来理解一下：

const {val, objName} = {objName: "object", val: 1}; console.log(objName, val);

一篇文章带你了解JavaScript的解构赋值

文章图片

属性名相同的完成赋值，不用管左边属性名出现的顺序是否与右边出现的顺序一致。
这里还可以这么写，给新的变量名赋值：

const {val: vvv, objName: objnnn} = {objName: "object", val: 1}; console.log(objnnn, vvv);

一篇文章带你了解JavaScript的解构赋值

文章图片

3.1) 对象解构赋值的默认值
与数组解构赋值类似
对象的属性值=== undefined时，如果有默认值，等于对应的默认值

const {age: val = 18} = {}; console.log(val);

一篇文章带你了解JavaScript的解构赋值

文章图片

3.2)对一个已声明的变量解构赋值
在数组中，我们可以直接这么写：

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

一篇文章带你了解JavaScript的解构赋值

文章图片

但是，在对象中，直接这么写则会报错

let a, b; {a, b} = {a: 1, b: 2}; console.log(a, b);

一篇文章带你了解JavaScript的解构赋值

文章图片

因为在这里，左边的花括号，浏览器会把它当成是一个代码块。
那么，我们如何解决这个问题呢？
在外面加个圆括号

let a, b; ({a, b} = {a: 1, b: 2}); console.log(a, b);

一篇文章带你了解JavaScript的解构赋值

文章图片

除此之外，对象的解构赋值可以取到继承的属性！

4.?字符串的解构赋值可以用数组和对象的形式进行结构赋值

const [a, b] = "Hello"; // 左边对象的属性名对应右边字符串的字符下标序号const {2: c, 4: e} = "Hello"; console.log(a, b, c, e);

一篇文章带你了解JavaScript的解构赋值

文章图片

总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

推荐阅读

上一篇：Docker容器部署consul的详细步骤

下一篇：Java毕业设计实战之健身器材商城系统的实现