ES6-2 解构赋值

数组的解构赋值

基本用法

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

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

如果解构不成功，变量的值就等于undefined。

let [foo] = [];
let [bar, foo] = [1];
console.log(foo) // undefined

如果左边的模只匹配一部分的右边的数组，为不完全解构，依然可以成功。

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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

如果等号的右边不是数组那么将会报错。
只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

默认值

解构赋值允许指定默认值。
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

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: y is not defined

对象的解构赋值

基本用法

对象解构赋值是按照属性名来解构

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

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

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

let {slice} = []; // 把空数组当做对象解构 将slice方法赋值给slice
console.log(slice.call(document.getElementsByTagName("div")));

解构也可以用于嵌套结构的对象。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj; // 这时p是模式，不是变量，因此不会被赋值。
x // "Hello"
y // "World"

如果p也要作为变量赋值

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

默认值

对象的解构也可以指定默认值。
默认值生效的条件是，对象的属性值严格等于undefined。

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

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

字符串的解构赋值

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

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

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

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

解构赋值的用途

交换变量

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

// 冒泡
var arr=[2,4,6,8,10,1,3,5,7,9];
var len=arr.length-1;
while(len>0){
    for(let i=0;i<len;i++){
        if(arr[i]<arr[i+1]){
            // var temp=arr[i];
            // arr[i]=arr[i+1];
            // arr[i+1]=temp;
            [arr[i],arr[i+1]]=[arr[i+1],arr[i]];
        }
    }
    len--;
}
console.log(arr);

从函数返回多个值

函数参数的定义

提取JSON数据

var str = '{"a":1,"b":10}';
var {a,b} = JSON.parse(str);
console.log(a, b); // 1 10

函数参数的默认值

输入模块的指定方法