协慌网

登录 贡献 社区

在 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 和对象将被共享。