通过值或属性从对象数组中获取JavaScript对象
比方说,我有一个四个对象的数组:
var jsObjects = [ {a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8} ];
有没有办法,我可以得到第三个对象( {a: 5, b: 6}
)的属性b
的值,例如没有for...in
循环?
var result = jsObjects.filter(function( obj ) { return obj.b == 6; });
查看Array.prototype.filter()上的MDN Docs
我不知道你为什么反对for循环(大概你是一个for循环,不是专门用于..in),它们是快速和容易阅读。 无论如何,这里有一些select。
For循环:
function getByValue(arr, value) { for (var i=0, iLen=arr.length; i<iLen; i++) { if (arr[i].b == value) return arr[i]; } }
。过滤
function getByValue2(arr, value) { var result = arr.filter(function(o){return ob == value;} ); return result? result[0] : null; // or undefined }
.forEach
function getByValue3(arr, value) { var result = []; arr.forEach(function(o){if (ob == value) result.push(o);} ); return result? result[0] : null; // or undefined }
另一方面,如果你确实意味着for..in并且想要find一个值为6的属性的对象,那么除非你传递名字来检查,否则你必须使用for..in。 例如
function getByValue4(arr, value) { var o; for (var i=0, iLen=arr.length; i<iLen; i++) { o = arr[i]; for (var p in o) { if (o.hasOwnProperty(p) && o[p] == value) { return o; } } } }
jsObjects.find(x => xb === 6)
来自MDN:
如果数组中的元素满足提供的testing函数,则
find()
方法将返回数组中的值。 否则返回undefined
。
注意:所有浏览器都不支持find()
和arrow函数等方法,但这并不意味着您现在不能使用这些function。 只需使用Babel- it将ES6代码转换成ES5。
使用underscore.js:
var foundObject = _.findWhere(jsObjects, {b: 6});
如果我理解正确,你想在数组中find它的b
属性为6
?
var found; jsObjects.some(function (obj) { if (obj.b === 6) { found = obj; return true; } });
或者如果您使用下划线:
var found = _.select(jsObjects, function (obj) { return obj.b === 6; });
它看起来像ECMAScript 6提议中有Array
方法find()
和findIndex()
。 MDN还提供了可以包含在所有浏览器中的这些function的polyfills。
find()
:
function isPrime(element, index, array) { var start = 2; while (start <= Math.sqrt(element)) { if (element % start++ < 1) return false; } return (element > 1); } console.log( [4, 6, 8, 12].find(isPrime) ); // undefined, not found console.log( [4, 5, 8, 12].find(isPrime) ); // 5
findIndex()
:
function isPrime(element, index, array) { var start = 2; while (start <= Math.sqrt(element)) { if (element % start++ < 1) return false; } return (element > 1); } console.log( [4, 6, 8, 12].findIndex(isPrime) ); // -1, not found console.log( [4, 6, 7, 12].findIndex(isPrime) ); // 2
尝试使用数组filter方法过滤具有property
array of objects
。
var jsObjects = [ {a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8} ];
使用数组filter方法:
var filterObj = jsObjects.filter(function(e) { return eb == 6; });
在循环中使用:
for (var i in jsObjects) { if (jsObjects[i].b == 6) { console.log(jsObjects[i]); // {a: 5, b: 6} } }
工作小提琴: https : //jsfiddle.net/uq9n9g77/
如何使用lo-dash的 _.find(collection, [predicate=_.identity], [fromIndex=0])
通过对象属性值从对象数组中获取对象。 你可以做这样的事情:
var o = _.find(jsObjects, {'b': 6});
参数:
collection (Array|Object): The collection to inspect. [predicate=_.identity] (Function): The function invoked per iteration. [fromIndex=0] (number): The index to search from.
返回
(*): Returns the matched element (in your case, {a: 5, b: 6}), else undefined.
在性能方面, _.find()
的速度更快,因为它只是拉第一个对象的属性{'b': 6}
,另一方面,如果假设你的数组包含多个匹配的属性集(键:值),那么你应该考虑使用_.filter()
方法。 所以在你的情况下,因为你的数组有一个单一的对象与这个属性,我会使用_.find()
。
如果你正在寻找一个单一的结果,而不是arrays,我可以build议减less?
这里是一个简单的'ole JavaScript的解决scheme,返回一个匹配的对象,如果存在,否则返回null。
var result = arr.reduce(function(prev, curr) { return (curr.b === 6) ? curr : prev; }, null);
您可以使用Array.filter方法: https : //developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/filter
请参阅此文档https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
例如:
var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
通过特定的属性值从对象数组中获取第一个对象:
function getObjectFromObjectsArrayByPropertyValue(objectsArray, propertyName, propertyValue) { return objectsArray.find(function (objectsArrayElement) { return objectsArrayElement[propertyName] == propertyValue; }); } function findObject () { var arrayOfObjectsString = document.getElementById("arrayOfObjects").value, arrayOfObjects, propertyName = document.getElementById("propertyName").value, propertyValue = document.getElementById("propertyValue").value, preview = document.getElementById("preview"), searchingObject; arrayOfObjects = JSON.parse(arrayOfObjectsString); console.debug(arrayOfObjects); if(arrayOfObjects && propertyName && propertyValue) { searchingObject = getObjectFromObjectsArrayByPropertyValue(arrayOfObjects, propertyName, propertyValue); if(searchingObject) { preview.innerHTML = JSON.stringify(searchingObject, false, 2); } else { preview.innerHTML = "there is no object with property " + propertyName + " = " + propertyValue + " in your array of objects"; } } }
pre { padding: 5px; border-radius: 4px; background: #f3f2f2; } textarea, button { width: 100% }
<fieldset> <legend>Input Data:</legend> <label>Put here your array of objects</label> <textarea rows="7" id="arrayOfObjects"> [ {"a": 1, "b": 2}, {"a": 3, "b": 4}, {"a": 5, "b": 6}, {"a": 7, "b": 8, "c": 157} ] </textarea> <hr> <label>property name: </label> <input type="text" id="propertyName" value="b"/> <label>property value: </label> <input type="text" id="propertyValue" value=6 /> </fieldset> <hr> <button onclick="findObject()">find object in array!</button> <hr> <fieldset> <legend>Searching Result:</legend> <pre id="preview">click find</pre> </fieldset>
使用find和bind将特定的键值传递给callback函数。
function byValue(o) { return oa === this.a && ob === this.b; }; var result = jsObjects.find(byValue.bind({ a: 5, b: 6 }));
var jsObjects = [{a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8}];
要访问第三个对象,请使用: jsObjects[2];
要访问第三个对象的b值,请使用: jsObjects[2].b;