ES6中解构赋值的使用案例-创新互联
这篇文章将为大家详细讲解有关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中解构赋值的使用案例就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
名称栏目:ES6中解构赋值的使用案例-创新互联
当前链接:http://scyanting.com/article/ddshgj.html