在 JavaScript 对象数组中通过 id 查找对象
我有一个数组:
myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]
我无法更改数组的结构。我被传递了一个 ID
45
,我想获取数组中该对象的
'bar'
。
如何在 JavaScript 或使用 jQuery 中执行此操作?
使用
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. Otherwiseundefined
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
)。
由于您已经在使用 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 和对象将被共享,因此这不需要太多内存。