es6的解构赋值学习(1)

  相对es5的简单的“=”赋值来讲,es6增长了一种新的赋值模式——解构赋值,按照它的规则,能够从数组和对象中提取值来对变量进行赋值,我的以为方便了不少,可是这个模式有点恶心人,相比简单的“=”赋值来讲,也更要花时间来理解,今天咱们一块儿学习一下这个新的赋值方法。es6

  看一行代码:数组

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

  这是一种最基本的数组解构赋值,等同于:学习

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

  至关于两边都是数组,它们的length相同,左边放变量,右边放值,一一对应,省了很多代码es5

  若是length不一样的话,会有两种状况:spa

  

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

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

  第一种:左边的length小于右边的,叫作不彻底解构,变量均可以赋值成功,多余的值就多余了;code

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

  那若是两边的类型不一样,举个栗子:一边是数组,另外一边是非数组,则会报错,借用阮大神的话:blog

// 报错
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,才会使用默认值:class

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

  今天就写到这里吧,数组的解构赋值也差很少了,但愿能给你们一点帮助,之后我会边学边整理随笔,你们一块儿进步。(感谢阮一峰大神的经验)

相关文章
相关标签/搜索