首页 > 网络编程 > JavaScript > javascript技巧 > js数组过滤方法

javascript常用的数组过滤和查找方法总结

2024-12-20 10:55:30 作者：宝子卡粉

这篇文章主要介绍了javascript常用的数组过滤和查找方法的相关资料,这些方法各有特点,适用于不同的数据处理场景,大家可以根据需求选择不同的方法,需要的朋友可以参考下

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

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}]

附：Js 利用filter筛选数组中符合多个条件的项

在JavaScript中，你可以使用filter函数结合多个条件来筛选数组。你可以创建一个函数，该函数将返回一个新的数组，其中包含满足所有条件的元素。

以下是一个简单的例子，假设我们有一个对象数组，我们想要筛选出那些年龄大于20且名字以"J"开头的对象。

let people = [

{ name: 'John', age: 25 },j

{ name: 'Jane', age: 18 },

{ name: 'Doe', age: 22 },

{ name: 'Jane', age: 20 }

];

let filteredPeople = people.filter(person =>

person.age > 20 && person.name.startsWith('J')

);

console.log(filteredPeople);

// 输出: [{ name: 'John', age: 25 }, { name: 'Jane', age: 20 }]

在这个例子中，filter函数接受一个箭头函数作为参数，该箭头函数对每个person元素进行条件检查。如果这个条件为真，元素就会被添加到结果数组中。在这个例子中，我们使用了&&操作符来组合两个条件。

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。