如何在现代浏览器中实现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