通过 ID 在 JavaScript 对象数组中查找对象

我有一个数组:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]

我无法更改数组的结构。我正在传递 id 为45 ,并且我想为数组中的该对象获取'bar'

如何在 JavaScript 或 jQuery 中做到这一点?

答案

由于您已经在使用 jQuery,因此可以使用旨在搜索数组的grep函数:

var result = $.grep(myArray, function(e){ return e.id == id; });

结果是包含找到的项目的数组。如果您知道对象始终存在并且只发生一次,则可以使用result[0].foo来获取值。否则,您应该检查结果数组的长度。例:

if (result.length === 0) {
  // no result found
} else if (result.length === 1) {
  // property found, access the foo property using result[0].foo
} else {
  // multiple items found
}

使用find()方法:

myArray.find(x => x.id === '45').foo;

MDN

如果数组中的元素满足提供的测试功能,则find()方法将返回数组中的第一个值。否则返回undefined


如果要查找其索引 ,请使用findIndex()

myArray.findIndex(x => x.id === '45');

MDN

findIndex()方法返回满足提供的测试功能的数组中第一个元素的索引。否则返回 - 1。


如果要获取匹配元素的数组,请改用filter()方法:

myArray.filter(x => x.id === '45');

这将返回一个对象数组。如果要获取foo属性的数组,可以使用map()方法执行此操作:

myArray.filter(x => x.id === '45').map(x => x.foo);

附注:类似的方法find()filter()箭头的功能不被旧的浏览器(如 IE)的支持,所以如果你想支持这些浏览器,你应该使用 transpile 代码巴贝尔 (用填充工具 )。

另一个解决方案是创建一个查找对象:

var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}

... now you can use lookup[id]...

如果您需要进行许多查找,这尤其有趣。

由于 ID 和对象将被共享,因此不需要更多的内存。

ECMAScript 2015在数组上提供了find()方法:

var myArray = [
 {id:1, name:"bob"},
 {id:2, name:"dan"},
 {id:3, name:"barb"},
]

// grab the Array item which matchs the id "2"
var item = myArray.find(item => item.id === 2);

// print
console.log(item.name);

它无需外部库即可工作。但是,如果您希望使用较旧的浏览器支持 ,则可能需要包含此 polyfill

Underscore.js有一个不错的方法:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })

我认为最简单的方法是以下操作,但在 Internet Explorer 8(或更早版本)上将无法使用:

var result = myArray.filter(function(v) {
    return v.id === '45'; // Filter out the appropriate one
})[0].foo; // Get result and access the foo property

尝试以下

function findById(source, id) {
  for (var i = 0; i < source.length; i++) {
    if (source[i].id === id) {
      return source[i];
    }
  }
  throw "Couldn't find object with id: " + id;
}
myArray.filter(function(a){ return a.id == some_id_you_want })[0]

上面的 findById 函数的通用且更灵活的版本:

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

var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var result_obj = objectFindByKey(array, 'id', '45');

您可以使用map()函数轻松获得此信息:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var found = $.map(myArray, function(val) {
    return val.id == 45 ? val.foo : null;
});

//found[0] == "bar";

工作示例: http : //jsfiddle.net/hunter/Pxaua/