我有一个数组:
myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]
我无法更改数组的结构。我被传递了一个 id 45
,我想'bar'
在数组中获取该对象。
如何在 JavaScript 或使用 jQuery 中执行此操作?
我有一个数组:
myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]
我无法更改数组的结构。我被传递了一个 id 45
,我想'bar'
在数组中获取该对象。
如何在 JavaScript 或使用 jQuery 中执行此操作?
使用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代码巴贝尔(用填充工具)。
由于您已经在使用 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
}
另一种解决方案是创建一个查找对象:
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 (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。
Underscore.js有一个很好的方法:
myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })