javascript - 如何通过 Angular 中 HTML 的方法调用来更改 JS 文件中的数组？

Question

我正在使用 Angular.js 并尝试清除一个首先实例化并保存在我的模块中的数组:

 angular.module(myApp)
  .controller('myCtrl', function ($rootScope){
    var vm = this;

    vm.myArr = ["Clear", "Me"]

    vm.clearer = function(arr) {
       arr = [];
    };

    vm.copier = function(arrToOverwrite, arrToCopy) {
        arrToOverWrite = angular.copy(arrToCopy);
   };

然后我从我的 HTML 文件中调用这个方法:

    (controller myCtrl is aliased as ctrl)
    <input type="button" ng-click="ctrl.clearer(ctrl.myArr)" value="clear">

然而，在JS中，它在arr下划线，表示该值从未被使用过。而且，假设我有一些东西总是在 HTML 中显示 myArr 的值，它不受更改的影响。我想既然 JS 是通过引用传递的，如果 myArr 作为引用传递到 clearer 方法中，如果它在那里被更新，那么它将被更新为那个值无处不在？

我该怎么做？我需要在其他数组的其他位置使用 clearer 方法，这些数组在其他时间可能会在 JS 文件中的“内存中”保存。

Answer 1

当您调用该函数时，您会为 arr 参数分配对 ctrl.myArr 的引用。使用表达式 arr = []，您将 arr 指定为引用空数组，但 ctrl.myArr 仍指向原始数组。

在这种情况下，您需要通过将长度更改为 0 来直接改变数组，例如:

var array = [1, 2, 3];

var clearer = function(arr) {
  arr.length = 0;
};

clearer(array);

console.log(array);

如果您需要删除某些项目，或添加新项目，您可以使用 Array#splice或 angular.copy()用另一个覆盖数组:

var array = [1, 2, 3, 4, 5, 6, 7];
var replacement = [9, 10, 11];

function copier(arrToOverwrite, arrToCopy) {
  arrToOverwrite.splice(0, arrToOverwrite.length, ...arrToCopy); // or angular.copy(arrToCopy, arrToOverwrite)
};

copier(array, replacement);

console.log(array);