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

IT技术 javascript arrays javascript-objects
2020-12-12 16:12:29

我有一个数组:

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

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

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

6个回答

使用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代码巴贝尔(用填充工具)。

myArray.find(x => x.id === '45') 它在 Mac PC 上不起作用
2021-02-13 16:12:29
我可以在find方法中添加多个条件吗?
2021-02-16 16:12:29
因此,对于多个测试条件,它会类似于: myArray.find(x => x.id === '45' && x.color == 'red').foo
2021-02-17 16:12:29
myArray.find(x => x.id === '45').foo; 如果没有 id 为“45”的对象,则抛出异常。
2021-03-08 16:12:29
对我来说,迄今为止最好的答案。不需要 jQuery 也不需要创建新的辅助数组。
2021-03-09 16:12:29

由于您已经在使用 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
}
基本上我总是使用===它,因为它的工作原理其他编程语言完全一样==我认为==在 JavaScript 中不存在。
2021-03-01 16:12:29
使用===代替会更安全==,以避免 JavaScript==运算符的奇怪问题
2021-03-04 16:12:29
好吧,如果你绝对确保两个e.idid将琴弦,我想这是确定以使用==但如果您不确定,您可能会遇到问题(因为'' == 0is truebut '' === 0is false)。更不用说===似乎更快(stackoverflow.com/questions/359494/...)。
2021-03-07 16:12:29
@德。此处的许多答案提供了查找唯一值时的预期行为;您可以通过它们提前返回或从循环中中断(或指示较低级别的构造停止迭代)这一事实来识别它们。有关规范示例,请参阅 JaredPar 的回答,以及 Aaronius 对该答案的评论以获得相同的见解。通常,人们以这种方式区分“过滤”和“查找”功能,但术语各不相同。虽然效率更高,但这仍然是线性搜索,因此如果您想使用哈希表,请参阅 Aaron Digulla 的回答(注意 impl. details)。
2021-03-07 16:12:29
@VickyChijwani:将字符串与字符串进行比较时有什么问题吗?
2021-03-08 16:12:29

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

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

只要你不依赖属性的顺序:stackoverflow.com/questions/4886314/...
2021-02-14 16:12:29
这很聪明。我无法想象其他人是如何通过查看每次使用的整个阵列而被说服的。
2021-02-16 16:12:29
正是我要找的。有趣的是,当我只需要改变从 CouchDB 接收到的数据并将其转换为对我有用的格式时,我试图通过每次循环遍历,从我找到的列表中删除每个项目,从而使它变得过于复杂。需要。+1 先生!
2021-02-20 16:12:29
正在使用休息;如果您知道只有一个对象要查找,那么在循环中是一个不错的选择/改进吗?
2021-03-05 16:12:29
@irJvV:不,这根本没有意义。如果您需要进行多次查找,上面的代码很有用。如果你只看一次,那么创建一个lookup对象就是浪费时间。
2021-03-05 16:12:29

ECMAScript 2015 (JavaScript ES6) 提供了 数组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

可能是因为它看起来仍然非常实验性并且没有多少浏览器支持它,developer.mozilla.org/ en-US/docs/Web/JavaScript/Reference/...
2021-02-12 16:12:29
@Shaggy 如果 .find() 返回未定义,则您的优化会引发错误。所以这个解决方案只能在保证匹配的情况下使用。
2021-02-14 16:12:29
@Shaggy 甚至myArray.find(({ id }) => id === 45).foo. 但这是在 ES2015 语法和现在一样受支持之前编写的旧答案。@Gothdo 的回答是当前线程中最新的。
2021-02-21 16:12:29
@HerbertPeters如果您想确保始终可以进行空检查,这对于可选链接来说非常容易myArray.find(d => d.id === 45)?.foo
2021-02-24 16:12:29
这可以简化为myArray.find(d=>d.id===45).foo;.
2021-03-02 16:12:29

Underscore.js有一个很好的方法:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })
如果您只期待一个对象,那么使用 findWhere 会更有效,因为在找到一个结果后,搜索不会再进行下去。
2021-02-10 16:12:29
郑重声明,Lo-Dash(通常明显比 Underscore 性能更好)有一个类似的方法。文档在这里:lodash.com/docs#find
2021-02-18 16:12:29
@Foreever 来自 _.find 的文档:“该函数在找到可接受的元素后立即返回,并且不会遍历整个列表。”
2021-03-01 16:12:29