ES6变量的解构赋值

时间:2023-03-09 15:00:44
ES6变量的解构赋值

 变量的解构赋值

   1.数组的解构赋值

   2.对象的解构赋值

   3.字符串的解构赋值

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

   5.函数参数的解构赋值

   6.圆括号问题

   7.用途 

   


    

  1.数组的解构赋值

   ES6 允许写成下面这样。

    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

     另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

    

    let [x, y] = [1, 2, 3];
    x // 1
    y // 2     let [a, [b], d] = [1, [2, 3], 4];
    a // 1
    b // 2
    d // 4
  上面两个例子,都属于不完全解构,但是可以成功。注意:如果等号的右边不是数组,那么将会报错。   解构赋值允许指定默认值。
    
    let [foo = true] = [];
    foo // true     let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

  

  2.对象的解构赋值

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

    

    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
  如果变量名与属性名不一致,必须写成下面这样。
    let obj = { first: 'hello', last: 'world' };
    let { first: f, last: l } = obj;
    f // 'hello'
    l // 'world'
  

   如果解构失败,变量的值等于undefined

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

   如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

    // 报错
    let {foo: {bar}} = {baz: 'baz'};
 

  

 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.数值和布尔值的解构赋值

  解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

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

  上面代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。

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

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

 5.函数参数的解构赋值 

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

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

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

  下面是另一个例子。

    [[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的参数是一个对象,通过对这个对象进行解构,得到变量xy的值。如果解构失败,xy等于默认值。


 6.圆括号问题

  解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。由此带来的问题是,如果模式中出现圆括号怎么处理。ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。但是,这条规则实际上不那么容易辨别,处理起来相当麻烦。因此,建议只要有可能,就不要在模式中放置圆括号。

  


  7.用途

(1)交换变量的值

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

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

(2)从函数返回多个值

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

    // 返回一个数组

    function example() {
     return [1, 2, 3];
    }
    let [a, b, c] = example();     // 返回一个对象     function example() {
     return {
     foo: 1,
     bar: 2
     };
    }
    let { 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 对象中的数据,尤其有用。

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

  上面代码可以快速提取 JSON 数据的值。