从数组删除对象传递为参数不修改原始数组（角）

Question

嗨，大家好我是新来的角，所以请轻松。我注意到，当我尝试从传递给函数的数组中删除一个对象时，它会从该函数中的数组中删除该对象，但不是在原始数组中。这让我感到困惑，因为我认为他们是按引用传递：

function controller($scope, $http) { 
    var vm = this; 
    vm.breakfast = [ { id:1, 'name':'fruit' }, { id:2, 'name':'egg' } ]; 

    function removeFromMeal(meal, entryId) { 
     meal = meal.filter (function (entry) { 
      return entry['id'] !== entryId; 
     } 
    } 

    function manageEntry(entry) { 
     ... 
     // Condition to remove meal from vm.breakfast 
     if (...) { removeFromMeal(vm.breakfast, entry['id']); } 
    } 
} 

的问题是，如果我通过为1的ID的进入manageEntry和内removeFromMeal设置断点，我可以看到，“饭”阵列被成功过滤（即ID为1的对象从vm.breakfast中删除）。但是，只要函数返回，函数（vm.breakfast）就像函数从未运行一样。我确定这个问题与上下文/作用域有关，使用$ apply会在某处出现吗？

在此先感谢。

Answer 1

meal.filter()返回一个新的阵列，它不修改原始数组。而分配给meal变量只是改变了局部变量，它不会修改调用函数时所使用的变量或对象。 Javascript函数是通过值来调用的，其中值可以是对数组或对象的引用，但它不是对象来自的位置的引用。你需要写：

if (...) { vm.breakfast = removeFromMeal(vm.breakfast, entry['id']); } 

Answer 2

你可以工作复制。

function manageEntry(entry) { 
    ... 
    // Condition to remove meal from vm.breakfast 
    if (...) { removeFromMeal(angular.copy(vm.breakfast), entry['id']); } 
} 

我希望这将有助于你

Answer 3

考虑使用splice代替。这将从现有数组中删除值。

angular.module('app', []).controller('MyController', function($scope) { 
 
    var vm = this; 
 
    vm.manageEntry = manageEntry; 
 
    vm.breakfast = [{ 
 
    id: 1, 
 
    'name': 'fruit' 
 
    }, { 
 
    id: 2, 
 
    'name': 'egg' 
 
    }]; 
 

 
    function removeFromMeal(meal, entryId) { 
 
    for (var i = 0; i < meal.length; i++) { 
 
     var entry = meal[i]; 
 
     if (entry['id'] === entryId) { 
 
     //Using splice, remove the item at index i from the meal 
 
     meal.splice(i, 1); 
 
     return; 
 
     } 
 
    } 
 
    } 
 

 
    function manageEntry(entry) { 
 
    // Condition to remove meal from vm.breakfast 
 
    if (true) { 
 
     removeFromMeal(vm.breakfast, entry['id']); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MyController as vm"> 
 
    <ul> 
 
     <li ng-repeat="entry in vm.breakfast"> 
 
     {{entry.name}} 
 
     <button ng-click="vm.manageEntry(entry)">Manage {{entry.name}}</button> 
 
     </li> 
 
    </ul> 
 

 
    </div> 
 
</div>