📜  JavaScript 中的解构赋值

📅  最后修改于: 2022-05-13 01:56:25.562000             🧑  作者: Mango

JavaScript 中的解构赋值

解构赋值是一个 JavaScript 表达式,它允许将数组中的值或对象中的属性解包到不同的变量中,数据可以从数组、对象、嵌套对象中提取并分配给变量。在左侧的解构赋值中定义了应该从源变量中解压缩的值。

数组提取的一般实现方式如下图所示:
例子:


输出:

alpha
beta

句法:

  • 数组解构:
    var x, y;
    [x, y] = [10, 20];
    console.log(x); // 10
    console.log(y); // 20

    或者

    [x, y, ...restof] = [10, 20, 30, 40, 50];
    console.log(x); // 10
    console.log(y); // 20
    console.log(restof); // [30, 40, 50]
  • 对象解构:
    ({ x, y} = { x: 10, y: 20 });
    console.log(x); // 10
    console.log(y); // 20

    或者

    ({x, y, ...restof} = {x: 10, y: 20, m: 30, n: 40});
    console.log(x); // 10
    console.log(y); // 20
    console.log(restof); // {m: 30, n: 40}

数组解构:在 JavaScript 数组可能的情况下使用解构赋值,下面列出了所有示例:

  • 示例 1:当使用解构赋值时,可以使用以下实现来完成相同的提取。
    
    

    输出:

    alpha
    beta
    alpha
    beta
  • 示例 2:也可以使用逗号分隔符跳过数组元素。单个逗号可用于跳过单个数组元素。扩展运算符和数组解构之间的一个关键区别是扩展运算符将所有数组元素解压缩到一个逗号分隔的列表中,这不允许我们选择要分配给变量的元素。要跳过整个数组,可以使用逗号的数量来完成,因为数组元素有很多。
    
    

    输出:

    alpha
    gamma
  • 示例 3:为了将一些数组元素分配给变量,并将其余数组元素分配给一个变量,可以通过使用rest运算符(...)来实现,如下面的实现。但是 rest运算符的一个限制是它仅适用于最后一个元素,这意味着无法获得子数组,而留下数组中的最后一个元素。
    
    

    输出:

    alpha
      0: "gamma"
      1: "delta"
    
  • 示例 4:也可以使用解构赋值来交换值,如下所示:
    
    

    输出:

    beta
    alpha
    
  • 示例 5:也可以从函数返回的数组中提取数据。使用解构赋值的一个优点是不需要在函数中操作整个对象,而只需在函数内部复制所需的字段。
    
    

    输出:

    alpha
    beta
  • 示例 6:ES5从对象中分配变量,其实现是
    
    

    输出:

    21
    -34
    47
    
    
    
  • 示例 7:上述在ES6中使用解构赋值的实现是。
     
    

    输出:

    21
    -34
    47

对象解构:

  • 示例:嵌套对象也可以使用解构语法进行解构。
    
    

    输出:

    15 16