“数组解构” 在 JavaScript 中的一个示例是通过 “赋值模式” 进行的吗?

huangapple go评论70阅读模式
英文:

What is an example of "array destructuring" via "assignment pattern" in JavaScript?

问题

Here is the translation of the content you provided:

这个MDN关于解构赋值的文档说:“对于对象数组的解构,有两种解构模式:绑定模式赋值模式”。因此,应该有四种解构语法:

  • 类型1:通过绑定模式进行对象解构
  • 类型2:通过绑定模式进行数组解构
  • 类型3:通过赋值模式进行对象解构
  • 类型4:通过赋值模式进行数组解构

我已经多次阅读了MDN文档页面,但该页面似乎只提供了前三种类型的示例。谷歌搜索似乎也没有帮助。

Type 4的示例是什么呢?

更新1:

对于Type 3,MDN提供了以下示例:

// 这将把 a 赋值给 numbers[0],将 b 赋值给 number[1] 
({ a: numbers[0], b: numbers[1] } = obj);  

Type 4的等效示例是什么呢?谢谢!

英文:

This MDN documentation on destructuring assignment says that "for both object and array destructuring, there are two kinds of destructuring patterns: binding pattern and assignment pattern". Therefore, there should be four types of destructuring syntax:

  • Type 1: object destructuring via binding pattern
  • Type 2: array destructuring via binding pattern
  • Type 3: object destructuring via assignment pattern
  • Type 4: array destructuring via assignment pattern

I have read through the MDN documentation page many times, and the page seems to have provided examples only for the first 3 types. Googling doesn't seem to help either.

What would be an example of Type 4?

Thanks!

Update 1:

For Type 3, MDN provided this example:

// This assigns a to numbers[0] , and b to number[1] 
({ a: numbers[0], b: numbers[1] } = obj);  

What would be an equivalent example for Type 4? Thanks!

答案1

得分: 0

以下是您列出的四种类型的示例:

  • 类型1:通过绑定模式进行对象解构

    const person = {
      name: 'Alice',
      age: 30,
    };
    
    const { name, age } = person;
    
  • 类型2:通过绑定模式进行数组解构

    const rgb = [255, 200, 100];
    
    const [red, green, blue] = rgb;
    
  • 类型3:通过赋值模式进行对象解构

    const person = {
      name: 'Bob',
      age: 25,
    };
    
    let name, age;
    ({ name, age } = person);
    
  • 类型4:通过赋值模式进行数组解构

    const rgb = [255, 200, 100];
    
    let red, green, blue;
    [red, green, blue] = rgb;
    
  • 类型4的高级示例:

    const obj = {
      numbers: [1, 2, 3, 4, 5],
    };
    
    let a, b;
    
    // 这将a赋值为obj.numbers[0],将b赋值为obj.numbers[1]
    [a, b] = obj.numbers;
    

要使用赋值模式和数组解构来分别提取数组值的每个索引元素,请执行以下操作:

const obj = {
  numbers: [1, 2, 3, 4, 5],
};

let a, c, e;

// 这将obj.numbers[0]赋值给a,obj.numbers[2]赋值给c,obj.numbers[4]赋值给e
([a, , c, , e] = obj.numbers);

在此示例中,我们正在从obj对象中解构numbers数组,并将其第1、第3和第5个元素分别分配给变量ace。我们使用逗号之间的省略来跳过我们不想提取的元素。

英文:

Here are examples of each of the four types you listed:

  • Type 1: Object destructuring via binding pattern

    const person = {
      name: 'Alice',
      age: 30,
    };
    
    const { name, age } = person;
    
    
  • Type 2: Array destructuring via binding pattern

    const rgb = [255, 200, 100];
    
    const [red, green, blue] = rgb;
    
  • Type 3: Object destructuring via assignment pattern

    const person = {
      name: 'Bob',
      age: 25,
    };
    
    let name, age;
    ({ name, age } = person);
    
  • Type 4: Array destructuring via assignment pattern

    const rgb = [255, 200, 100];
    
    let red, green, blue;
    [red, green, blue] = rgb;
    
  • Advanced example for type 4:

    const obj = {
      numbers: [1, 2, 3, 4, 5],
    };
    
    let a, b;
    
    // This assigns a to obj.numbers[0], and b to obj.numbers[1]
    [a, b] = obj.numbers;
    

To surgically and individually extract each indexed element of an array value using array destructuring with the assignment pattern, do the following:

const obj = {
  numbers: [1, 2, 3, 4, 5],
};

let a, c, e;

// This assigns obj.numbers[0] to a, obj.numbers[2] to c, and obj.numbers[4] to c
([a, , c, , e] = obj.numbers);

In this example, we're destructuring the numbers array from the obj object and assigning its 1st, 3rd, and 5th elements to the variables a, c, and e respectively. We use elisions between the commas to skip the elements we don't want to extract.

答案2

得分: 0

MDN 应该用一个更清晰和简单的示例来解释类型 4。这里是示例:

const source = [1, 2, 3];
const target = [4, 5];

[target[0], target[1]] = source; // target = [1, 2]

此外,JavaScript 数组只是具有索引属性的对象,因此上面的代码也可以写成以下类型 3 格式:

({ 0: target[0], 1: target[1] } = source);
英文:

MDN should have explained Type 4 with a clearer and simpler example. Here you go:

const source = [1, 2, 3];
const target = [4, 5];

[target[0], target[1]] = source; // target = [1, 2]

Also, JavaScript arrays are just objects with indexed properties, so the above can also be written as the Type 3 format below:

({ 0: target[0], 1: target[1] } = source);

huangapple
  • 本文由 发表于 2023年5月8日 02:11:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76195543.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定