Javascript 解构赋值详情
更新时间：2021年11月15日 08:28:40 作者：刘志军
这篇文章主要介绍了Javascript 解构赋值详情，解构赋值是ES6中的特性，可以将对象或数组中的值同时赋值给多个变量。西阿棉一起来看看详细内容吧,需要的朋友可以参考下
1、数组解构
let [a, b, c] = [1,2,3] console.log(a, b, c) // 1 2 3
除了数组，任何可迭代的对象都支持被解构， 例如字符串
let [first, second] = "he" console.log(first, second) // h e
2、对象解构
赋值右侧是对象，左侧是包含在花括号内逗号隔开的变量名
let {a, b, c} = {a:1, b:2, c:3}
console.log(a,b,c) // 1 2 3
左侧的变量名需要和对象中的属性名相同，如果对应不上的话，左侧的变量名将被赋值为undefined。例如：
let {a,b, d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 undefined
如果变量名与属性名不一样，可以用冒号分隔符将属性名赋值给变量名
例如:
let {a,b, c:d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 3
3、不完全解构
解构赋值左侧变量个数可以不等于右侧数组中元素的个数
(1)左侧多余的变量会被设置为undefined，
let [a, b, c] = [1, 2] console.log(a, b, c) // 1 2 undefined
(2)右侧多余的值将被直接忽略
let [a, b, c] = [1, 2, 3, 4] console.log(a, b, c) // 1 2 3
(3)左侧可以用逗号跳过某些值
let [a, , c] = [1, 2, 3, 4] console.log(a, c) // 1 3
(4)右侧多余的值可以通过...收集到一个变量中
let [a, b, ...c] = [1, 2, 3, 4] console.log(a, b, c) // 1 2 [3, 4]
4、用解构赋值实现变量交换
let a = 1, b=2; [a, b] = [b, a] console.log(a) //2 console.log(b) //1
到此这篇关于Javascript 解构赋值详情的文章就介绍到这了,更多相关Javascript 解构赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍关于前端JavaScript的Promise，Promise 是异步编程的一种解决方案，下面文章我们就来看看Promise的基本用法及各种方法,需要的朋友可以参考一下，希望对你有所帮助2021-10-10
这篇文章主要介绍了Electron学习应用程序打包实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了微信小程序 在线支付功能的实现的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了java Spring事务回滚的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了js展示百度地图及添加标注实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家介绍了面试手写实现Promise.all过程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了微信小程序 自定义对话框实例详解的相关资料,这里附有实例代码及实现效果图，需要的朋友可以参考下2017-01-01
这篇文章主要介绍了微信小程序 SocketIO 的相关资料,这里给大家提供了一个简单实例，需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了JavaScript中单例模式的应用场景案例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了微信小程序中setInterval的使用方法的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
最新评论