ES6_03- 变量的解构赋值

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

---

1. 数组的解构赋值

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

1.1. 原理

• 从数组中提取值，按照对应位置，对变量赋值。
• 数组的元素按次序排列，变量的取值由位置决定。
• 只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

1.2. 完全解构与不完全解构

• 完全解构

        let [, , third] = ["aa", "bb", "cc"];
        third // "cc"

        let [a, b, ...z] = [1, 2, 3, 4, 5, 6];
        a; // 1
        b; // 2
        z; // [3, 4, 5, 6]

• 不完全解构：即等号左边的模式，只匹配一部分的等号右边的数组。

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

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

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

        let [foo] = [];
        foo // undefined

        let [bar, ooo] = [1];
        ooo // undefined

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

1.3. 嵌套数组进行解构

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

1.4. 默认值

• 解构赋值允许指定默认值。
• 注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

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

        let [a, b = 3] = [2, undefined];
        a // 2
        b // 3

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

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

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

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

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

        let [a = b, b = 3] = [];
        a // ReferenceError: a is not defined

2. 对象的解构赋值

2.1. 原理

• 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

        let { baz } = { foo: 'aa', bar: 'bb' };
        baz // undefined

2.2. 完全解构与不完全解构

• 完全解构

        let { bar, foo } = { foo: 'aa', bar: 'bb' };
        bar // 'bb'
        foo // 'aa'

• 不完全解构

        let { bar } = { foo: 'aa', bar: 'bb' };
        bar // 'bb'

• 解构不成功，变量值等于undefined。

        let { baz } = { foo: 'aa', bar: 'bb' };
        baz // undefined

2.3. 嵌套对象进行解构

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

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

2.4. 默认值

• 对象的解构也可以指定默认值。

var {x, y = 5} = {x: 1};
x // 1
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

• 默认值生效的条件是，对象的属性值严格等于undefined。

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

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

2.5. 可修改属性名

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

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

• 下面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

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

2.6. 注意点

详情见《ECMAScript 6 入门》阮一峰
（1）如果要将一个已经声明的变量用于解构赋值，必须非常小心。
（2）解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。
（3）由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

// 上面代码对数组进行对象解构。数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3。

3. 字符串的解构赋值

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

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

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

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

4. 数值和布尔值的解构赋值

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

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

5. 函数参数的解构赋值

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

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

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

=============================================
！！！！！！！以下没看懂！！！！！！！

• 函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

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

• 为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

6. 用途

详情见《ECMAScript 6 入门》阮一峰
（1）交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

（2）从函数返回多个值
（3）函数参数的定义
（4）提取 JSON 数据
（5）函数参数的默认值
（6）遍历 Map 结构
（7）输入模块的指定方法