es6的解构赋值(尚待完续。。。)

解构赋值的意思:允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
数组的解构赋值
大多数变量赋值都是单独进行的
let a = 10
let b = 10

上面这样写法就单独进行简单的赋值,那么数组解构赋值如何去写,请看下面的例子
let [a] = 10
上面这样写会报错,左边[a]为匹配项,右边10为赋值项,如果右边不是数组,或不是可遍历的结构就会报错

——————
下面这样就不会报错,匹配项可以匹配到,而且这也算是单独赋值
let [a] = [10]
console.log(a) // 将会得到10
结构赋值的优点就是多个赋值,结构化赋值,下面的b会得到undefined,因为匹配项匹配到的赋值为undefined未定义
let [a,b] = [10]
console.log(a) // 10
console.log(b) // undefined
那我们来看看结构化多一点的赋值
let [a,[b,c,[d]],[e,f],g,[[h]]] = [1,[2,3,[4]],[5,6],7,[[8]]]
console.log(a,b,c,d,e,f,g,h) // 1,2,3,4,5,6,7,8
如果去掉[[8]]的二维数组,变为一维数组会怎样
let [a,[b,c,[d]],[e,f],g,[[h]]] = [1,[2,3,[4]],[5,6],7,[8]]
console.log(a,b,c,d,e,f,g,h) // 报错
解构不成功都为undefined
对象的解构赋值
对象的结构赋值其实和平常的对象声明赋值差不多,但还是有一定的区别的
let a = {
a1:1,
a2:2
}
console.log(a.a1, a.a2) // 1,2
let b = {
b1: 5,
b2: b.b1
}
console.log(b) // b 会报错not defined
来看下面的对象解构
let {b:{b1:b1,b2:b1}} = {b:{b1: ‘1’}}
字符串的解构赋值
数值布尔的解构赋值
函数参数的解构赋值
圆括号

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理