使用 ECMAScript 2019 的 Array.filter 方法简化 JavaScript 代码中的数组过滤
在 JavaScript 中，数组是一个非常常用的数据结构，对数组的操作也是 Web 前端开发中最为常见的操作之一。其中，过滤数组中的元素是一项非常基础而重要的任务。本文将着重介绍 ECMAScript 2019 的 Array.filter() 方法，它可以非常简单地提取我们需要的数据，并且相对于传统方式，使代码更加优雅和可读。
- 基础用法
Array.filter() 是数组的一个原生方法，可以用来筛选出符合条件的元素，返回一个新的数组，而不改变原数组。
其函数签名如下：
array.filter(callback(element[, index[, array]])[, thisArg])
上面的方法中，callback 是一个回调函数，主要作用是用于测试当前数组元素是否符合条件。filter() 将数组中每个值传递给 callback 函数，并返回一个新的只包含 callback 函数返回 true 的数组元素的数组。当然，callback 函数也可以返回其他类型的值，甚至可以返回 undefined，因为undefined在布尔值比较中被视为false。
下面我们来看一个简单的使用示例：
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(
function(num) {
return num % 2 === 0;
}
);
console.log(evenNumbers); // [2, 4]上面的代码分别定义了一个数组 numbers，和一个变量 evenNumbers，接下来我们使用 filter 方法来筛选出 numbers 中所有偶数元素，并将结果保存到 evenNumbers 变量中。
从上面的例子中可以看出，filter() 方法可以很方便的与匿名函数结合使用，使代码变得更加简洁、优雅，但同时很多开发者强调在实际工作中不建议过度使用匿名函数。
除了使用匿名函数，ES6 开始加入了箭头函数，可以让代码更加简洁：
const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter((num) => num % 2 === 0); console.log(evenNumbers); // [2, 4]
- 高级用法
除了基础用法， filter() 方法还有一些高级用法，比如值对象的属性过滤。
我们可以使用 filter 方法来过滤掉不符合条件的对象，该方法仍然使用回调函数。下面的例子展示了如何在对象数组中找到特定的值：
// javascriptcn.com 代码示例
const products = [
{ name: "iPhone X", price: 999 },
{ name: "Pixel 2XL", price: 799 },
{ name: "Samsung Galaxy S9", price: 719 }
];
const filteredProducts = products.filter(
function(product) {
return product.price < 900;
}
);
console.log(filteredProducts);
// [{ name: "Pixel 2XL", price: 799 }, { name: "Samsung Galaxy S9", price: 719 }]在上面的例子中，我们使用了 products.filter() 方法，该方法接受一个回调函数，并返回符合条件的数组项。通过上述代码，我们过滤出了所有价格小于 800 的产品，用新数组 filteredProducts 进行储存。
除了值对象的属性过滤， filter() 方法还支持传递第二个参数，用于指定回调函数的 this。这是非常有用的，可以在复杂的代码中更好地组织业务逻辑。
// javascriptcn.com 代码示例
const numbers = [1, 2, 3, 4, 5];
const max = 3;
const defaultThisValue = this;
const smallNumbers = numbers.filter(function(element) {
return element < this.max;
}, { max });
console.log(smallNumbers);
// [1, 2, 3]- 总结
通过本文的介绍，我们了解了 filter() 方法的基础操作和高级用法。使用它可以帮助我们更容易地完成大量数据处理任务，减少冗余代码，并且注意到 filter() 方法并不修改原始数组，而是返回新的符合条件的数组。
在实际开发中，建议使用 filter() 方法代替传统 for 循环，提升代码的可读性和执行效率。同时，结合箭头函数和其他 ES6/ES2019 的语言特性，可以写出更加优美的代码。
码字不易，如果本文能够对大家有所帮助，欢迎大家分享和点赞。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528feeb7d4982a6ebb9081b