目录

• 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);

文章图片

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

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

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

文章图片

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

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

文章图片

因为左边与右边的结构不匹配，右边索引为 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);

文章图片

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

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

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


2.2) 数组解构赋值的应用

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

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

文章图片

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

one
two
three

文章图片


交换变量的值

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

文章图片


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

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

文章图片

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

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

文章图片


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

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

文章图片


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

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

文章图片

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

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

文章图片

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

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

文章图片

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

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

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

文章图片


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

推荐阅读

• 

  莲子带芯的好还是不带芯的好
• 

  安卓手机wifi破解软件,安卓手机怎么破解?一晚可以破解
• 

  广州市东升医院2023年春节期间门诊安排
• 

  内关的作用与好处
• 

  静脉曲张吃药可以吃好吗?
• 

  感慨万端是什么意思 感慨万端的解释
• 

  plc培训班出来能工作吗，武汉plc培训后好找工作吗
• 

  妮维雅男士保湿啫喱 妮维雅男士保湿系列
• 

  立冬和冬至是一天吗
• 

  防诈骗简笔画教程防诈骗简笔画步骤
• 

  京东各行业数据分析,京东物流成本数据分析
• 

  二十四节气芒种的内涵寓意 芒种的内涵寓意为什么煮梅
• 

  algorand（可扩展的拜占庭协议）
• 

  口罩买什么样的好
• 

  Go|Go 语言 JSON 标准库的使用
• 

  月经期可以吃当归吗
• 

  遇到庆东锅炉指示面板不亮怎么办？3个处理方法帮助你
• 

  20180916v4.0目标和周检视第六周???吴文平
• 

  外貌协会的女生特点 外貌协会
• 

  给妈妈的礼物可以怎么做用纸

• 2022 Google 游戏开发者峰会来啦！
• 微信公众号文章插入附件教程
• 同一份数据，Redis为什么要存两次（）
• 机器学习|机器学习入门 05 —— Pandas使用
• JavaWeb|一篇学会HttpServletRequest
• 云原生安全实践
• 如何使用帆软BI直接分析明道云数据
• 腾讯云COS对象存储攻防
• 微软云对象存储攻防
• Java程序设计|Java——集合