无法在 JavaScript 中克隆我的对象数组

Question

我想克隆我的对象数组。每个人都告诉使用 slice(0(，但我不明白，它不起作用，请检查小提琴。该属性在两个数组中可用。

我想在第一个数组中编辑我的对象，而不是在我的第二个数组中。 我已经检查过：如何克隆Javascript对象数组？连接、扩展也是如此。我找到的唯一一个是JSON.parse。我想了解为什么人们说该方法切片克隆数组。

var arr = [{'obj1':1}, {'obj2':2}];
var clone = arr.slice(0);
clone[0].test = "defined";

https://jsfiddle.net/zkzv2mp0/2/

Answer 1

小提琴手是纯 JS。 不包含jquery。

请参阅工作示例：

https://jsfiddle.net/zkzv2mp0/3/

但正如您所看到的，使用slice(0);是一个浅层克隆，您希望在不更新原始(深层克隆(的情况下更新一个JSON.parse(JSON.stringify(arr))

Answer 2

var clone = JSON.parse(JSON.stringify(arr));

您可以使用 JSON Stringify 和 JSON Parse 来克隆数组。但请注意，这仅在数组包含 JSON 可序列化内容时才有效。

Answer 3

不清楚你想做什么...

但我认为这是你试图实现的目标：

// Your initial array of objects.
var arr = [{'obj1':1}, {'obj2':2}];
// A cloned array of objects.
var clone = jQuery.extend(true, [], arr);
// Now sliced, keep the first object only
clone = clone.slice(0,1);
console.log(clone);
// Change the value of the object.
clone[0].obj1 = "defined";
console.log(clone);
// Show them in page.
$("#testarr").html(arr[0].obj1);
$("#testclone").html(clone[0].obj1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
In arr :
<span id="testarr">
</span></p>
<p>
In clone :
<span id="testclone">
</span>
</p>