使用Lodash删除数组中的元素

Question

我有这个数组：

var fruits = ['Apple', 'Banana', 'Orange', 'Celery'];

我使用Lodash的remove就像这样：

_.remove(fruits, function (fruit) {
  return fruit === 'Apple' || 'Banana' || 'Orange';
})

结果为['Apple', 'Banana', 'Orange', 'Celery']，而我预计结果为['Apple', 'Banana', 'Orange']。为什么会这样？

Answer 1

因为当fruit为"Celery"时，您正在测试：

"Celery" === 'Apple' || 'Banana' || 'Orange'

评估为

false || true || true

是true。

您无法使用该语法。要么做得很好：

_.remove(fruits, function (fruit) {
  return fruit === 'Apple' || fruit === 'Banana' || fruit === 'Orange'
});

或测试数组成员资格：

_.remove(fruits, function (fruit) {
  return _.indexOf(['Apple', 'Banana', 'Orange'], fruit) !== -1
});

这不仅限于JavaScript，实际上是一个常见错误（例如this question）

Answer 2

您可以使用lodash 2.0及更高版本中的方法_.pull

var fruits = ['Apple', 'Banana', 'Orange', 'Celery'];

_.pull(fruits, 'Apple', 'Banana', 'Orange'); // ['Celery']

document.write(fruits);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.js"></script>

Answer 3

问题不在于Lo-Dash;问题在于你的回调函数中的条件。这样：

return fruit === 'Apple' || 'Banana' || 'Orange';

不是否正确。您需要将fruit与每个字符串进行实际比较：

return fruit === 'Apple' || fruit === 'Banana' || fruit === 'Orange';

或，您可以使用另一个Lo-Dash函数使其更紧凑：

_.remove(fruits, function (fruit) {
  return _.contains(['Apple', 'Banana', 'Orange'], fruit);
})

注意：在最新版本的Lo-Dash中，不推荐_.contains函数。请使用_.includes

Answer 4

如果要从另一组中删除一组项目，则会有专门为此设置的操作。 Lodash有https://lodash.com/docs/4.17.2#difference，它接受​​两个数组参数A和B，并返回另一个数组，其中包含A中不在B中的所有元素。

在你的情况下，你可以写

const fruits = ['Apple', 'Banana', 'Orange', 'Celery'];
const filteredFruits = _.difference(fruits, ['Apple', 'Banana', 'Orange']);

将导致['Celery']。

Answer 5

使用您要比较的值数组，并检查返回的索引是否大于-1。这表示在集合中找到了评估值。

_.remove( fruits, function ( fruit ) {
  return _.indexOf( [ "Apple", "Banana", "Orange" ], fruit ) >= 0;
});

或者，您可以使用lo-dash's _.contains method来获取布尔响应。

您采用的方法的问题是您没有将fruit与这些字符串中的每一个进行比较;相反，唯一的比较是fruit对"Apple"，之后你就是自己强迫所有字符串。

非空字符串强制转换为true（!!"Banana"），因此 truthy 。因此，以下条件将始终在“Banana”短路（除非fruit严格等于"Apple"），返回true：

return fruit === "Apple" || 'Banana' || "Orange";