对象解构模式用作数组解构模式的剩余属性代表什么?

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

What does an object destructuring pattern used as the rest property of an array destructuring pattern stand for?

问题

以下是翻译好的部分:

MDN Web Docs中有这个示例:

使用绑定模式作为剩余属性

数组解构赋值的剩余属性可以是另一个数组或对象绑定模式。这允许您同时解包数组的属性和索引。

const [a, b, ...{ pop, push }] = [1, 2];
console.log(a, b); // 1 2
console.log(pop, push); // [Function pop] [Function push]

这些poppush函数是什么,如何使用它们?

pop()
Uncaught TypeError: Cannot convert undefined or null to object
    at pop (<anonymous>)
push(3)
Uncaught TypeError: Cannot convert undefined or null to object
    at push (<anonymous>)
英文:

The MDN Web Docs have this example:

> ### Using a binding pattern as the rest property
>
> The rest property of array destructuring assignment can be another array or object binding pattern. This allows you to simultaneously unpack the properties and indices of arrays.
>
> javascript
&gt; const [a, b, ...{ pop, push }] = [1, 2];
&gt; console.log(a, b); // 1 2
&gt; console.log(pop, push); // [Function pop] [Function push]
&gt;

What are those pop and push functions and how to use them?

&gt; pop()
Uncaught TypeError: Cannot convert undefined or null to object
    at pop (&lt;anonymous&gt;)
&gt; push(3)
Uncaught TypeError: Cannot convert undefined or null to object
    at push (&lt;anonymous&gt;)

答案1

得分: 0

以下是翻译好的部分:

使用常规的解构赋值,你可以这样做:

const obj = {a:3, b:4}
const {a} = obj // 相当于 const a = obj.a

现在考虑以下代码:

const [a, b, ...rest] = [1, 2];
console.log(a, b, rest); // 1 2 []
const {push, pop} = rest;
console.log(push, pop);

rest 将是一个包含从第三个数字开始的数组。由于没有第三个数字,rest 将是一个空数组。

pushpop 是可以从数组对象中解构出来的函数。这解释了为什么 const [a, b, ...{ pop, push }] = [1, 2]; 会从由扩展语法生成的空数组中提取 poppush 函数。

由于你没有对由扩展语法创建的数组的引用,所以在你提供的示例中,这些方法并不是非常有用。正如 @pilchard 指出的那样,要调用这两个方法之一,你需要使用 callapply,以便将 this 设置为特定的数组实例。

一个更有用的例子是获取数组中其他元素的计数(未单独解构的元素):

const [a, b, ...{length}] = [1, 2, 3, 4, 5]

console.log(length)
英文:

With regular destructuring, you can do:

const obj = {a:3, b:4}
const {a} = obj // equivalent to const a = obj.a

Now consider the following code:

const [a, b, ...rest] = [1, 2];
console.log(a, b, rest); // 1 2 []
const {push, pop} = rest;
console.log(push, pop);

rest will be an array containing the third number onwards. Since there is no third number, rest will be an empty array.

push and pop are functions that can be destructured out of an array object. This explains why const [a, b, ...{ pop, push }] = [1, 2]; will extract the pop and push functions from the empty array produced by the spread syntax.

Since you don't have a reference to the array created by the spread syntax, these methods aren't very useful in the example you gave. As @pilchard points out, to invoke either of those methods, you will need to use call or apply so that this will be set to a particular array instance.

A more useful example would be to get the count of the other elements in the array (that were not individually destructured):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const [a, b, ...{length}] = [1, 2, 3, 4, 5]

console.log(length)

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月17日 06:35:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/76030657.html
匿名

发表评论

匿名网友

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

确定