在 javascript chrome 控制台中使用 push() 方法的无限内部数组

Posted 2023-03-07

【中文标题】在 javascript chrome 控制台中使用 push() 方法的无限内部数组

【英文标题】：infinite inner arrays with push() method in javascript chrome console

【发布时间】：2020-01-21 18:30:09

【问题描述】：

最近我在 javascript 中尝试使用数组 push() 方法。 我创建了一个数组，并使用 push 方法推送了相同的数组。

var a=['hello', 4]

a.push(a)

结果令人惊讶，当我在 chrome 控制台中探索数组项时，产生了无限数组。我想知道为什么会这样。由于push() 方法在最后添加元素。

我期待这个结果

['hello, 4, ['hello',4]]

但结果是别的，这里是 chrome 控制台的截图 problem screenshot, infinite inner arrays using push method in JavaScript

【问题讨论】：

试试：a.push([...a])

嗨 anlijudavid，你能详细说明这段代码是如何工作的吗，我对数组名称前的“...”符号感到困惑

@Diwakar 我在我的回答中解释了 anlijudavid 评论的用法，您可以查看它。

我想知道这个符号的用法：[...a]

... = 解构(hacks.mozilla.org/2015/05/es6-in-depth-destructuring)a.push([...a])相当于复制a的所有对象，然后将push复制到a对象。

【参考方案1】：

当您将对象分配给 Javascript（实际上在大多数类似语言中）中的变量时，该变量会保存对该对象的所谓“引用”。请注意，JS 中的数组是对象，但字符串和数字等原始值不是。

“通过引用”分配对象的一个​​后果是，您对该对象所做的任何更改（即使对碰巧引用同一对象的另一个变量所做的更改）都会在您检查原始变量时“显示”出来。

所以，你从这里开始

var a=['hello', 4]

然后做

a.push(a)

那么a指向的对象（数组）已经改变。现在，它的末尾多了一个元素 - a，与我们正在讨论的数组完全相同。

所以它递归地展开：

a = ['hello', 4, a]
  = ['hello', 4, ['hello', 4, a]]
  = ['hello', 4, ['hello', 4, ['hello', 4, a]]]
   ...

等等，无限。这不需要无限量的内存，因为数组的第三个元素只是对保存数组的内存位置的引用。

【讨论】：

但是如果我继续检查数组是否需要更多内存来显示数组？还是只是打印出来而不在内存中保存任何内容？

我不确定这些值的浏览器控制台表示是如何工作的（在不同的浏览器中可能会有所不同），但当然，至少在理论上，你扩展的越多，你的内存就越多'd需要持有你能看到的一切。不过，我真的不认为这是一个实际问题。