JavaScript:将一个数组推入另一个数组。

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

Javascript: pushing an array into an array

问题

JS问题:
我需要将一个数组推送到另一个数组中成为一个元素。我有两种方法:一种是简单的push(),另一种是相同的,但使用了展开运算符。

arr.push([newArr]);
arr.push([...newArr]);

arrnewArr都是数组)

展开运算符在这里实际上起到了什么作用呢?
在控制台观察,在第二个例子中,我得到了我想要的结果:

> res[0]
(3) [1, 2, 3]

所以我推送的数组成为新数组中的一个元素。到目前为止,一切都好。

但在第一个例子中,没有使用展开运算符,我得到了:

> res[0]
[Array(3)]

> res[0][0]
(3) [1, 2, 3]

这是我不理解的地方。为什么在不使用展开运算符的情况下,我得到了像是... 一种包装... 的数组?当我在控制台中得到[Array(x)]时,这到底意味着什么呢?是数组中的数组还是...?

所以问题是:这个[Array(x)]是什么,为什么会出现,展开运算符为什么会将其清除?

谢谢!

英文:

JS question:
I need to push an array to be an element in another array. I got 2 ways: a plain push() and one the same but with spread operator

arr.push([newArr]);
 arr.push([...newArr]);

(both arr and newArr are arrays)

What does the spread operator actually accomplishes here?
Observing in the console, in the 2nd example, I get the results I want:

> res[0]
(3) [1, 2, 3]

So the array I pushed becomes an element in the new array. so far so good.

But in the 1st example, without the spread operator, I get:
>res[0]
[Array(3)]

>res[0][0]
(3) [1, 2, 3]

And this is what I don't understand. why, when not using spread, I get what seems to be like... sort of a wrapper... over the array? what does it even mean, when I get [Array(x)] in the console?? is it array within array or...?

so the question is: what is this [Array(x)], why is is there, and why does the spread operator clears it out?

Thank You!

答案1

得分: 1

arr.push([newArr]); 将一个包含一个项目 newArr数组 推入 arr 中。
arr.push([...newArr]);newArr浅拷贝 推入 arr 中。

Spread syntax.

英文:

arr.push([newArr]); pushes an array with one item newArr into arr.
arr.push([...newArr]); pushes a shallow copy of newArr into arr.

Spread syntax.

答案2

得分: 1

考虑你的数组 arr 就像一排储物柜。

当你使用 arr.push([newArr]); 时,你将整个数组 [newArr] 放入下一个可用的储物柜中。如果 newArr 包含 3 个值(储物柜),所有三个都会进入 arr 中的下一个可用储物柜,作为 newArr,从而扩展了 arr 数组,这种情况下添加了 1 个储物柜。

当你使用展开运算符 arr.push([...newArr]); 时,你将从 newArr 中逐个取出每个元素,并依次放入排中的下一个可用储物柜中。如果 newArr 包含 3 个值(储物柜),第一个值进入 arr 中的下一个可用储物柜,第二个值进入 arr 中的第二个可用储物柜,第三个值进入 arr 中的第三个储物柜,从而扩展了 arr 数组,这种情况下添加了 3 个储物柜。

展开运算符实际上是将数组展平,而 push 不会这样做。

英文:

Consider your array arr as a row of lockers.

When you use arr.push([newArr]); you're taking that entire array [newArr], and putting the entire thing into the next available locker. If newArr contains 3 values (lockers) of its own, all three go into that next, single available locker in arr as newArr, expanding the arr array to accommodate the site, in this case adding 1 locker.

When you use the spread operator, arr.push([...newArr]);, you're taking each of the elements of newArr out of newArr, and putting each one in turn into the next available locker in the row. If newArr has 3 values (lockers) of its own, the first goes into the next available locker in arr, the 2nd into the 2nd available locker in arr, and the 3rd into the 3rd, expanding the arr array to accommodate the site, in this case adding 3 lockers.

The spread operator essentially flattens the array, whereas push does not.

答案3

得分: 0

让我们来看这个例子

    const newArr = [1,2,3];

    const a1 = [newArr];
    const a2 = [...newArr];

    console.log(a1);
    console.log(a2);

在第一种情况下,newArr 成为数组 a1 的第一个元素。
在第二种情况下,展开运算符将newArr的所有元素逐个作为数组 a2 的元素放入。
因此 a1==[newArr]a2==[newArr[0], newArr[1], newArr[2]]

英文:

Let's take a look at this example

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

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

const newArr = [1,2,3];

const a1 = [newArr];
const a2 = [...newArr];

console.log(a1);
console.log(a2);

<!-- end snippet -->

In the first case, newArr becomes the first element of the array a1.
In the second case, spread operator takes all the elements of the newArr and put them one by one as elements of the array a2.
So a1==[newArr], a2==[newArr[0], newArr[1], newArr[2]]

huangapple
  • 本文由 发表于 2023年2月6日 05:54:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/75355786.html
匿名

发表评论

匿名网友

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

确定