多次向函数传递数组

Passing an array to the function multiple times

本文关键字：数组 函数      更新时间：2023-09-26

我正在学习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/

如果在调用shoplist()的第二次调用之前修改SAME ID数组，则会出现问题。因为javascript通过引用传递数组，并且只有一个引用进入shopitems数组，所以当您在将id数组传递给shoplist()的第二次调用之前修改它时，您也会无意中修改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)在shopitems数组的末尾添加了一个ids的内容作为新项。所以，每次你调用shoplist，你都会在shoplings的末尾得到一个新项目。但是，由于要添加的项是一个数组，因此它会添加对该数组的引用，而不是该数组的副本。如果您随后更改了该数组，shopmitems数组条目将指向数组的更改版本。

你可以在这个代码中看到：

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)

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

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

要将第二个条目与第一个条目分开，您需要有意识地制作第一个数组的副本并将该副本推入容器数组，或者需要从头开始创建一个新数组并将其推入容器数组。

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

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中，对象赋值或数组赋值不会产生副本。它只是为原始数据结构分配一个指针。如果您更改原始数据结构，这将反映在您所做的任何分配中。

如果是副本，则必须显式生成新数组或显式生成副本。

我运行了这段代码。。。

var shopitems = [];
shoplist([1]);
shoplist([1,2]);
function shoplist(ids) {
    WScript.Echo("ids passed to shoplist function: " + ids); // 1
    WScript.Echo("current ids in shopitems var: " + shopitems); // (empty)
    shopitems.push(ids);
    WScript.Echo("ids in shopitems after pushing: " + shopitems); // 1
    }

并得到了这个输出。

ids passed to shoplist function: 1
current ids in shopitems var:
ids in shopitems after pushing: 1
ids passed to shoplist function: 1,2
current ids in shopitems var: 1
ids in shopitems after pushing: 1,1,2

在我看来，它运行得很好。

相关文章：