JavaScript 2D 数组填充中的意外输出 [英] Unexpected Output in JavaScript 2D Array Population

问题描述

我有一个数组 ele，我想用 ele 的副本填充另一个数组 arr，然后返回填充的数组.我拥有的 JavaScript 函数是:

function foo(n) {var arr = new Array(n);var ele = [0,1];for(var i=0;i<n;i++) {arr[i] = ele;}返回 arr;}

例如foo(3)，我想要的输出是[[0,1],[0,1],[0,1]]，但我得到的却是输出: [#1=[0, 1], #1#, #1#](使用 Firefox 的 Web 控制台).当我直接用 [0,1] 填充 arr 时，如

function fooNew(n) {var arr = new Array(n);for(var i=0;i<n;i++) {arr[i] = [0,1];}返回 arr;}

我得到了 fooNew(3) 的正确输出:[[0,1],[0,1],[0,1]].为什么我的原始函数 foo 没有给出与 fooNew 相同的输出?那就是:为什么我不能通过将 ele 分配给 arr[i] 来填充 arr，而是必须通过分配内容来填充它ele 直接到arr[i]，得到我想要的输出?

======

更新:根据 Felix Kling 的有用回答，经过一些谷歌搜索，我发现通过使用 slice(0)，您可以将 ele 的副本放入 arr[i] 而不是对它的引用.因此，对 foo 的以下修改将提供所需的输出:

function foo(n) {var arr = new Array(n);var ele = [0,1];for(var i=0;i<n;i++) {arr[i] = ele.slice(0);}返回 arr;}

解决方案

实际上，Firebug 的输出在这种情况下非常有用^†.它告诉您结果数组的每个元素都引用同一个数组:

 [#1=[0, 1], #1#, #1#]//^-----------^----^

#1(或#1#)是数组[0, 1]的占位符，表示引用.>

它仍然是一个数组数组，只是 Firebug 的表示方式不同.

我不确定这是否是您想要的.例如，如果修改第一个数组的第一个元素:

result[0][0] = 5;

结果是

[[5,1], [5,1], [5,1]]

我假设您希望数组彼此独立，因此您每次都必须分配一个新数组.这就是你在第二种情况下所做的.

<小时>

†:但这也提醒人们不要总是相信自己所看到的一切.对象的状态(例如)可能与工具表示它的方式大不相同.这里有一篇关于这种情况的文章(抱歉自我宣传)，该问题在 Firebug 中已修复，但在 Chrome 中未修复(afaik).

I have an array ele, and I want to populate another array arr with copies of ele, and then return the populated array. The JavaScript function I have is:

function foo(n) {
    var arr = new Array(n);
    var ele = [0,1];

    for(var i=0;i<n;i++) {
        arr[i] = ele;
    }
    return arr;
}

for e.g. foo(3), the output I want is [[0,1],[0,1],[0,1]], but I instead get the output: [#1=[0, 1], #1#, #1#] (using Firefox's Web Console). When I instead populate arr with [0,1] directly, as in

function fooNew(n) {
    var arr = new Array(n);

    for(var i=0;i<n;i++) {
        arr[i] = [0,1];
    }
    return arr;
}

I get the correct output for fooNew(3): [[0,1],[0,1],[0,1]]. Why does my original function foo not give the same output as fooNew? That is: why can't I populate arr by assigning ele to arr[i], and instead have to populate it by assigning the content of ele directly to arr[i], to get the output I want?

======

Update: in light of Felix Kling's helpful answer, and after some googling, I found that by using slice(0), you can place a copy of ele into arr[i] rather than a reference to it. So the following modification of foo will give the desired output:

function foo(n) {
    var arr = new Array(n);
    var ele = [0,1];

    for(var i=0;i<n;i++) {
        arr[i] = ele.slice(0);
    }

    return arr;
}

解决方案

Actually, Firebug's output is quite helpful in this situation ^†. It tells you that every element of your resulting array references the same array:

  [#1=[0, 1], #1#, #1#]
//  ^----------^----^  

#1 (or #1#) is a placeholder for the array [0, 1], indicating a reference.

It is still an array of arrays, it's just differently represented by Firebug.

I'm not sure if this is what you want though. For example, if you modify the first element of the first array:

result[0][0] = 5;

the result would be

[[5,1], [5,1], [5,1]]

I assume you want the arrays to be independent from each other, therefore you have to assign a new array each time. This is what you do in the second case.

---

†: But it is also a reminder that one should not always believe everything one sees. The state of an object (for example) can be quite different from how tools represent it. Here is an article about such a case (sorry for self promotion), the issue is fixed in Firebug, but not in Chrome (afaik).

这篇关于JavaScript 2D 数组填充中的意外输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！