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

从一个对象数组中按键查找一个对象的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

下面是一个例子

function getObjectByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

console.log(getObjectByKey(emps,'name','eric')) //{ id: '2', name: 'eric' }

ES6 findIndex方法

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