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 相关文章推荐
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JavaScript函数详解
Nov 17 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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 date函数参数详解
2006/11/27 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python获取linux系统信息的三种方法
2020/10/14 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
什么时候需要进行强制类型转换
2016/09/03 面试题
自动化专业个人求职信范文
2013/11/29 职场文书
英语自荐信常用语句
2013/12/13 职场文书
护理专业自荐信范文
2014/02/26 职场文书
高三霸气励志标语
2014/06/24 职场文书
美丽的大脚观后感
2015/06/03 职场文书
高二数学教学反思
2016/02/18 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android