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 相关文章推荐
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
jquery移动节点实例
Jan 14 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
javascript表单事件处理方法详解
May 15 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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代码优化技巧小结
2015/09/29 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
简单介绍Python中的floor()方法
2015/05/15 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python处理数据,存进hive表的方法
2018/07/04 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python最小二乘法矩阵
2019/01/02 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
Django如何使用redis作为缓存
2020/05/21 Python
如何将json数据转换为python数据
2020/09/04 Python
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
大学生咖啡店创业计划书
2014/01/21 职场文书
公司晚会主持词
2014/03/22 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
顶岗实习计划书
2015/01/16 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书