解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值
var arr = [1, 2, 3]; //传统方式 var a = arr[0], b = arr[1], c = arr[2]; console.log(a, b, c); // 1 2 3 //解构方式 var [a, b, c] = arr; console.log(a, b, c); // 1 2 3
从上面的例子我们可以看出,要想获取一个数组中的值,我们可以利用传统的索引的方式,也可以声明一个数组变量来获取,第二种方式看起来更优雅。
如果上面的方法看起来我们的传统方法还过得去的话看下面的例子:
var arr = [1, [2, [3]]]; // 传统方法 var a = arr[0], b = arr[1][0], c = arr[1][1][0]; console.log(a, b, c);// 1 2 3 // 解构方法 var [a, [b, [c]]] = arr; console.log(a, b, c);// 1 2 3
多层数组嵌套的话我们就可以看出解构的强大之处了。再看下面的例子:
var arr = [1, 2, 3]; // 传统方式 function bar(a, b, c) { console.log(a, b, c); } bar(arr[0], arr[1], arr[2]); // 1 2 3 // 解构方式 function baz([a, b, c]) { console.log(a, b, c); } baz(arr); // 1 2 3
我们将一个数组传值应用到实际的应用中,可以是代码看起来更加简洁优雅,在多层数组中更能体现出来,如下:
var arr = [[1, 2], [3, 4], [5, 6]]; // 传统方法 for (var a of arr) { // 第一种 console.log(a[0], a[1]); // 1 2 3 4 5 6 // 第二种 for (var b of a) { console.log(b) // 1 2 3 4 5 6 } } // 解构方法 for (var [a, b] of arr) { console.log(a, b); // 1 2 3 4 5 6 }
我们要分别获取 arr 数组中的值,如果不去下标索引的话传统方式需要两层循环才能获取,如果用解构的话只需要循环一次,从而加快了运行速度。如果数组嵌套层数更多的话效果更明显。
对象赋值解构:
var obj = { name: \'zhangsan\', sex: 0, age: 26, son: { sonname: \'lisi\', sonsex: 1, sonage: 2 } }; var {name, sex, age, son} = obj; console.log(name, sex, age); //zhangsan 0 26 console.log(son); // { sonname: \'lisi\', sonsex: 1, sonage: 2 } var {name, sex, age, son:{sonname,sonsex,sonage}} = obj; console.log(name,sex,age,sonname,sonsex,sonage); // zhangsan 0 26 lisi 1 2
但是如果对象的子对象中又重名的就需要在解构时重命名,如下:
var obj = { name: \'zhangsan\', sex: 0, age: 26, son: { name: \'lisi\', sex: 1, age: 2 } }; var {name, sex, age, son} = obj; console.log(name, sex, age); //zhangsan 0 26 console.log(son); // { name: \'lisi\', sex: 1, age: 2 } var {name, sex, age, son: {name, sex, age}} = obj; console.log(name, sex, age, name, sex, age); // lisi 1 2 lisi 1 2 var {name, sex, age, son: {name: sonname, sex: sonsex, age: sonage}} = obj; console.log(name, sex, age, sonname, sonsex, sonage); // zhangsan 0 26 lisi 1 2
如果对象的子对象中有和父对象重名的变量名称,则会将父对象的变量值覆盖,重命名子对象的变量则不会,重命名规则为 (原变量名:新变量名)。
同样的我们也可以将对象解构应用到函数传参中,如下:
var obj = { name: \'zhangsan\', sex: 0, age: 26, son: { name: \'lisi\', sex: 1, age: 2 } }; // 传统方法 function foo(name,sex,age,son) { console.log(name,sex,age,son) } foo(obj.name,obj.sex,obj.age,obj.son); // zhangsan 0 26 { name: \'lisi\', sex: 1, age: 2 } // 解构方法 function foo({name,sex,age,son}) { console.log(name,sex,age,son) } foo(obj); // zhangsan 0 26 { name: \'lisi\', sex: 1, age: 2 } // 解构方法 子对象也进行解构,但是子对象中含有和父对象相同的变量名,不重命名会报错 function foo({name, sex, age, son: {name, sex, age}}) { console.log(name, sex, age, name, sex, age); // SyntaxError: Duplicate parameter name not allowed in this context } foo(obj); // SyntaxError: Duplicate parameter name not allowed in this context // 解构方法 子对象也进行解构,但是子对象中含有和父对象相同的变量名,将子对象重命名 function foo({name, sex, age, son: {name: sonname, sex: sonsex, age: sonage}}) { console.log(name, sex, age, sonname, sonsex, sonage); } foo(obj); // zhangsan 0 26 lisi 1 2
在上述方法中如果子对象也进行解构,子对象中有和父对象相同的变量名,则需要将子对象中和父对象相同的变量名进行重命名,当然也可以重命名父对象。只要没有相同的变量名即可。
解构也可以将数组与对象组合起来使用,如下循环结构:
var arr = [{name: \'aaa\', age: 26}, {name: \'bbb\', age: 27}, {name: \'ccc\', age: 28}]; for (var {age, name} of arr) { console.log(name, age); } //aaa 26 //bbb 27 //ccc 28
解构的特殊应用场景:
//变量互换 var x = 1, y = 2; var [x, y] = [y, x]; console.log(x, y); // 2 1 //字符串解构 var str = \'hello\'; var [a, b, c, d, e] = str; console.log(a, b, c, d, e); // h e l l o