es6解构

数组的解构赋值:

let a =1;

let b =2;

let c =3;

es6 允许写成下面这样:

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

上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值, 只要等号两边的模式相同,左边的变量就会被赋予对应的值。

使用嵌套数组进行解构的例子。

let [ , , third ] =[ ' foo ', ' bar ',  ' baz ' ] ;

third   // ' baz '


let [ head,   ...tail ] =[ 1, 2, 3 ];

head   // 1 

tail      //  [2,3,4]


let [ x,y, ...z ]  = [ ' a ' ] ;

x //  ' a ' 

y  // undefinde 

z  // []

如果解构不成功,变量的值就等于undefined .

另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

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

x // 1

y // 2


如果等号的右边不是数组 ,那么将会报错。

let [ foo ] = 1 ;

let [ foo ] = {};

默认值:

解构赋值允许指定默认值.

let [ foo =true ] = [];

foo // true


对象的解构赋值:

let { foo, bar } ={ foo: ' aaa ', bar: ' bbb ' };

foo  // ' aaa '

bar //  ' bbb '

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

如果变量名与属性名不一致,必须写成下面这样.

let  { foo: baz } ={ foo: " aaa" ,  bar: ' bbb ' };

bar   //  ' aaa ' 


这实际上说明了,对象的解构赋值是下面形式的简写:

let  { foo : foo , bar : bar  } = { foo : 'aaa', bar : '  bbb '  };


字符串的解构赋值:

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [ a, b] = ' he';

a // ' h '

b //  ' e '


函数参数的解构赋值:

function fn( [ x, y ] ) {

return  x + y ;

}

fn ( [ 1, 2 ] );   //3 

上面代码中,函数add 的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y 对于函数内部的代码来说,它们能感受到的参数就是x和y.

函数参数的解构也可以使用默认值。

function fn ( { x=0 , y=0 } = {} ) {

return  [ x , y  ] ;

}

fn( { x:3, y:8 } );      //[ 3  , 8 ] ;

fn( { x:3 } ) ;           //[ 3, 0 ]

fn ( {  } )                //[ 0, 0 ]

fn ()                       //[ 0, 0 ]


最近在用react-navigation里面有好多的es6语法,在一点点熟悉中.

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容