從數組刪除對象傳遞爲參數不修改原始數組（角）

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>