ES6_入门(4)_数组的解构赋值
1 //2017/7/14 2 //变量的解构赋值(解构:Destructuring) 3 4 //(1)数组的解构赋值 5 6 let [a,b,c]=[1,2,3];//模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值。 7 8 //eg: 9 let [foo,[[bar],baz]]=[1,[[2],3]]; 10 console.log(foo);//1 11 console.log(bar);//2 12 console.log(baz);//3 13 14 let[,,third]=['foo','bar','baz']; 15 console.log(third);//baz 16 17 let [x,,y]=[1,2,3]; 18 console.log(x);//1 19 console.log(y);//3 20 21 let [head,...tail]=[1,2,3,4]; 22 console.log(head);//1 23 console.log(tail);//[2,3,4] 24 25 //如果解析不成功,变量的值就等于undefined。 26 //将剩余数组赋值给一个变量,下面例子中的y解析不成功,所以是undefined,剩余元素赋值给z,因此是一个空的数组。 27 let[x,y,...z]=['a']; 28 console.log(x);//a 29 console.log(y);//undefined 30 console.log(z);//[] 31 32 //注意:如果剩余元素右侧有一个逗号,会抛出错误的异常,因此剩余元素必须是数组的最后一个元素。 33 var [a,...b,]=[1,2,3]; 34 console.log(b);//报错:es6.html:285 Uncaught SyntaxError: Rest element must be last element 35 36 37 //如果等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错。 38 // 报错 39 let [foo] = 1; 40 let [foo] = false; 41 let [foo] = NaN; 42 let [foo] = undefined; 43 let [foo] = null; 44 let [foo] = {} 45 46 47 //解构赋值指定默认值 48 //注意:ES6内部使用严格相等运算符(===),判断一个位置是否有值,所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。 49 50 let [x=1]=[]; 51 console.log(x);//1 52 53 let[x=2]=[1]; 54 console.log(x);//1 55 56 //以上例子说明,但右边对应数组有相应的元素的时,左边的默认值就会失效,只有当右边没有相应位置的元素时,左边默认值才会生效。 57 58 59 //如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。 60 function f(){ 61 console.log('aaa'); 62 } 63 64 let[x=f()]=[1];//因为x可以取到值,所以上面的f函数不会执行,上面的等价于下面的代码。 65 66 67 68 69 let x; 70 if([1][0]===undefined){ 71 x=f(); 72 }else{ 73 x=[1][0]; 74 } 75 76 // 注意: [1] 是只含元素 1 的数组 77 // [0] 是取数组的第 0 个元素 78 // [1][0] 的结果就是 1 79 // [1][0] === undefined 只是个条件判断而已,即 1 === undefined 80 81 82 //默认值可以引用解构赋值的其他变量,但该变量必须已经声明。 83 84 let [x = 1, y = x] = []; // x=1; y=1 85 let [x = 1, y = x] = [2]; // x=2; y=2 86 let [x = 1, y = x] = [1, 2]; // x=1; y=2 87 let [x = y, y = 1] = []; // ReferenceError 88 89 // 上面最后一个表达式之所以会报错,是因为x用到默认值y时,y还没有声明。