解构赋值理论上来说就是从给出的数据(比如数组,对象等)里提取出目标值,并赋值给变量。 如果数据不是对象类型,则会把它转成对象类型,如果不能转,则会报错。在实际的开发中,我们常常使用这种方式从数据中去值目的其一是为了使代码可读性增强,例如:
const {obj1} = obj.xxx.xxx.xxx;
从上面的伪代码可以看出,对于在obj对象的三层嵌套的属性,使用对象的解构赋注操作,将其值赋给自定义变量obj1,这样在后面每次使用该属性时,只需要用obj1代替即可,不用重复写obj.xxx.xxx.xxx。
在实际的开发中,解构赋值主要有两种使用场景,第一种是对数组进行解构赋值,第二种是对对象使用解构赋值。下面分别谈下:
1、对数组的解构赋值:
数组是通过顺序来提取的,提取到了就赋值给对应下标的变量。 变量可以随意命名。如果变量多了则多出的没匹配上的变量是undefined,如果变量少了则只赋值对应的变量。
var [first,second] = [1,2,3]
console.log(first, second) // 1 2
var [first,second, third, fourth] = [1,2,3]
console.log(first, second, third) // 1 2 3
console.log(fourth) // undefined
除此之外,对于数组的解构赋值还支持多层的嵌套结构;
var [one,[two]] = [1,[2],3]
console.log(two) // 2
2、对于对象的解构赋值
对象的解构不是按照顺序的,而是匹配key和变量名是否一致,如果一致,则把key对应的value赋值给变量。不一致的话就是undefined。
var {a, b} = {a:1, b:2}
console.log(a,b) // 1 2
var {c} = {a:1, b:2}
console.log(c) // undefined
如果你想自己自定义变量,也可以这样写,但是后面就只能通过自定义变量访问了。
var {a: first} = {a:1, b:2}
console.log(first) // 1
console.log(a) // a is not defined