javascript - 多次将数组传递给函数

Question

我正在学习 javascript，我试图找出为什么我的下面的函数不能按预期工作。请参阅 2 个代码示例中的说明:

// First time I call the shoplist function I pass [1] in the argument. Results are as I expect:

var shopitems = [];

function shoplist(ids) {
    alert("ids passed to shoplist function: " + ids); // 1
    alert("current ids in shopitems var: " + shopitems); // (empty)
    shopitems.push(ids);
    alert("ids in shopitems after pushing: " + shopitems); // 1
    }


// Second time I call the shoplist functions I pass [1, 2] in the argument. Results are not what I would expect:

function shoplist(ids) {
    alert("ids passed to shoplist function: " + ids); // 1, 2
    alert("current ids in shopitems var: " + shopitems); // 1, 2  <--- Why is there 1, 2 and not only 1?
    shopitems.push(ids);
    alert("ids in shopitems after pushing: " + shopitems); // 1, 2, 1, 2

编辑:这是完整的代码(警告:可能非常困惑):http://dpaste.org/wXMy5/

Answer 1

如果您在第二次调用 shoplist() 之前修改 SAME ids 数组，则会出现问题。由于 javascript 通过引用传递数组，并且只有一个引用进入 shopitems 数组，因此当您在将 ids 数组传递给第二次调用 shoplist() 之前修改 ids 数组时，您将也无意中修改了 shopitems[0] 。如果第一次和第二次调用 shoplist() 的每个参数都是完全独立的数组，则不会出现此问题，但如果第二次调用只是传递第一次调用的修改数组，你就会遇到这个问题。

简单的说明是这样的:

// this will not have the problem because each call to shoplist
// is passing a completely separate array
var list = [1];
shoplist(list);
list = [1,2];      // create new array
shoplist(list);    // shoplist is [[1], [1,2]]

// this will have the problem because they are the same array
var list = [1];
shoplist(list);
list.push(2);     // modify first array
shoplist(list);   // shoplist is [[1,2], [1,2]] and both array elements are actually the same array

有关更详细的说明:.push(ids) 将 ids 的内容作为新项目添加到 shopitems 的末尾> 数组。因此，每次调用 shoplist 时，您都会在 shopitems 的末尾获得一个新商品。但是，由于您要添加的项目是一个数组，因此它添加对该数组的引用，而不是该数组的副本。如果您随后更改该数组，shopitems 数组条目将指向该数组的更改版本。

您可以在这段代码中看到:

var x = [];
var list = [];
x.push(1);       // contains contains [1]
list.push(x);    // list is [[1]]
x.push(2);       // x is [1,2]
list.push(x);    // list is [[1,2], [1,2]]  (contains two references to x)

在此代码示例中，list 将包含两个元素，每个元素都指向包含 [1,2] 的同一个实时版本的 x。

这是因为默认情况下，JavaScript 会传递数组和对象等内容的引用。当您将数组元素插入容器数组时，它并不是将该变量的静态副本放入数组中。它放置一个指向原始变量的指针。如果您随后更改原始变量，该更改也会反射(reflect)在数组中。

要将第二个条目与第一个条目分开，您要么需要有意识地复制第一个数组并将该副本推送到容器数组中，要么需要从头开始创建一个新数组并将其推送到容器数组中。

例如，以下是在容器数组中创建两个独立元素的几种方法:

var x = [];
var list = [];
x.push(1);       // contains contains [1]
list.push(x);    // list is [[1]]
x = [];          // set x to a new array (the old version of x is still in list)
x.push(1);       // x is [1]
x.push(2);       // x is [1,2]
list.push(x);    // list is [[1], [1,2]]  (contains two separate items)

或者，复制 x:

var x = [];
var list = [];
x.push(1);       // contains contains [1]
list.push(x);    // list is [[1]]
x = x.slice(0);  // make a copy of x, the old version of x is still in list
x.push(1);       // x is [1]
x.push(2);       // x is [1,2]
list.push(x);    // list is [[1], [1,2]]  (contains two separate items)

这里要记住的重要一点是，在 javascript 中，对象赋值或数组赋值不会进行复制。它只是分配一个指向原始数据结构的指针。如果您更改原始数据结构，这将反射(reflect)在您所做的任何分配中。

如果您进行复制，则必须显式创建一个新数组或显式创建一个副本。