开发者问题收集

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

2011-09-09
2488441

我有一个数组:

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

我无法更改数组的结构。我被传递了一个 ID 45 ,我想获取数组中该对象的 'bar'

如何在 JavaScript 或使用 jQuery 中执行此操作?

3个回答

使用 find() 方法:

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

来自 MDN

The find() method returns the first value in the array, if an element in the array satisfies the provided testing function. Otherwise undefined is returned.


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

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

来自 MDN

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned.


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

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

这将返回一个对象数组。如果您想要获取 foo 属性的数组,则可以使用 map() 方法:

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

附注: find()filter() 等方法以及 箭头函数 不受旧版浏览器(如 IE)支持,因此如果您想支持这些浏览器,您应该使用 Babel 转译您的代码(使用 polyfill )。

Michał Perłakowski
2016-02-14

由于您已经在使用 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
}
Guffa
2011-09-09

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

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 和对象将被共享,因此这不需要太多内存。

Aaron Digulla
2011-09-09