JS中filter()方法的使用

常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，数组去重等等。

定义和用法

filter用于对数组进行过滤。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：
filter() 不会对空数组进行检测；不会改变原始数组

语法

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

返回值：
返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

实例

实例1. 返回数组nums中所有大于5的元素。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let res = nums.filter((num) => {
  return num > 5;
});
 
console.log(res);  // [6, 7, 8, 9, 10]

实例2. 对数组进行过滤，筛选出年龄大于 18岁的数据

const arr = [
	{
        name: 'tom1',
        age: 23
    },
    {
        name: 'tom2',
        age: 42
    },
    {
        name: 'tom3',
        age: 17
    },
    {
        name: 'tom4',
        age: 13
    },
]
const res = arr.filter(item => item.age > 18);
console.log(res);  //[{name: 'tom1',age: 23},{name: 'tom2',age: 42}]
console.log(arr);

实例3. 利用 filter 遍历出所有偶数

let arr = [56, 15, 48, 3, 7];

let newArr = arr.filter(function (x) {
    return x % 2 === 0;
});

console.log(newArr)
// [56, 48]

实例4.把一个Array中的空字符串删掉，可以这么写：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']

实例5. 利用 filter 进行数组去重

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1,1,'RUNOOB','RUNOOB',true,true,15];
console.log(unique(arr))
// [1, "RUNOOB", true, 15]

 var arr = ['apple','strawberry','banana','pear','apple','orange','orange','strawberry']
 var temp_arr = arr.filter(function (element, index, self) {
      return self.indexOf(element) === index
    })
 console.log(temp_arr)

indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了，所以重复的元素仅会保留第一个位置的元素

实例6. 过滤数组中的假值。
.filter(Boolean) 是一种常用的技巧，它的作用是过滤数组中的假值。
在 JavaScript 中，以下值被认为是假值：false、null、undefined、空字符串 ''、数字 0、NaN
当 .filter(Boolean) 应用于数组时，它会创建一个新的数组，其中包含原始数组中所有的真值，而过滤掉所有的假值。

例如，假设有一个数组包含了一些字符串和 null、undefined 等假值：

const arr = ['apple', 'banana', '', null, 'orange', undefined, 0, 'grape'];
const filteredArr = arr.filter(Boolean);
console.log(filteredArr); // 输出: ['apple', 'banana', 'orange', 'grape']

廖雪峰官网 filter()
https://www.liaoxuefeng.com/wiki/1022910821149312/1024327002617536