logo标签列表

通过属性值获取数组对象中的JavaScript对象

javascriptarraysarray-of-dict
1295

假设我有一个包含四个对象的数组：

var jsObjects = [
   {a: 1, b: 2}, 
   {a: 3, b: 4}, 
   {a: 5, b: 6}, 
   {a: 7, b: 8}
];

有没有一种方式可以通过属性 b 的值来获取第三个对象 ({a: 5, b: 6})，例如不使用 for...in 循环？

1
是的，只要b的值在数组中所有对象中是唯一的（在此示例中是这样），就是可能的。 - Will C.
@undefined 我很确定OP想要在数组中搜索对象b = 6 - Madbreaks
相关：在JavaScript对象数组中通过属性值查找对象 - Michał Perłakowski
1
我喜欢简短、兼容ES6之前的浏览器的代码... jsObjects.find(function(x) {if(x.b == 6) return x})你可以同时获取属性a...jsObjects.find(function(x) {if(x.b == 6) return x}).a - Mark Seagoe
17个回答
14

您也可以使用箭头函数，如下所示：

var demoArray = [
   {name: 'apples', quantity: 2},
   {name: 'bananas', quantity: 0},
   {name: 'cherries', quantity: 5}
];

var result = demoArray.filter( obj => obj.name === 'apples')[0];
console.log(result);
// {name: 'apples', quantity: 2}
11

使用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()。

8

让此答案中最好/最快的部分更易于重复使用和清晰：

function getElByPropVal(myArray, prop, val){
    for (var i = 0, length = myArray.length; i < length; i++) {
        if (myArray[i][prop] == val){
            return myArray[i];
        }
    }
}
6
var result = jsObjects.filter(x=> x.b === 6);

使用return语句有时无法得到过滤器的结果，建议改进以获得更好的效果（我不知道原因）。

3

通过特定属性值获取对象数组中的第一个对象：

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>

2
使用bind和find方法将特定的键值传递给回调函数。
   function byValue(o) { 
       return o.a === this.a && o.b === this.b; 
   };   

   var result = jsObjects.find(byValue.bind({ a: 5, b: 6 }));
-31
var jsObjects = [{a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8}];

访问第三个对象，使用：jsObjects [2];
访问第三个对象的b值，使用：jsObjects [2] .b;

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接