《ECMAScript 6 入门》变量解构赋值

基本语法

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

可以写成：

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

只要等号两边的模式相同，左边变量就会被赋予对应的值。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

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

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

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

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

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

let [foo] = [];
let [bar, foo] = [1];

以上两种情况都属于解构不成功，foo 的值就等于 undefined

对于Set解构，也可是使用数组的解构赋值

let [x, y, z] = new Set(['a', 'b', 'c']);
x // 'a'

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

默认值

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

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

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

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

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值

function f() {
  console.log('aaa');
}
let [x = f()] = [1];

上面代码中，因为 x 能取到值，所以函数 f 根本不会去执行。

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

let [x = y, y = 1] = []; //ReferenceError

---

对象的结构赋值

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

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

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

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

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

let obj = {
  p: [
    'hello',
    { y: 'world' }
  ]
}
let { p: [x, { y }] } = obj;
x // 'hello'
y // 'world'

注意，这时 p 是模式，不是变量，因此不会被赋值。如果 p 也要作为变量赋值，可以写成

let {p, p: [x, { y }]} = obj;
x // 'hello'
y // 'world'
p // ['hello', {y: 'world'}]

字符串的结构赋值

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 { toString: s } = 123;
s === Number.prototype.toString // true

数值的包装对象有toString属性，因此变量 s 能取到值。

结构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于 undefined 和 null 无法转为对象，所以对它们进行结构赋值，都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y} = null; // TypeError

函数参数的解构赋值

function add([x, y]) {
  return x + y;
}
add([1, 2]); // 3

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

圆括号问题

对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到(或即系不到)等号才能知道。
所以最好不要在模式中放置圆括号。

不能使用圆括号的情况

1. 变量声明语句
   let [(a)] = [1];
2. 函数参数
   function f([(z)]) { return z; }
3. 赋值语句的模式
   ({p: a}) = { p: 42 }

以上代码全部报错。

可以使用圆括号的情况

[(b)] = [3];  // 正确
({ p: (d) } = {}); //正确
[(parseInt.prop)] = [3]; //正确

用途

1. 交换变量的值

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

2. 从函数返回多个值

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

3. 函数参数的定义
4. 提取JSON的数据
5. 函数参数的默认值

function example({name = 'abc', age = 12}) {
}

6. 遍历Map解构
7. 输入模块的指定方法

const { View, Span } = require("react-native");