es6的解构赋值学习（1）

　　相对es5的简单的“=”赋值来说，es6增加了一种新的赋值模式——解构赋值，按照它的规则，可以从数组和对象中提取值来对变量进行赋值，个人觉得方便了很多，但是这个模式有点恶心人，相比简单的“=”赋值来说，也更要花时间来理解，今天我们一起学习一下这个新的赋值方法。

　　看一行代码：

let [a,b,c] = [1,2,3];

　　这是一种最基本的数组解构赋值，等同于：

var a = 1;
var b = 2;
var c = 3;

　　相当于两边都是数组，它们的length相同，左边放变量，右边放值，一一对应，省了不少代码

　　如果length不同的话，会有两种情况：

　　

let [x, y] = [1, 2, 3];
//x=1
//y=2

let [a] = [];
//a=undefined;
let [a, b] = [1];
//a=1;
//b=undefined;

　　第一种：左边的length小于右边的，叫做不完全解构，变量都可以赋值成功，多余的值就多余了；

　　第二种：左边的length大于右边的，未超出的部分会正常解构并赋值，超出的变量在右边没有匹配的值，则解构失败，值定位undefined；

　　那如果两边的类型不同，举个栗子：一边是数组,另一边是非数组，则会报错，借用阮大神的话：

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

//上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 
//Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一
//个表达式）。

　　es6中还有默认值的概念，解构赋值也允许指定默认值：

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

　　我们可以看到，两边数组的length并不同，也没有赋值，但可以正常输出，是因为在声明变量时，给了变量一个默认值，若没有用其他方式给该变量赋值的话，则使用默认值,es6判断使用默认值的情况是给出了该位置的值为undefined（未给任何值的话默认是undefined）且必须“===”undefined，才会使用默认值：

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

　　上面的代码可以这样理解：

let x;
if ([undefined][0] === undefined) {
  x = 1;
} else {
  x = [undefined][0];
}


let x;
if ([null][0] === undefined) {
  x = 1;
} else {
  x = [null][0];
}

　　然后在变量数量多的情况下，可以引用解构赋值的其他变量，但该变量必须已经声明，且有一个顺序：后面的可以使用前面的，反之不可：

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError
let [x = y, y = 1] = [2];     // x=2,y=1

　　今天就写到这里吧，数组的解构赋值也差不多了，希望能给大家一点帮助，以后我会边学边整理随笔，大家一起进步。（感谢阮一峰大神的经验）

　　 

　　

转载于:https://www.cnblogs.com/dadSheng/p/6439056.html