JS 数组中的 filter 方法

1、定义

filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

2、语法

array.filter(function(currentValue,index,arr), thisValue);

3、参数说明

4、用法

filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。

5、注意事项

1、filter() 不会对空数组进行检测；

2、filter() 不会改变原始数组。

6、使用实例

1.返回数组array中所有元素都大于等于14的元素、返回等于14、返回大于某个值和小于某个值的元素的元素。

const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14)
console.log(newArr);//打印 [17,18,32,33,16,40]// 查找某个值-------------------------
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num == 14)
console.log(newArr);//打印 [14]//返回大于某个值和小于某个值的元素
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14 && num < 33)
console.log(newArr);//打印 [17, 18, 32, 16]

2.数组去重操作：对数组array中所有相同的元素进行去重复操作。

const array = [2, 2, 'a', 'a', true, true, 15, 17]
const newArr = array.filter((item, i, arr) => {return arr.indexOf(item) === i})
console.log(newArr);//打印 [2, 'a', true, 15, 17]//-------------------------------------------------------------------------const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,]
const newArr = array.filter((item, i, arr) => {return arr.indexOf(item) === i})
console.log(newArr);// 打印 [1, 2, 3, 4, 5, 6, 7, 8, 9]

3、数组中保留奇数或者偶数。

//保留偶数----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {return item % 2 === 0})
console.log(newArr);// 打印 [2, 4, 6, 8, 10]//保留奇数----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {return item % 2 !== 0})
console.log(newArr);// 打印 [1, 3, 5, 7, 9]

4、去掉数组中的假值，比如：空字符串、undefined、null、0、false。

const array = [{ id: 3 },{ id: 4 },{ id: null },{ id: undefined },{ id: '' },{ id: 0 },{ id: false }]
const newArr = array.filter(({ id }) => id)
console.log(newArr);// 打印 [{ "id": 3 },{ "id": 4 }]//-------------------------------------------------------------------const array = [undefined, null, 3, 5, 'a', false, 0]
const newArr = array.filter(item => item)
console.log(newArr);// 打印 [3, 5, 'a']

5、把对象数组array中的某个属性值取出来存到数组newArr中。

const array = [{ name: "a", type: "letter" },{ name: '1', type: "digital" },{ name: 'c', type: "letter" },{ name: '2', type: "digital" },
];
const newArr = array.filter((item, i, arr) => {return item.type === "letter"
})
console.log(newArr);
// 打印 [{ "name": "a", "type": "letter" }, { "name": "c", "type":"letter" }]

6、filter结合find方法，实现两个数组的补集的解决方法，oldArr的元素newArr中都有，在newArr中去掉所有的oldArr。

find() 方法返回数组中满足提供的测试函数的第一个元素的值。这里有四个元素，那么就会返回两个数组元素相等的值，这里取反就返回不相等的值，不取反的时候因为30的元素不符合，所以不返回30的值。

const array = [32, 4, 11, 55, 46, 99, 104, 54, 16, 33, 78, 43, 40]
const oldArr = [32, 33, 16, 40, 30]
function myfunction() {const result = array.filter(item1 => {//此处取反去掉，将变换元素状态return !oldArr.find(item2 => {return item1 === item2})})return result
}
const newArr = myfunction()
console.log(newArr);
// 取反打印 [4, 11, 55, 46, 99, 104, 54, 78, 43]
// 不取反打印 [32, 16, 33, 40]   此处30的元素不符合，所以不返回30的值

JS 数组中的 filter 方法相关推荐

数组中的filter方法_数组filter（）方法以及JavaScript中的示例
数组中的filter方法 JavaScript filter()方法 (JavaScript filter() method) filter() method is used to returns a ...
js数组中indexOf/filter/forEach/map/reduce详解
今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...
js数组中常见的方法
在js里面有许多对数组进行处理的方法,下面介绍一下常用方法 push()方法,作用:在数组尾部添加入一个或多个数据,返回数组的新长度实例: <script>var arr = [1,2, ...
js数组中深拷贝的方法
一.什么是浅拷贝在js当中,我们常常遇到数组复制的的情况,许多人一般都会使用"="来直接把一个数组赋值给一个变量,如 1 var a=[1,2,3]; 2 var b=a; 3 ...
js数组中的splice()方法
splice方法用于删除.替换.添加数组中的元素,由于参数较多,使用起来容易混淆 var list = []; list.push(1); list.push(2); list.push(3); co ...
JS数组中的剩余方法
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>& ...
JS数组中的indexOf方法
相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器.这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法.本文是小知识点积累,不作为深入讨论的 ...
javascript学习系列(2):数组中的filter方法
最好的种树是十年前,其次是现在.歌谣每天一个前端小知识提醒你改好好学习了知乎博主 csdn博主 b站博主放弃很容易但是坚持一定很酷我是歌谣喜欢就一键三连咯你得点赞是对歌谣最大的 ...
JS数组中的 slice() 方法
一.语法以及描述说明:通过start 和 end对原数组进行浅拷贝(提取 start 至 end 索引的数组元素) 语法:Array.slice([start[, end]) 参数: start : ...