JS数组中filter方法的使用实例

　　1、定义

　　filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

　　2、语法

　　var newArray = arr.filter(callback(element[, index[, selfArr]])[, thisArg])

　　 3、参数说明

　　callback

　　循环数组每个元素时调用的回调函数。回调函数返回 true 表示保留该元素，false 则不保留。它接受以下三个参数：

　　（1）element

　　数组中当前正在处理的元素。

　　（2）index可选

　　正在处理的元素在数组中的索引。

　　（3）selfArr可选

　　调用了 filter 方法的数组本身。

　　thisArg可选

　　执行 callback 时，用于 改变callback函数this 的值。

　　一个新的、由调用callback函数返回值为true的元素组成的数组，如果callback函数调用米没有返回true，则返回空数组。

　　详细描述

　　filter 方法循环数组中的每个元素时调用一次 callback 函数，并利用所有使得 callback 回调函数返回 true 或等价于 true 的值的元素创建一个新数组。注意：callback 回调函数只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

　　callback 回调函数被调用时传入三个参数：

　　1.数组当前元素的值

　　2.元素在数组中的索引

　　3.被遍历的数组本身

　　如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值。否则，callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined。（callback 函数最后的this指向根据this指向规则进行确定）

　　filter 不会改变原数组，它返回过滤后的新数组。（虽然filter 方法本身不会改变原数组，但是我们可以在callback函数中进行改变）。

　　filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

　　4、用法

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

　　5、注意事项

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

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

　　6、使用实例

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

　　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的值

　　附：多条件单数据筛选

　　根据单个名字或者单个年龄筛选，用filter方法，判断条件之间是或的关系。

　　// 根据名字或者年龄筛选
　　function filterByName2(aim, name, age) {
　　return aim.filter(item => item.name == name || item.age == age)
　　}
　　console.log(filterByName2(aim,'Leila',19))