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数组过滤方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 跟我学习JScript的Bug与内存管理

    跟我学习JScript的Bug与内存管理

    跟我学习JScript的Bug与内存管理,小编对JScript的Bug与内存管理也不甚了解,所以整理了本篇文章,希望可以解决大家学习时的困扰。
    2015-11-11
  • JS如何修改对象数组的key值

    JS如何修改对象数组的key值

    这篇文章主要介绍了JS如何修改对象数组的key值,使用map循环,在map循环内创建一个新对象,将item要改变的key赋给新创建的对象里面新key值,然后push给一个新创建的数组dataNew即可,需要的朋友可以参考下
    2024-02-02
  • 如何判断出一个js对象是否一个dom对象

    如何判断出一个js对象是否一个dom对象

    如何判断出一个js对象是否一个dom对象呢?下面小编就为大家带来一篇判断出一个js对象是否一个dom对象的方法。希望对大家有所帮助。一起跟随小编过来看看吧
    2016-11-11
  • js简单实现网页换肤功能

    js简单实现网页换肤功能

    这篇文章主要为大家详细介绍了js简单实现网页换肤功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Bootstrap学习笔记之环境配置(1)

    Bootstrap学习笔记之环境配置(1)

    这篇文章主要为大家详细介绍了Bootstrap学习笔记之环境配置的具体操作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javaScript年份下拉列表框内容为当前年份及前后50年

    javaScript年份下拉列表框内容为当前年份及前后50年

    本文介绍的这个javaScript年份下拉列表框内容为当前年份及前后50年,默认显示当前年份,大家可以学习下
    2014-05-05
  • 亲自教你TypeScript 项目搭建过程

    亲自教你TypeScript 项目搭建过程

    这篇文章主要介绍了亲自教你TypeScript 项目搭建过程,我记得前一天,我们配置过一份 webpack 配置,直接复制过来使用,这里就不多说了,然后就是在项目中引入我们的 less,需要的朋友可以参考下
    2022-11-11
  • JavaScript中的偏函数你理解了吗

    JavaScript中的偏函数你理解了吗

    JavaScript中的偏函数(Partial Function)是指一个函数,它是由另一个函数通过固定一些参数而得到的,从而产生了一个新的函数,本文主要来和大家聊聊偏函数的原理与使用,希望对大家有所帮助
    2023-05-05
  • 基于layui实现登录页面

    基于layui实现登录页面

    这篇文章主要为大家详细介绍了基于layui实现登录页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • js中onload与onunload的使用示例

    js中onload与onunload的使用示例

    onload与onunload想必大家并不陌生吧,下面为大家演示下js中onload与onunload的妙用,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08

最新评论