数组引用以某种方式转换为值

时间:2014-08-08 03:17:24

标签: javascript jquery arrays pass-by-reference jquery-select2

我有一堆重复的select2元素,所以我创建了一些方法来帮助设置它们:

function setupDropDown(element, placeholderText, data) {
    $(element).select2({
        dropdownAutoWidth: true,
        placeholder: placeholderText,
        data: function () { return { results: data }; }
    });
}

所以我可能会有这样一行代码:

 setupDropDown(MakeSelector, "Select a Make",  makes);

并且'制造'是一个全局范围的数组,我希望能够更新:

 var makes      = [{ id: 0, text: "Dodge" }, { id: 1, text: "Chrysler" }];

我希望能够更改make数组并立即显示在下拉菜单中,但更改不会显示。但是,如果我直接引用全局变量而不是通过'数据'参数,它实际上工作正常。所以改变后的工作函数可能如下所示:

function setupDropDown(element, placeholderText) {
    $(element).select2({
        dropdownAutoWidth: true,
        placeholder: placeholderText,
        data: function () { return { results: makes }; }
    });
}

这里发生了什么?数据参数是否只包含对make的引用?它是通过值传递或在某些时候深度复制而不是复制引用。

更新

好的,这个小提琴显示了这个概念:http://jsfiddle.net/kinetiq/8o85h8s2/

现在看看这个小提琴,我做同样的事情,除了通过参数传递数组:http://jsfiddle.net/kinetiq/gp2bav4v/1/

3 个答案:

答案 0 :(得分:2)

这是因为当您使用参数....最初datamakes引用同一个对象但是当您说makes = <new object>时,现在data仍然是makes引用旧引用但var makes = {src : [{ id: 0, text: "Dodge" }, { id: 1, text: "Chrysler" }]}; setupDrop('#selectMake', 'Select a Make', makes); function setupDrop(element, placeholderText, contents) { $(element).select2({ dropdownAutoWidth: true, placeholder: placeholderText, data: function () { return { results: contents.src }; } }); } $('#changeArray').click(function() { makes.src = [{ id: 0, text: "Buick" }, { id: 1, text: "Ford" }]; }); 引用新对象...

一个简单的解决方案是使用另一个对象来保存数组引用并将新对象作为参数传递

{{1}}

演示:Fiddle

答案 1 :(得分:1)

这不会起作用,因为只有当您调用函数element.select2时才会调用setupDrop因此,在更改数组后,element.select2未被调用。

在更改setupDrop之后,您必须调用函数makes。因为此处您正在将makes的引用更改为另一个数组,并且该函数引用了较旧的数组。

Fixed DEMO

或者另一个解决方案不要更改makes的引用,请执行changeArray

中的下列操作
$('#changeArray').click(function() {
    makes[0] = { id: 0, text: "Buick" };
    makes[1] = { id: 1, text: "Ford" };
});

DEMO

答案 2 :(得分:1)

更新全局数组makes时,pushpop值会打开和关闭,而不是将makes的值设置为新的数组实例。这样,您的data参数仍然保留对原始数组的引用。

while (makes.length) {
    makes.pop();
}
var newValues = [{ id: 0, text: "Buick" }, { id: 1, text: "Ford" }];
[].push.apply(makes, newValues);

这是一个工作小提琴 - http://jsfiddle.net/kavun/uwcxthy2/