Question

下面是我将数组中的对象更改为字符串的代码。无法弄清楚它为什么影响原始数组。如果我是对的，切片应该克隆数组？

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<script>
   function changeValue(o){
     document.getElementById('type').value=o.innerHTML;
     $('.text_stuff').click(function() {
         $('#type').focus();
    });
    }
    $('.text_stuff').click(function() {
         $('#type').trigger(jQuery.Event('keypress', {keyCode: 13}));
         });
</script>
<p class="text_stuff" id="technician" onclick="changeValue(this)">Car</p>
<p class="text_stuff" id="developer" onclick="changeValue(this)">Bus</p>

<input id="type" type="text" name="" value="">
</body>
</html>

安慰后两个阵列都相同

Answer 1

在Array.prototype.slice，

上引用MDN

slice()方法将数组的一部分的浅表副本返回到新的数组对象中。

这里重要的词是“浅拷贝”。它创建一个新的Array，并使数组的元素指向同一个对象。

在您的情况下，即使在切片之后，原始数组和克隆数组中的每个数组元素都会引用内存中的相同群集对象。

Original                        Cloned
+-----+                        +-----+
|  0  |--> Cluster Object 1 <--|  0  |
+-----+                        +-----+
|  1  |--> Cluster Object 2 <--|  1  |
+-----+                        +-----+
|  2  |--> Cluster Object 3 <--|  2  |
+-----+                        +-----+

由于所有相应的元素都指向相同的对象，因此通过一个数组进行更改也会反映在另一个数组中。

注意：如果您正在寻找深层复制的方法，那么您可能需要检查this question。

Answer 2

正如@thefourtheye解释的那样，您正在创建数组的浅表副本。要深度复制数组项并修改状态，可以将Array.prototype.map与angular.merge()一起使用：

ObjToPost.MO = $scope.selected.items.map(function(cluster) {
    return angular.merge({}, cluster, { status: cluster.status.name }); // create a deep copy of each item, and override status with status.name
});

为什么使用切片克隆列表会影响原始列表

2 个答案: