ES6 字符串、数值和布尔值、函数参数的解构赋值

    科技2022-07-15  131

    字符串的解析构造

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

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

    上面代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。

    上面代码中,数值和布尔值的包装对象都有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

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

    下面是另一个例子。

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

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

    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的值。如果解构失败,x和y等于默认值。

    注意,下面的写法会得到不一样的结果。

    unction 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]

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

    undefined就会触发函数参数的默认值。

    [1, undefined, 3].map((x = 'yes') => x); // [ 1, 'yes', 3 ]

    圆括号问题 解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。

    由此带来的问题是,如果模式中出现圆括号怎么处理。ES6的规则是,只要有可能导致解构的歧义,就不得使用圆括号。

    但是,这条规则实际上不那么容易辨别,处理起来相当麻烦。因此,建议只要有可能,就不要在模式中放置圆括号。

    不能使用圆括号的情况 以下三种解构赋值不得使用圆括号。 (1)变量声明语句中,不能带有圆括号。 (2)函数参数中,模式不能带有圆括号。 函数参数也属于变量声明,因此不能带有圆括号。

    可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。

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

    上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。

    用途 (1)交换变量的值

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

    上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。

    (2)从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

    // 返回一个数组 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } var { foo, bar } = example();

    (3)函数参数的定义 解构赋值可以方便地将一组参数与变量名对应起来。

    // 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});

    (4)提取JSON数据 解构赋值对提取JSON对象中的数据,尤其有用。

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

    (5)函数参数的默认值

    jQuery.ajax = function (url, { async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, // ... more config }) { // ... do stuff };

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

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

    如果只想获取键名,或者只想获取键值,可以写成下面这样。

    // 获取键名 for (let [key] of map) { // ... } // 获取键值 for (let [,value] of map) { // ... }

    (7)输入模块的指定方法 加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

    const { SourceMapConsumer, SourceNode } = require("source-map");
    Processed: 0.015, SQL: 8