javascript - 如何创建两个相同的数组并仅更改其中一个的值？

Question

我想做的是创建两个相同的数组。当我更改输入字段中的值并单击按钮时，我只想更改第二个数组中的值。但是，当我这样做时，由于某种奇怪的原因，它会更改两个数组中的值？知道我做错了什么吗？

这是我的代码的简化版本:

Javascript:

var arr1=[],

    arr2=[];

$(':input').each(function()
{
    var id = $(this).attr('id');

    arr1[id] = arr2[id] = {'text': $(this).val()};
});

$('#click').click(function()
{
    $(':input').each(function()
    {
        arr2[$(this).attr('id')].text = $(this).val();
    });

    alert(arr1['whatever'].text + '\n\n' + arr2['whatever'].text);

    return false;
});

HTML:

<input type="text" id="whatever" value="test">
<br><br>
<button type="button" id="click">Click</button>

<强> Here is an example ，即，当我将输入字段中的值更改为 test2 并单击按钮时，它会显示它更改了两个数组中的值。

如果可能的话，我不想改变创建这些数组的方式，例如arr[id] = {'text': $(this).val()}。除非这就是问题所在。

Answer 1

您正在数组中存储一个对象

arr1[id] = arr2[id] = {'text': $(this).val()};

对象采用ByRef，而不是ByVal，因此它们不仅相等，而且是同一位内存，更改其中一个也会更改两者。你可能想让它们像这样；

var val = $(this).val();
arr1[id] = {'text': val};
arr2[id] = {'text': val};