变量的解构赋值

解构赋值

解构赋值是ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值；

解构赋值主要有一下几种

数组的解构赋值

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

允许有默认值

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

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

对象的解构赋值

对象的解构和数组不同的地方是，数组的元素必须是按次序排列的，变量的值由它的位置决定；对象的属性是无序的，变量名与属性名相同就可以了。

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

如果变量名和属性名不一致，或者想要给这个变量名和属性名不一样，可以这样使用。

var {foo: baz} = {foo: 'aaa', bar:'bbb'}
bar//'aaa'

这相当于给给变量赋值，而且变量名不需要和属性名一样。

如果对一个已经声明的变量，需要谨慎

let x;
{x} = {x: 1};//SyntaxError

因为Javascript引擎会将{x}理解成一个代码块，从而发生语法错误。

({x} = {x:1})

字符串解构赋值

let [a,b,c,d,e] = 'hello';
a//'h'
b//'e'

类似数组的对象都有一个length属性，因此可以对这个属性解构赋值

let {length: len} = 'hello';
len//5

数值和布尔值的解构赋值

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

函数参数的解构赋值

function add([x, y]){
  return x + y;
}

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

ES6内部使用的是严格相等运算符（===），判断一个位置是否有值。如果一个组员不严格等于undefined,默认值是不会生效的。

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

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

let {x=3} = {x: undefined};
x//3

let {x=3} = {x:null};
x//null;

变量的解构赋值的用途

• 交换变量的值

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

• 从函数中返回多个值

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
    

• 函数参数的赋值

• 提取JSON数据

• 函数参数的默认值。

     指定了默认值，就可以避免在函数体内写var foo = foo || "init".

• 遍历Map结构。

     任何部署了Iterator接口的对象，都可以用for...of循环遍历。