ES6中解构赋值的使用案例

发布时间:2020-11-10 11:20:50 作者:小新
来源:亿速云 阅读:214

这篇文章将为大家详细讲解有关ES6中解构赋值的使用案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

实不相瞒,解构赋值非常叼,特别是和其他es6一起使用的时候,那如何简单的说解构赋值呢,打个比方:解构赋值就是一个硬币拆分机,将所有的一毛、五毛、一块硬币投入硬币拆分机,他就自动将所有的硬币分好了,拿出你要的就行了!

解构数组

可以从一个数组从取出你想要的一个数据或者一组数据

普通

let [a, b, c]=[1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

和剩余参数一起用

let [a, b, ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5]

省略一些参数

let [a, , ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(c) // [3,4,5]

参数不够

let [a, b, c]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

参数不够又不想要undefined,可以使用默认参数

let [a, b, c=3]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

对已有变量解构赋值

let a, b
[a, b]=[1,2]
console.log(a, b)// 1,2

有趣的数组解构栗子

交换两个变量

let a=1,b=2
[a, b]=[b, a]
console.log(a) // 2
console.log(b) // 1

获取一个正则匹配的结果

let [,match]="hello world".match(/h(e)/) 
// 匹配的结果是 ["he", "e", index: 0, input: "hello world", groups: undefined]

console.log(match) // 'e'

解构对象

可以从对象中取出对象的一个属性值,或者一个子对象

普通

let {a, b}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2

剩余属性

let {a,...b}={a:1,b:2,c:3}
console.log(a) // 1
console.log(b) // {b:2,c:3}

属性不够

let {a, b, c}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

属性不够可以使用默认参数

let {a, b, c=3}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

给新的变量赋值

let {a:aa, b:bb}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2

给新的变量赋值并提供默认值

let {a:aa, b:bb, c:cc=3}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2
console.log(cc) // 3

很深的对象也可以解构

let {name, books:[book]}={name:"haha",books:['book1']}
console.log(name) // 'haha'
console.log(book) // 'book1'

迭代中的解构

for(let {name} of [{name:1},{name:2}]){
    console.log(name) // 1 2
}

解构函数形参

let register({name, pwd}){
    console.log(name, pwd)
}
register({name:'1',pwd:'2'}) //1,2

给已有变量赋值,比较特殊

let a,b
({a, b}={a:1,b:2}) // 需要提升优先级,否则 {a, b} 会被解析成代码块
console.log(a, b)// 1, 2

关于ES6中解构赋值的使用案例就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. ES6:变量的解构赋值
  2. ES6中数组的解构赋值如何使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

es6 javascript

上一篇:XML使用JSON有哪些好处

下一篇:微信jssdk逻辑在vue中的使用案例

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》