在 JavaScript 对象数组中按 id 查找对象

我有一个数组：

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

我无法改变数组的结构。我被传递了45的 id，我想在数组中获得该对象的'bar' 。

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

答案

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

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

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

if (result.length == 0) {
  // not found
} else if (result.length == 1) {
  // 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 和对象将被共享。