js ，javascript 常用的数组过滤方法（2024-04-28)

目录

1、filter()方法

2、find()方法

3、reduce()方法

4、findIndex()方法

5、includes()方法

6、indexOf()方法

其他

---

介绍几种常用的数组过滤方法，处理数据。

1、filter()方法

按照条件过滤数据，返回新数据。

const array = [
  {name: '11', age: 1},
  {name: '22', age: 2},
  {name: '33', age: 3}
];
const filterArray = array.filter(item => item.age > 2);
console.log(filterArray); // 输出新数组： [{name: '33', age: 3}]

2、find()方法

按照条件过滤数据，查找并返回第一个匹配的元素，返回数据是对象类型或字符串类型（单项）。

const array = ['11', '22', '33'];
const res = array.find(item=> item === '22');
console.log(res); // 输出 "22"


const array = [{name:'11'}, {name:'22'}, {name:'33'},{name:'22'}];
const res = array.find(item => item.name === '22');
console.log(res); // 输出 {name:'22'}

3、reduce()方法

按照条件过滤数据，查找并返回第一个元素，返回数据是对象类型或字符串类型。

reduce()方法在处理大型数据集和复杂计算时非常有用，能够提供简洁、高效的代码实现。

解释：

第一个参数是一个回调函数（也称为累加器函数）。

第二个参数（可选）是初始化累加器的值。下面是reduce()方法的语法。

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);
// 数组名.reduce(回调函数(旧值, 元素, 当前下标, 原数组), 初始值);

如果未提供initialValue，那么数组的第一个元素将作为累加器的初始值，并从数组的第二个元素开始处理。但是，在这种情况下，如果数组为空，则会抛出TypeError。

// 1.计算数组的和
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, curr) => acc + curr, 0); // 输出：15

// 2.统计每个元素出现的次数
const array = ['11', '22', '11', '22', '33'];
const fruitCount = array.reduce((acc, curr) => {
  acc[curr] = (acc[curr] || 0) + 1;
  return acc;
}, {}); 
// 输出：{ 11: 2, 22: 2, 33: 1 }


// 3.二维数组扁平一维数组
const arr2D = [[1, 2], [3, 4], [5, 6]];
const arrFlat = arr2D.reduce((acc, curr) => acc.concat(curr), []);
// 输出：[1, 2, 3, 4, 5, 6]

4、findIndex()方法

查找并返回数组中满足条件的第一个元素的索引，如果找不到满足条件的元素，将返回 -1。

const names = ['11', '22', '33'];
const index = names.findIndex(name => name === '22');
console.log(index); // 输出 1

5、includes()方法

确定数组是否包含某个值，并在适当时返回 true 或 false。

includes 和 indexOf 方法都使用严格的相等性（'==='）搜索数组。如果值的类型不同（例如4和'4'），它们将分别返回 false 和 -1。

// 检查11是否为数组中的元素
const array = [11, 22, 33, 11];
const inc = array.includes(11);
console.log(inc)//true
 
//检查数组是否在第一个元素之外的其他位置包含22
const array = [11, 22, 33, 44, 55];
const inc = array.includes(22, 1);
console.log(inc) //true

6、indexOf()方法

返回数组中找到匹配的元素的第一个索引。如果数组中不存在该元素，则返回 -1。

includes 和 indexOf 方法都使用严格的相等性（'==='）搜索数组。如果值的类型不同（例如4和'4'），它们将分别返回 false 和 -1。

// 匹配数组中33的索引
const array = [11, 22, 33, 44, 55];
const ind = array.indexOf(33);
console.log(ind)//2

其他

如果你想找到在符合特定条件的阵列中的所有项目，使用 filter()。
如果你想检查是否至少有一个项目符合特定的条件，请使用 find()。
如果你想检查一个数组包含一个特定的值，请使用 includes()。
如果要在数组中查找特定项目的索引，请使用indexOf()