我有一个数组。
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) {
// no result found
} else if (result.length === 1) {
// property found, access the foo property using result[0].foo
} else {
// multiple items found
}
使用find()
方法。
myArray.find(x => x.id === '45').foo;
来自MDN。
find()
方法返回数组中的第一个值,如果数组中的一个元素满足所提供的测试函数。否则就返回undefined
。
如果你想找到它的index,请使用findIndex()
。
myArray.findIndex(x => x.id === '45');
来自MDN。
findIndex()
方法返回数组中满足所提供测试函数的第一个元素的索引。否则返回-1。
如果你想得到一个匹配元素的数组,请使用filter()
方法代替。
myArray.filter(x => x.id === '45');
这将返回一个对象的数组。如果你想获得一个foo'属性的数组,你可以用[
map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)方法来实现。
myArray.filter(x => x.id === '45').map(x => x.foo);
题外话:像find()
或filter()
这样的方法,以及箭头函数不被旧的浏览器支持(如IE),所以如果你想支持这些浏览器,你应该用Babel转译你的代码(用polyfill)。
ECMAScript 2015提供了关于数组的[find()][1]方法。
<!--开始片段。 js hide: false console: true babel: false -->
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);
<!--结束片段-->。
它可以在没有外部库的情况下工作。 但如果你想要[旧版浏览器支持][2],你可能需要包含[这个polyfill][3]。
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find [2]: http://kangax.github.io/compat-table/es6/#Array.prototype_methods [3]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill
上面的findById函数的一个通用且更灵活的版本。
// array = [{key:value},{key:value}]
function objectFindByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var result_obj = objectFindByKey(array, 'id', '45');
虽然这里有许多正确的答案,但其中许多答案并没有解决这样一个事实,即如果不止一次这样做,这是一个不必要的昂贵操作。 在一个极端的情况下,这可能是真正的性能问题的原因。
在现实世界中,如果你要处理大量的项目,并且考虑到性能问题,那么最初建立一个查找就会快得多。
var items = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var lookup = items.reduce((o,i)=>o[i.id]=o,{});
然后你可以在固定的时间内得到像这样的项目。
var bar = o[id];
你也可以考虑使用一个地图而不是一个对象作为查找对象。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map
Array.reduce
var array = [ {'id':'73' ,'foo':'bar'} , {'id':'45' ,'foo':'bar'} , ];
var id = 73;
<!-->
var found = array.reduce(function(a, b){
return (a.id==id && a) || (b.id == id && b)
});
如果找到,则返回对象元素,否则返回false
。
如果你多次这样做,你可能会设置一个地图(ES6)。
const map = new Map( myArray.map(el => [el.id, el]) );
那么你就可以简单的做。
map.get(27).foo
下面是我如何在纯JavaScript中,以我能想到的最简陋的方式,在ECMAScript 3或更高版本中工作。 一旦发现匹配,它就会返回。
var getKeyValueById = function(array, key, id) {
var testArray = array.slice(), test;
while(test = testArray.pop()) {
if (test.id === id) {
return test[key];
}
}
// return undefined if no matching id is found in array
return;
}
var myArray = [{'id':'73', 'foo':'bar'}, {'id':'45', 'foo':'bar'}]
var result = getKeyValueById(myArray, 'foo', '45');
// result is 'bar', obtained from object with id of '45'
更加通用和简短
function findFromArray(array,key,value) {
return array.filter(function (element) {
return element[key] == value;
}).shift();
}
在你的例子中,Ex.Implement = findFromArray(myArray,'id',45)将得到整个元素。
var element = findFromArray(myArray,'id',45)` 这将给你整个元素。
你甚至可以通过使用内置的"filter".函数在纯JavaScript中实现这一点。 函数来处理数组。
Array.prototype.filterObjects = function(key, value) {
return this.filter(function(x) { return x[key] === value; })
}
因此,现在只需通过"id".来代替key
和"45"。
代替key
和"45"
代替value
,你将得到与id为45相匹配的完整对象。
所以,这将是。
myArr.filterObjects("id", "45");