Javascript 解构赋值详情


Posted in Javascript onNovember 17, 2021

 

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 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
javascript Number 与 Math对象的介绍
Nov 17 #Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 #Javascript
JavaScript 对象创建的3种方法
Nov 17 #Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 #Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 #Javascript
JavaScript高级程序设计之变量与作用域
javascript对象3个属性特征
You might like
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
详解python时间模块中的datetime模块
2016/01/13 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python rstrip()方法实例详解
2018/11/11 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
Django模板Templates使用方法详解
2019/07/19 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
青年文明号事迹材料
2014/01/18 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
解除劳动合同协议书
2014/04/14 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android