使用Javascript Array.Filter修改原始數組

Question

我想使用Javascript的array.filter從數組中刪除項目，因為語法優雅且可讀。 但是，似乎過濾器不會修改原始數組，它只返回一個新數組，按您的要求進行過濾。 我的問題是，為什么以下工作沒有像我期望的那樣？

$scope.clearList = function () {
  this.list = this.list.filter(function (item) {
    return item.checked == true;
  });

  //...
}

我希望在返回新過濾的數組后，this.list現在只包含過濾后的數組。 然而，它並不像這樣工作。 this.list最終包含完全相同的項目。 更改代碼以將過濾后的數組保存在中間變量中表明它確實正確過濾。

我現在已經完成了一個解決方法，循環遍歷過濾后的版本並將項目拼接出應該過濾的原始列表，但這樣做不夠優雅。 我只是想錯了嗎？

---

旁注：我正在使用Angular.js。 我不確定它是否重要，但列表來自以下內容：

  <div class="list" ng-repeat="list in lists">
    <!-- ... -->
    <ul>
      <li ng-repeat="item in list">
        <div>
          <label>
            <input type="checkbox" ng-model="item.checked"/>
            {{item.name}}
          </label>
          <!-- ... -->
        </div>
      </li>
    </ul>
    <button class="btn clear-selected" ng-click="clearList()">
      Remove Selected
    </button>
  </div>

---

編輯以添加調試信息：我已經引入了一個臨時變量，只是為了看看調試器中發生了什么。

var temp = this.list.filter(function (item) {
  return item.checked == true;
});

this.list = temp;

在執行之前，this.List有5個項目，temp是未定義的。 執行第一行后，this.List有5個項目，temp有2個項目。 執行完最后一行后，this.List有2個項目，temp有2個項目。

但是，在此之后，似乎綁定到this.list的UI不會更新。 所以與過濾器無關的東西似乎正在發生。

Answer 1

在angular中，您使用特殊的$scope變量修改數據，而在控制器內部， this指向$scope作為執行上下文， $scope是首選。

當UI不更新時，通常是因為“模型”（或給定范圍的屬性）的變化是在角度外完成的。 在這種情況下，需要調用$apply 。 這會通知角度某些內容已更改並更新視圖。

但是，這似乎不是您的問題。 我有一個工作清單，其中包含最少的更改http://plnkr.co/edit/Cnj0fEHSmi2L8BjNRAf5?p=preview

這是控制器的內容，當您從UI調用clearList() ，只有選中的項目會保留在列表中。

$scope.list = [
  {name: 'one', checked: true},
  {name: 'two', checked: false},
  {name: 'three', checked: true},
  {name: 'four', checked: false}
];

$scope.clearList = function () {
  $scope.list = $scope.list.filter(function(item) {
    return item.checked === true;
  });
};  

現在，我建議將列表傳遞給clearList clearList(list) ，甚至更好地使用Angular過濾器。

Answer 2

window.list = [1,2,3,4,5,6];
var clearList = function () {
    this.list = this.list.filter(function (item) { return item % 2 === 0; });
};
clearList();
console.log(window.list);

按預期記錄[2, 4, 6] ，所以我認為你的錯誤與filter無關。

您確定使用this.list修改的數組是否與您稍后檢查的數組相同？