解构赋值是对赋值运算符的扩展
它是一种针对数据或者对象进行模式匹配, 然后对其中的变量进行赋值
在代码书写上简洁易读, 语义更加清晰明了; 也方便了复杂对象中数据字段的获取
解构赋值表达式右边的部分表示解构的源; 解构表达式左边的部分表示解构的目标
数组模型的解构
基本数组的解构
- let [a,b,c] = [1,2,3];
- console.log(a,b,c)
- // a = 1
- // b = 2
- // c = 3
多层嵌套数组的解构
- let [a,[[b],c]] = [1,[[2],3]];
- console.log(a,b,c);
- // a = 1
- // b = 2
- // c = 3
数组中缺少了某一部分, 可忽略
- let [a, ,b] = [1,2,3];
- console.log(a,b);
- // a = 1
- // b = 3
不完全解构
- let [a = 1,b] = [];
- console.log(a,b);
- // a = 1
- // b = undefined
扩展运算符 (剩余运算符)
- let [a, ...b] = [1,2,3];
- console.log(a,b);
- // a = 2
- // b = [2,3]
在数组的解构赋值中, 解构的目标若为可遍历对象, 皆可进行解构赋值
- let [a,s,d,f,g] = "qwert";
- console.log(a,s,d,f,g);
- // a = "q"
- // s = "w"
- // d = "e"
- // f = "r"
- // g = "t"
特殊的解构赋值
- // undefined 表示空, 原样输出
- let [a = 3] = [undefined]
- console.log(a);
- // a = 3
- // 数组为空, 原样输出; a 原样输出, 把 a 的值赋给 b
- let [a = 3,b = a] = [];
- console.log(a,b);
- // a = 3
- // b = 3
- // 将 2 的值赋给 a, 将 a 的值赋给 b
- let [a = 1,b = a] = [2];
- console.log(a,b);
- // a = 2
- // b = 2
- // 将 1 解构给 a, 将 2 解构给 b
- let [a = 3,b = a] = [1,2];
- console.log(a,b);
- // a = 1
- // b = 2
来源: http://www.jianshu.com/p/9df93efc5c32