Javascript搜索对象数组中给定属性值的方法

2023-11-27 14:14| 来源: 网络整理| 查看: 265

从一个对象数组中按键查找一个对象的Javascript例子。

让我们声明一个对象数组，每个对象包含id和name属性。

let emps = [{'id':'1','name':'john'},{'id':'2','name':'eric'}, {'id':'3','name':'mark'}, {'id':'4','name':'andrew'}]

我们有多种方法来搜索一个对象数组的给定属性值。

使用javascript for loop

这个例子没有使用任何数组方法来从数组中找到一个对象。

函数用一个数组和对象的键和值进行声明。使用for循环来遍历数组中的对象使用平等运算符（===）检查每个对象与给定的键和值是否匹配如果匹配，返回一个对象，否则返回null

下面是一个例子

ES6在数组中提供了一个findIndex 方法。它为匹配的回调函数返回一个索引。

下面是一个示例代码

console.log(emps[emps.findIndex(item => item.name == 'eric')]) //{ id: '2', name: 'eric' } 使用查找方法

数组有find 方法来返回一个对象。

find 方法接受回调函数，检查对象的值，并返回它。

这是一个使用ES5 javascript版本的例子。

var output = emps.find(function(item) { return item.name === 'andrew'; }); console.log(output) // { id: '4', name: 'andrew' }

另外，上述函数使用ES6箭头函数重写，代码较少。

console.log(emps.find(item => item.id === '1')) //{ id: '1', name: 'john' } 使用过滤方法

数组过滤方法从输入的数组中进行过滤，并将输出作为一个数组返回。

ES5数组过滤器的例子

var output = emps.filter(function(item) { return item.name === 'mark'; }); console.log(output) //[ { id: '3', name: 'mark' } ]

ES6数组过滤器的例子

let tempArray=emps.filter(item => item.id === '4'); console.log(tempArray)//[ { id: '4', name: 'andrew' } ] console.log(emps.find(item => item.id === '1'))

正如你所看到的，find方法返回一个单一的对象，而filter方法返回一个对象的数组。

jquery grep函数

如果你在你的应用程序中使用jquery，用grep 方法来过滤一个元素是非常容易的。

var output = $.grep(emps, function(item){ return item.id == 3; }); console.log(output)// { id: '3', name: 'mark' }

同样的，在jquery中使用map方法，通过回调迭代一个对象数组，并返回数组中的匹配对象。

var tempArray = $.map(emps, function(element) { return element.id == 3 ? element : null; }); console.log(tempArray)// { id: '3', name: 'mark' } Underscore查找方法

同样地，Underscore库也提供了一个查找方法。

如果你使用underscore库，从数组中找到一个对象是很直接的。

它提供了findWhere 方法，该方法接受一个数组和一个包含key和value的对象。

var output = _.findWhere(emps, {id : 3}); console.log(output)// { id: '3', name: 'mark' }

同样地，它也提供了一个查找方法。

output = _.find(emps, function(item) { return item.id == '3' }) console.log(output)// { id: '3', name: 'mark' }

【本文地址】

公司简介

联系我们