一、filter函数的基本用法
filter函数是数组对象中的一个方法,可以过滤出满足某个条件的元素并返回一个新的数组。
语法:array.filter(function(currentValue,index,arr), thisValue)
第一个参数:回调函数,必须。规定数组中每个元素执行的函数,该函数返回true或false,true表示该元素通过过滤。
第二个参数:可选,传递给函数的值被视为"this"的值。
let arr = [1, 2, 3, 4, 5]; let newArr = arr.filter(function(item) { return item % 2 === 0; }); console.log(newArr); // [2,4]
二、filter函数与map函数的区别
filter函数与map函数类似,但是两者有本质的区别:
map函数返回的是一个新的数组,该数组的元素为回调函数的返回值。
filter函数返回的是一个新的数组,该数组只包含通过回调函数测试的元素。
let arr = [1 ,2, 3, 4, 5]; let newArr1 = arr.map(function(item) { return item * 2; }); console.log(newArr1); // [2, 4, 6, 8, 10] let newArr2 = arr.filter(function(item) { return item % 2 === 0; }); console.log(newArr2); // [2, 4]
三、使用箭头函数简化代码
在ES6中,可以使用箭头函数更快捷地编写filter函数。
let arr = [1, 2, 3, 4, 5]; let newArr = arr.filter(item => item % 2 === 0); console.log(newArr); // [2, 4]
四、filter函数实现去重
可以使用filter函数实现数组去重,如下:
let arr = [1, 1, 2, 2, 3, 4, 5, 5]; let newArr = arr.filter(function(item, index, arr) { return arr.indexOf(item) === index; }); console.log(newArr); // [1, 2, 3, 4, 5]
五、filter函数组合使用
filter函数可以和其他高阶函数组合使用,如下:
1)使用filter函数和map函数实现一个数组中所有偶数元素的平方:
let arr = [1, 2, 3, 4, 5]; let newArr = arr.filter(item => item % 2 === 0).map(item => item * item); console.log(newArr); // [4, 16]
2)使用filter函数和reduce函数实现数组中4的倍数的和:
let arr = [1, 2, 3, 4, 5]; let sum = arr.filter(item => item % 4 === 0).reduce((x, y) => x + y); console.log(sum); // 4
六、filter函数在异步操作中的应用
在异步操作中,可以使用filter函数过滤出符合条件的异步操作,例如:禁止用户重复点击按钮的例子。
let btn = document.querySelector('#btn'); let flag = true; btn.addEventListener('click', function() { if(flag) { flag = false; fetchData().then(function(data) { doSomething(data); flag = true; }); } }); function fetchData() { return new Promise(function(resolve, reject) { // 构造异步操作,返回结果为data resolve(data); }); } function doSomething(data) { let result = data.filter(item => item % 2 === 0) .map(item => item * item); // 执行某个操作 }
七、小结
本文详细介绍了filter函数的基本用法以及其与map函数、箭头函数、reduce函数的组合使用等。
同时,我们也了解到了filter函数在异步操作中的应用,可以有效地避免用户重复点击按钮等问题。
filter函数是JavaScript中一个非常实用的函数,可以让我们更好地操作数组,并提高开发效率。