本篇文章给大家带来的内容是关于es6中解构赋值的使用讲解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
概述
实不相瞒，解构赋值非常叼，特别是和其他es6一起使用的时候，那如何简单的说解构赋值呢，打个比方：解构赋值就是一个硬币拆分机，将所有的一毛、五毛、一块硬币投入硬币拆分机，他就自动将所有的硬币分好了，拿出你要的就行了！
解构数组
可以从一个数组从取出你想要的一个数据或者一组数据
普通
let [a, b, c]=[1,2,3]console.log(a) // 1console.log(b) // 2console.log(c) // 3
登录后复制
和剩余参数一起用
let [a, b, ...c]=[1,2,3,4,5]console.log(a) // 1console.log(b) // 2console.log(c) // [3,4,5]
登录后复制
省略一些参数
let [a, , ...c]=[1,2,3,4,5]console.log(a) // 1console.log(c) // [3,4,5]
登录后复制
参数不够
let [a, b, c]=[1,2]console.log(a) // 1console.log(b) // 2console.log(c) // undefined
登录后复制
参数不够又不想要undefined，可以使用默认参数
let [a, b, c=3]=[1,2]console.log(a) // 1console.log(b) // 2console.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) // 2console.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) // 1console.log(b) // 2
登录后复制
剩余属性
let {a,...b}={a:1,b:2,c:3}console.log(a) // 1console.log(b) // {b:2,c:3}
登录后复制
属性不够
let {a, b, c}={a:1,b:2}console.log(a) // 1console.log(b) // 2console.log(c) // undefined
登录后复制
属性不够可以使用默认参数
let {a, b, c=3}={a:1,b:2}console.log(a) // 1console.log(b) // 2console.log(c) // 3
登录后复制
给新的变量赋值
let {a:aa, b:bb}={a:1,b:2}console.log(aa) // 1console.log(bb) // 2
登录后复制
给新的变量赋值并提供默认值
let {a:aa, b:bb, c:cc=3}={a:1,b:2}console.log(aa) // 1console.log(bb) // 2console.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中解构赋值的使用讲解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2736984.html
