JS根据条件从数组中取出对应项的几种方法

作者:异步漫步

时间:2026-10-26

浏览:439

本文介绍在JavaScript中如何根据特定条件从数组中取出对应项。主要涵盖三种方式:首先通过封装自定义函数利用some方法查找并返回指定字段值;其次使用filter方法筛选出所有符合条件的新数组;最后使用find方法仅返回第一个匹配元素。文章对比了各方法的特性、返回值及适用场景,帮助开发者根据实际需求选择合适方案。

文章目录

在JavaScript开发中,经常需要根据特定条件从数组中提取对应的数据项。

第一步,明确要在哪个数组对象中进行查找操作。

在JavaScript开发中,经常需要根据特定条件从数组中提取对应的数据项。

第二步,明确具体的查找条件。

假设我们需要查找value属性值为11101的那一项。

第三步,为了便于复用,我们可以将查找逻辑封装成一个独立的方法,在需要时直接调用。

function handleFn(arr,num){
		var nameVal = ''
		arr.some(function(item,index){
			if(num==item.value){
				nameVal = item.name
			}
		})
		return nameVal
	}

参数arr表示传入的源数组。

参数num表示用于匹配的条件值。

参数nameVal用于存储查找到的目标值。

方法执行完毕后,将最终结果通过return语句返回。

第四步,在业务代码中调用该方法,并传入相应的数组和条件值。

var politicsStr = handleFn(politicsObj,$('#politicalInput').val())

至此,我们完成了基于条件从数组中查找并获取对应结果的操作。

扩展阅读:JavaScript中查找数组符合条件元素的常见方式。

以下是几种常用的JS查找数组中符合条件元素的方法。

第一种方法:利用for循环进行遍历查找。

let arr = [
  {name: 'zhangsan', age: 18},
  {name: 'lisi', age: 17},
  {name: 'xiaoming', age: 18},
],
result = []
for (let item of arr){
  if(item.age === 18){
    result.push(item);
  }
}
console.log(result);// [{name: 'zhangsan', age: 18},{name: 'xiaoming', age: 18}]

第二种方法:使用数组的filter()方法。

使用filter()时需要注意以下几点:

  • filter()方法会创建并返回一个新数组,新数组中包含原数组中所有通过指定测试条件的元素。
  • filter()方法不会对空数组执行检测,也不会抛出错误。
  • filter()方法不会修改原始数组,保持原数据不变。
let arr = [
  {name: 'zhangsan', age: 18},
  {name: 'lisi', age: 17},
  {name: 'xiaoming', age: 18},
];
let result = arr.filter(item=>item.age === 18)
console.log(result);// [{name: 'zhangsan', age: 18},{name: 'xiaoming', age: 18}]

第三种方法:使用find()方法。

使用find()时需要注意以下几点:

  • find()方法仅返回数组中满足条件的第一个元素,而不是所有匹配项。
  • 当数组中的元素使回调函数返回true时,find()立即返回该元素,后续元素不再执行回调函数。
  • 如果没有任何元素满足条件,find()将返回undefined。
  • 对于空数组,find()不会执行回调函数。
  • find()方法同样不会改变原始数组的值。
let arr = [
  {name: 'zhangsan', age: 18},
  {name: 'lisi', age: 17},
  {name: 'xiaoming', age: 18},
];
let result = arr.find(item=>item.age === 18)
console.log(result);// {name: 'zhangsan', age: 18}

以上就是关于JS根据条件取出数组中对应项的详细介绍,更多相关js取出数组中对应项内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章