ECMAScript 2019 中的 Array.prototype.filter：数组元素过滤

ECMAScript 2019 中的 Array.prototype.filter：数组元素过滤

在 JavaScript 开发中，数组是一个非常常用的数据结构。对于前端开发而言，对数组的操作也是非常重要的。ECMAScript 2019 中的 Array.prototype.filter 方法是数组元素过滤中不可或缺的方法之一。

Array.prototype.filter 是数组原型的一个方法，该方法接收一个回调函数，用于过滤数组中的元素。回调函数会被传入三个参数：当前元素、当前元素的索引和数组本身。

回调函数的返回值是一个布尔值，如果返回值为 true，那么当前元素将被保留，否则将被过滤掉。最终返回一个新的数组，只包含回调函数返回值为 true 的元素。

下面是一个简单的示例，使用 Array.prototype.filter 方法过滤掉一个数组中的偶数元素：

const arr = [1, 2, 3, 4, 5, 6];
const oddArr = arr.filter(item => item % 2 !== 0);
console.log(oddArr); // 输出 [1, 3, 5]

在这个示例中，通过 arr.filter() 方法过滤掉了数组中的偶数元素，最终返回了一个只包含奇数元素的新数组。

除了基本的元素过滤，Array.prototype.filter 方法还有其他更加高级的用法。例如，可以使用 Array.prototype.filter 方法过滤出满足某一个条件的元素，并返回它们的索引值。

下面是一个示例，使用 Array.prototype.filter 方法过滤出大于 4 的所有元素，并返回它们的索引值：

const arr = [1, 2, 3, 4, 5, 6];
const filteredIndex = arr.map((item, index) => {
  return {
    value: item,
    index: index
  };
}).filter(item => item.value > 4).map(item => item.index);
console.log(filteredIndex); // 输出 [4, 5]

在这个示例中，首先使用 arr.map() 方法将数组的值和索引组合成一个对象。然后使用 arr.filter() 方法过滤出大于 4 的元素，并最终再使用 arr.map() 方法返回它们的索引值。

需要注意的是，在使用 Array.prototype.filter 方法时，函数内所使用的 this 关键字会被绑定到全局对象上，而非调用该方法的数组对象。因此，建议在回调函数中使用箭头函数。

总结

Array.prototype.filter 是一个非常重要的数组操作方法，在实际的开发中也是经常使用的。本文介绍了如何使用 Array.prototype.filter 方法对数组进行过滤，并且给出了一些高级的用法示例，希望读者可以通过本文对该方法有更加深入的理解。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a36f5b48841e9894fc59ca