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

 更新时间:2024年12月20日 10:55:46   作者:宝子卡粉  
这篇文章主要介绍了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。

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() 

总结

到此这篇关于javascript常用的数组过滤和查找方法总结的文章就介绍到这了,更多相关js数组过滤方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一个简单的js渐显(fadeIn)渐隐(fadeOut)类

    一个简单的js渐显(fadeIn)渐隐(fadeOut)类

    最近发现项目用的表单验证不好使,干脆一边参考人家的一边自己写了一个。在验证有错误返回提示信息用到渐显(fadeIn)渐隐(fadeOut)过渡(因为浏览器的效率实在太高了,一下就蹦了出来~~);
    2010-06-06
  • JavaScript Base64编码和解码,实现URL参数传递。

    JavaScript Base64编码和解码,实现URL参数传递。

    JavaScript Base64编码和解码,实现URL参数传递。...
    2006-09-09
  • 原生js实现Flappy Bird小游戏

    原生js实现Flappy Bird小游戏

    这篇文章主要为大家详细介绍了原生js实现Flappy Bird小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JS实现程序暂停与继续功能代码解读

    JS实现程序暂停与继续功能代码解读

    程序暂停与继续的实现方法有很多,在本文为大家介绍下js中是如果做到的,并对具体的功能代码进行注释说明,感兴趣的朋友不要错过
    2013-10-10
  • jsp 自动编译机制详细介绍

    jsp 自动编译机制详细介绍

    这篇文章主要介绍了 Jasper的自动检测实现的机制比较简单,依靠某后台线程不断检测JSP文件与编译后的class文件的最后修改时间是否相同,若相同则认为没有改动,但倘若不同则需要重新编译,需要的朋友可以参考下
    2016-12-12
  • JavaScript引用类型Function实例详解

    JavaScript引用类型Function实例详解

    这篇文章主要介绍了JavaScript引用类型Function,结合实例形式详细分析了javascript引用类型Function概念、定义、原理、相关使用技巧与操作注意事项,需要的朋友可以参考下
    2018-08-08
  • 基于canvasJS在PHP中制作动态图表

    基于canvasJS在PHP中制作动态图表

    这篇文章主要介绍了基于canvasJS在PHP中制作动态图表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JS获取下拉列表所选中的TEXT和Value的实现代码

    JS获取下拉列表所选中的TEXT和Value的实现代码

    本篇文章主要是对JS获取下拉列表所选中的TEXT和Value的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JavaScript数组常用方法解析及数组扁平化

    JavaScript数组常用方法解析及数组扁平化

    这篇文章主要介绍了JavaScript数组常用方法解析及数组扁平化,数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等
    2022-07-07
  • 比较搞笑的js陷阱题

    比较搞笑的js陷阱题

    今天看到一段代码,比较有意思,本周就再多加一问。
    2010-02-02

最新评论