解构通俗点说，就是通过一种特定格式，快捷的读取对象/数组中的数据的方法,
es6之前，我们通过对象名称[键] 读取数据
1 var User = {
2 'name' : 'ghostwu',
3 'age' : 22
4 };
5 console.log( User.name, User.age ); //ghostwu, 22
1 var User = {
2 'name' : 'ghostwu',
3 'age' : 22
4 };
5 let { name, age } = User;
6 console.log( name, age ); //ghostwu 22
上面第5行就是一个简单的数据解构过程:
1,右边如果是对象,左边解构的语法也要用对象格式, 如果解构的数据是数组，左边就用数组格式
2,name, age是局部变量
3,解构出来的变量 一定要是 对象中能够查找到的属性名
4,如果解构出来的属性在对象中查找不到，值为undefined
1 var User = {
2 'name' : 'ghostwu',
3 'age' : 22
4 };
5 let { name1, age1 } = User;
6 console.log( name1, age1 ); //undefined, undefined
解构出来的变量虽然是跟属性名称相同，但是他不再是属性，而是外部的变量，这个变量名也可以被修改， 不一定要跟属性同名
1 var User = {
2 'name' : 'ghostwu',
3 'age' : 22
4 };
5 //解构出来的变量可以更改名称
6 let { name : name1, age : age1 } = User;
7 // console.log( name, age ); //报错, 因为name和age的名称已经被改了
8 console.log( name1, age1 ); //ghost, 22
更改解构出来的变量名称的语法： 旧的名称 : 新的名称
1 var User = {
2 'name': 'ghostwu',
3 'age': 22
4 };
5
6 let { name, age, sex } = User;
7 // 解构出来的属性，如果不存在，默认值为undefined
8 console.log( name, age, sex ); //ghost 22 undefined
1 var User = {
2 'name': 'ghostwu',
3 'age': 22
4 };
5 // 解构出来的值 可以赋值 一个默认的值
6 let { name, age, sex = 'man' } = User;
7 console.log( name, age, sex );
上述实例，为sex赋值了一个默认值 'man';
解构数组
1 let arr = [ 10, 20, 30, 40 ];
2
3 // 数组用[]解构
4 let [ one, two ] = arr;
5 console.log( one, two ); //10 20
1 let arr = [ 10, 20, 30, 40 ];
2 // 对于不需要解构的值，可以用逗号占位
3 let [ , , , a ] = arr;
4 console.log( a ); //40
解构嵌套数组
1 let arr = [ 10, [ 20, 30 ], 40 ];
2 console.log( arr[1][1] ); //30
3 let [ one, two, three, four ] = arr;
4 console.log( one, two, three, four ); //10 [20, 30] 40 undefined
5 [ one, [ two, three ], four ] = arr; //前面不要let,否则会报重定义错误
6 console.log( one, two, three, four ); //10 20 30 40
在以前，我们交换变量，一般的做法是借助第三个变量， 而现在有了解构之后，我们可以直接交换
1 /*
2 交换两个变量的值
3 */
4 let a = 10, b = 20;
5 [ a, b ] = [ b, a ]; //前面不要加let,否则会报 重定义错误
6 console.log( a, b ); //20, 10
利用解构出来的值，修改局部变量的值
1 let User = {
2 name : 'ghostwu',
3 age : 22
4 },
5 name = 'zhangsan',
6 age = 30;
7
8 //小括号： 把下面这个 转成解构表达式, 如果不用小括号会报错
9 ({ name, age } = User);
10 console.log( name, age ); //ghostwu, 22
1 let name = 'zhangsan', age = 40;
2 ({ name, age } = {
3 name,
4 age
5 });
6
7 console.log( name, age ); //zhangsan 40
上述实例，是一个对象赋值的简写语法，你还记得吗？
1 let User = {
2 name : 'ghostwu',
3 age : 22
4 };
5
6 //重命名局部变量，mySex:赋初始值
7 let { name : myName, age : myAge, sex : mySex = 'man' } = User;
8 console.log( myName, myAge, mySex ); //ghostwu 22 man
解构表达式传参
1 let User = {
2 name : 'ghostwu',
3 age : 22
4 };
5
6 function show( obj ){
7 console.log( obj ); //obj其实就是User对象
8 console.log( obj === User ); //true
9 //函数中可以访问在参数中解构出来的变量
10 console.log( name, age ); //ghostwu, 22
11 }
12 show( { name, age } = User ); //表达式传值，整个表达式的值 取决于右边，所以把User传给了obj
13 console.log( name, age ); //ghostwu, 22
嵌套对象的解构
1 let User = {
2 name : 'ghostwu',
3 age : 22,
4 class : {
5 group1 : {
6 one : '王超',
7 two : '马汉'
8 },
9 group2 : {
10 one : '张龙',
11 two : '赵虎'
12 }
13 }
14 };
15 //在User对象解构class, 在class中解构group1
16 let { class : { group1 } } = User;
17 console.log( group1.one ); //王超
18 console.log( group1.two ); //马汉
19
20 //在User对象解构class, 在class中解构group1, 在group1中解构one, two
21 ({ class : { group1 : { one, two } } } = User);
22 console.log( one, two ); //王超, 马汉
23
24 //重命名group1 为 diyizu
25 ({ class : { group1 : diyizu } } = User);
26 console.log( diyizu.one ); //王超
27 console.log( diyizu.two ); //马汉
28
29 //three 赋默认值
30 ({ class : { group1 : { one, two, three = '展昭' } } } = User);
31 console.log( one, two, three );//王超,马汉,展昭
解构中的不定参数(...)
let arr = [ 10, 20, 30 ];
let [ one, ...others ] = arr;
console.log( others.length ); //2
console.log( one ); //10
console.log( others[0] ); //20
console.log( others[1] ); //30
1 //es6之前，用concat复制数组
2 let arr = [ 10, 20, 30 ];
3 let newArr = arr.concat();
4 console.log( newArr );
1 //用解构与不定参数结合 复制 数组
2 let arr = [ 10, 20, 30 ];
3 let [ ...newArr ] = arr;
4 console.log( newArr );
最后一道综合练习题： 对象与数组的混合解构，能看懂，基本就算掌握了
1 let User = {
2 name : 'ghostwu',
3 age : 22,
4 class : {
5 group1 : {
6 one : '王超',
7 two : '马汉'
8 },
9 group2 : {
10 one : '张龙',
11 two : '赵虎'
12 }
13 },
14 arr : [ 10, 20, 30 ]
15 };
16
17 // let { name, age, class : { group1 }, arr } = User;
18 let { name, age, class : { group1, group2 }, arr : [ one, two, three ] } = User;
19 // console.log( name, age, group1.one, group1.two, arr );
20 console.log( name, age, group1.one, group1.two, group2.one, group2.two, one, two, three );
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
