ECMAScript 6学习笔记之----变量的解构赋值

数组的结构赋值

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

let [a, b, c] = [1, 2, 3]
print(a)

let [x, , y] = [1, 2, 3]
print(y)


let [x1, y1, z1] = new Set(['a', 'b', 'c']);
print(x1)

-----1
-----3
-----a

 只要某种数据结构具有 Iterator接口，都可以采用数组形式的解构赋值。

function* flibs() {
    let a = 0;
    let b = 1;
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

let [first, second, third, fourth, fifth, sixth] = flibs();
print(sixth)

对象的结构赋值

 解构不仅可以用于数组，还可以用于对象。

let {name, age} = {name: 'zc', age: 18};
print(name);
print(age);

-----zc
-----18

字符串的解析结构

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

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

函数参数的结构赋值

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

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

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



print([[1, 2], [3, 4]].map(([a, b]) => a + b));

-----3,7

解构赋值的作用

交换变量的值

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数据

解构赋值对提取 JSON 对象中的数据，尤其有用。

let jsonData = {
    tt: 42,
    status: "OK",
    data: [867, 5309],
};

let { tt, status, data: number } = jsonData;

print(number)

-----867,5309

遍历 Map 结构

 任何部署了 Iterator 接口的对象，都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Map();
map.set("id", 1);
map.set("status", 'ok');

for (let [key, value] of map) {
    print(key + " is " + value)
}

for (let [key] of map) {
    print(key);
}

-----status is ok
-----id
-----status