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 相关文章推荐
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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实现手机归属地查询API接口实现代码
2012/08/27 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
Python实现的Excel文件读写类
2015/07/30 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python创建学生管理系统
2019/11/22 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
python属于跨平台语言码
2020/06/09 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
日语专业个人求职信范文
2014/02/02 职场文书
大学新生军训感言
2014/02/25 职场文书
企业宣传工作方案
2014/06/02 职场文书
cf战队收人口号
2014/06/21 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python