搞定前端面试官-变量的解构赋值

分类

数组的解构赋值

let [a, b, c] = [1, 2, 3];
右侧不是数组则赋值失败

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

对象可以嵌套解构赋值

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

也可以添加默认值

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

字符串的解构赋值

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

数值和布尔值的解构赋值

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

函数参数的解构赋值

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

圆括号问题

平时尽量不要用（）只有一种情况可以–应用赋值语句的非模式部分，可以使用圆括号。

[(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.函数参数的定义

function f([x, y, z]) {...
        }
        f([1, 2, 3]);

4.提取 JSON 数据

let jsonData = {
            id: 42,
            status: "OK",
            data: [867, 5309]
        };
        let {
            id,
            status,
            data: number
        } = jsonData;
        console.log(id, status, number);

5.函数参数的默认值

6.遍历 Map 结构

  const map = new Map();
        map.set('first', 'hello');
        map.set('second', 'world');
        for (let [key, value] of map) {
            console.log(key + " is " + value);
        }

7.输入模块的指定方法

const {
            SourceMapConsumer,
            SourceNode
        } = require("source-map")