带有拼接的 AngularJS/Javascript Bizzare 行为答案

【问题标题】：AngularJS/Javascript Bizzare Behavior with splicing带有拼接的 AngularJS/Javascript Bizzare 行为
【发布时间】：2015-07-14 19:00:21
【问题描述】：

我正在拼接一个电话类型列表。我有一个由 $scope.phoneTypeList 定义的原始列表。在我的实际应用程序中，我通过 AJAX 获取列表，但我已将其定义为此示例的对象。

然后我有一个名为 $scope.addPhoneType 的空列表。我将 phoneTypelist 中的数据分配到 $scope.addPhoneType 然后运行 for 循环。 for 循环采用用户电话类型的数组。如果它在列表中，它将拼接 addPhoneType。例如，如果用户有 DEFAULT，它将从 addPhoneType 中删除。

我遇到的问题是，当我拼接 addPhoneType 时，它也会拼接 phoneTypeList。例如 phoneTypeList 变成了 =["DDI", "MOBILE","FAX"] ，根本不应该碰它。

就像它绑定到 addPhoneType。我以前从来没有遇到过这种情况？这是正常行为吗？有人有工作吗？在此先感谢，任何建议表示赞赏。

我的代码：

$scope.editCompany = function(){
      $scope.phone = [{phone_type_id:"DEFAULT",number:"1123"}]
      $scope.phoneTypeList = ["DDI", "DEFAULT", "MOBILE","FAX"];
      $scope.addPhoneType =[];
      $scope.addPhoneType = $scope.phoneTypeList;
      for (x=0;x<$scope.phone.length;x++){
         var phoneType = $scope.phone[x].phone_type_id;
         var index = $scope.addPhoneType.indexOf(phoneType);
         if (index >= 0){
         $scope.addPhoneType.splice(index,1);     
         }
      }
      console.log($scope.phoneTypeList);
   }

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

这个

$scope.addPhoneType = $scope.phoneTypeList

实际上会创建对新变量的数组引用，而不仅仅是将 phoneTypeList 数组的内容复制到 addPhoneType。

如果你想复制你可以使用的内容：

var newArray = oldArray.slice();

（在你的情况下 $scope.addPhoneType = $scope.phoneTypeList.slice();）

参考：

【讨论】：

非常感谢您解释这个问题。现在说得通了。我最终使用 angular.copy 但再次感谢答案。

【解决方案2】：

您看到的行为是完全正常的，因为非基元在 javascript 中是“通过引用传递”的。请查看此问题及其答案 - Setting one object equal to another object with the assignment operator in Javascript

为避免这种情况，您可以尝试使用angular.copy (https://docs.angularjs.org/api/ng/function/angular.copy)，它会将目标对象的深层副本创建到源中，从而解除对目标的引用。

【讨论】：

感谢您提供额外的信息和答案。我最终使用 angular.copy 和作品。但最重要的是，这是我学到的一个新概念，了解这一点非常重要。再次感谢。