javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a =
let obj = {
a: 1,
b: 2
}
// 取值
let a = obj.a
let b = obj.b
每次取值既要确定对象属性名,还得重新定义一个变量占用多一行,代码行数和重复的声明a,使得代码不够简洁,能否通过左边变量名,匹配到右边的属性名从而取得对应的值,es6解构语法核心就基于这样的模式匹配思想
上面的问题解构方案:
let obj = {
a: 1,
b: 2
}
// 取值
let {a, b} = obj
// a=1 b=2
很明显看到,我们无需在右侧显式声明取值属性名,完全依据右边结构进行对应取值,非常优雅
1.对象声明解构
let obj = {
a: 1,
b: 2
}
// 取值
let {a, b} = obj
// a=1 b=2
2.对象赋值解构
let a, b
let obj = {
a: 1,
b: 2
}
// 取值
({a, b} = obj)
// 更常见的场景是变量c d被声明到全局,这种情况在Vue很常见,数据被提前声明到data选项,数据访问一般都是this.xxxdata,此时就很有用了
({a:c, b:d} = obj)
3.变量交换
[x,y] = [y,x]
4.数组解构
let [first,] = arr//获取
let [first, ...rest] = arr//获取第一个,以及剩余参数
5.函数对象实参解构
function buildAnimal({accessory = "", animal = "cat", color = 'rainbow', hairType = 'straight'} = {})
{...}
更多关于ES6下的Javascript使用小技巧请查看下面的相关链接
--结束END--
本文标题: ES6下javascript解构赋值常见用法总结
本文链接: https://www.lsjlt.com/news/138047.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0