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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
javascript操作向表格中动态加载数据
Aug 27 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
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
canvas绘制多边形
2017/02/24 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
js实现简单分页导航栏效果
2019/06/28 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python实现目录树生成示例
2014/03/28 Python
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python常用排序算法的实现代码
2019/11/08 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
区域销售经理职责
2013/12/22 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
优秀团队申报材料
2014/12/26 职场文书
工程部主管岗位职责
2015/02/12 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书