如何在現代瀏覽器中實現lodash _.remove函數？

Question

我有使用lodash的代碼：

    _.remove(this.home.modal.data.subTopics, function (currentObject) {
        return currentObject.subTopicId === subTopicToDelete;
    });

有人可以給我一些建議，我如何在不使用lodash的情況下使用現代瀏覽器功能進行同樣的操作？

請注意，remove的輸出可以進入另一個變量。

Answer 1

您可以使用Array#filter()並否定filter子句：

this.home.modal.data.subTopics.filter(function (currentObject) {
    return currentObject.subTopicId !== subTopicToDelete;
});

這將返回一個數組，其中subTopicId不等於subTopicToDelete 。 然后由您決定將其保存在變量中還是任何地方。

---

或者，如果您想從中創建方法，則可以執行以下操作：

function remove(array, filterMethod) {
    return array.filter(function(){
        return !filterMethod.apply(this, arguments);
    });
}

Answer 2

為什么不看看lodash的源代碼_.remove ？

function remove(array, predicate, thisArg) {
  var index = -1,
      length = array ? array.length : 0,
      result = [];

  predicate = getCallback(predicate, thisArg, 3);
  while (++index < length) {
    var value = array[index];
    if (predicate(value, index, array)) {
      result.push(value);
      splice.call(array, index--, 1);
      length--;
    }
  }
  return result;
}

（ getCallback調用在這里並不是很有趣，只需將其替換為謂詞函數即可，該謂詞函數返回給定參數的布爾值：值，索引，數組。顯然不需要全部提供，畢竟這是JavaScript！）

Lodash在適當的位置使用Array.prototype.splice ，將刪除的元素推到結果數組上。 然后，使用--將當前循環索引和保存的length減少1，因為每次使用.splice ，都直接修改數組，例如：

var arr = ['a', 'b'];
arr.splice(0, 1);
arr[1] // undefined

在這種情況下， splice實際上與Array.prototype.splice相同。 您也可以執行array.splice(index--, 1) 。

---

一種可能更簡單/可以理解的方法是從右側（for-）循環遍歷數組，從array.length - 1到0結束。 然后，如果每個元素都通過謂詞函數，則在當前索引處拼接每個元素，並將該操作的結果值壓入結果數組。 循環后返回結果數組。

這樣做是一樣的，因為如果您從右側開始刪除元素，則其余循環元素的索引不會更改。 lo-dash的代碼也許在性能上有優勢，但我無法告訴您。

Answer 3

您可以調整Array.prototype以適合您的需求。 有些人不喜歡這種方法，但是有時它可能會有用。 在此示例中，我通過以下方式傳入密鑰和要修改數組的值：

if (!Array.prototype.remove) {
  Array.prototype.remove = function (key, value) {
    return this.filter(function (el) {
       return el[key] !== value;
    });
  }
}

data.remove('name', 'dan');

DEMO