如何在现代浏览器中实现lodash_.remove函数

How can I implement the lodash _.remove function in modern browsers?

本文关键字：lodash 实现 remove 函数 浏览器      更新时间：2023-09-26

我有使用lodash:的代码

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

有人能给我建议吗？我如何在没有lodash的情况下使用现代浏览器功能来做到这一点？

请注意，remove的输出进入另一个变量是可以的。

您可以使用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);
    });
}

为什么不看看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调用在这里并不是很有趣，只需将其替换为一个谓词函数，该函数为给定的参数返回布尔值：value、index、array。显然，并非所有参数都需要提供，这毕竟是JavaScript！）

Lodash在适当的位置使用Array.prototype.splice，将移除的元素推到结果数组上。然后，它使用--将当前循环索引和保存的length减少1，因为每次使用.splice时，都会直接修改数组，例如：

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

在这种情况下CCD_ 10实际上与CCD_。你也可以做array.splice(index--, 1)。

一种可能更简单/更容易理解的方法是从右边（for-）循环遍历数组，从array.length - 1开始，到0结束。然后，如果传递谓词函数，则拼接当前索引处的每个元素，并将该操作的结果值推送到结果数组上。在循环之后返回结果数组。

这也是一样的，因为如果从右侧开始删除元素，则其余循环元素的索引不会改变。也许lo-dash的代码有性能优势，但我不能告诉你。

您可以调整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

相关文章：