wake-up-neo.com

Rufen Sie das JavaScript-Objekt aus dem Array der Objekte nach dem Wert der Eigenschaft ab

Nehmen wir an, ich habe ein Array von vier Objekten:

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

Gibt es eine Möglichkeit, das dritte Objekt ({a: 5, b: 6}) durch den Wert der Eigenschaft b zu erhalten, zum Beispiel ohne eine for...in-Schleife?

560
user765368

Filter Array von Objekten, deren Eigenschaft mit dem Wert übereinstimmt, gibt Array zurück:

var result = jsObjects.filter(obj => {
  return obj.b === 6
})

Siehe MDN-Dokumente zu Array.prototype.filter ()

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

let result = jsObjects.filter(obj => {
  return obj.b === 6
})

console.log(result)

Find der Wert des ersten Elements/Objekts im Array, andernfalls wird undefined zurückgegeben.

var result = jsObjects.find(obj => {
  return obj.b === 6
})

Siehe MDN-Dokumente zu Array.prototype.find ()

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

let result = jsObjects.find(obj => {
  return obj.b === 6
})

console.log(result)

812
elclanrs
jsObjects.find(x => x.b === 6)

Von MDN:

Die Methode find() gibt einen Wert im Array zurück, wenn ein Element im Array die bereitgestellte Testfunktion erfüllt. Andernfalls wird undefined zurückgegeben.


Randbemerkung: Methoden wie find() und Pfeilfunktionen werden von älteren Browsern (wie dem IE) nicht unterstützt. Wenn Sie diese Browser unterstützen möchten, sollten Sie Ihren Code mit Babel spulen.

221

Ich weiß nicht, warum Sie gegen eine for-Schleife sind (vermutlich bedeuteten Sie eine for-Schleife, nicht speziell für..in), sie sind schnell und einfach zu lesen. Wie auch immer, hier sind einige Möglichkeiten.

Für Schleife:

function getByValue(arr, value) {

  for (var i=0, iLen=arr.length; i<iLen; i++) {

    if (arr[i].b == value) return arr[i];
  }
}

.Filter

function getByValue2(arr, value) {

  var result  = arr.filter(function(o){return o.b == value;} );

  return result? result[0] : null; // or undefined

}

.für jeden

function getByValue3(arr, value) {

  var result = [];

  arr.forEach(function(o){if (o.b == value) result.Push(o);} );

  return result? result[0] : null; // or undefined

}

Wenn Sie andererseits wirklich für..in gemeint haben und ein Objekt mit einer Eigenschaft mit dem Wert 6 suchen möchten, müssen Sie for..in verwenden, es sei denn, Sie übergeben die zu überprüfenden Namen. z.B.

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;
      }
    }
  }
}
136
RobG

Probieren Sie Array filter method aus, um den array of objects mit property zu filtern.

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

mit Array-Filtermethode:

var filterObj = jsObjects.filter(function(e) {
  return e.b == 6;
});

using für in-Schleife:

for (var i in jsObjects) {
  if (jsObjects[i].b == 6) {
    console.log(jsObjects[i]); // {a: 5, b: 6}
  }
}

Arbeitsfiedel:https://jsfiddle.net/uq9n9g77/

31
Rohit Jindal

Underscore.js verwenden:

var foundObject = _.findWhere(jsObjects, {b: 6});
19
maia

Im Vorschlag von ECMAScript 6 gibt es die Array-Methoden find() und findIndex(). MDN bietet auch Polyfills an, die Sie hinzufügen können, um die Funktionalität dieser Browser für alle Browser zu erhalten.

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
17
Amir

Wenn ich es richtig verstanden habe, möchten Sie das Objekt im Array finden, dessen b-Eigenschaft 6 ist.

var found;
jsObjects.some(function (obj) {
  if (obj.b === 6) {
    found = obj;
    return true;
  }
});

Oder wenn Sie Unterstrich verwenden:

var found = _.select(jsObjects, function (obj) {
  return obj.b === 6;
});
14
nickf

OK, Es gibt einige Möglichkeiten, dies zu tun, aber beginnen wir mit dem einfachsten und neuesten Ansatz, dies zu tun. Diese Funktion heißt find().

Seien Sie vorsichtig, wenn Sie find verwenden, da selbst IE11 dies nicht unterstützt, also muss es transpiliert werden ...

sie haben also diesen Gegenstand, wie Sie sagten:

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

und Sie können eine Funktion schreiben und so abrufen:

function filterValue(obj, key, value) {
  return obj.find(function(v){ return v[key] === value});
}

und benutze die Funktion wie folgt:

filterValue(jsObjects, "b", 6); //{a: 5, b: 6}

Auch in ES6 für noch gekürzte Version:

const filterValue = (obj, key, value)=> obj.find(v => v[key] === value);

Diese Methode gibt nur den ersten Wert zurück, der mit ... übereinstimmt. Für bessere Ergebnisse und Browserunterstützung können Sie filter verwenden:

const filterValue = (obj, key, value)=> obj.filter(v => v[key] === value);

und wir werden [{a: 5, b: 6}]... zurückgeben.

Diese Methode gibt stattdessen ein Array zurück ...

Sie können auch einfach für Schleife verwenden und eine Funktion wie folgt erstellen:

function filteredArray(arr, key, value) {
  const newArray = [];
  for(i=0, l=arr.length; i<l; i++) {
    if(arr[i][key] === value) {
      newArray.Push(arr[i]);
    }
  }
 return newArray;
}

und nenne es so:

filteredArray(jsObjects, "b", 6); //[{a: 5, b: 6}]
13
Alireza

Wenn Sie nach einem einzelnen Ergebnis und nicht nach einem Array suchen, kann ich die Reduzierung vorschlagen? 

Hier ist eine Lösung im einfachen Javascript, die ein übereinstimmendes Objekt zurückgibt, falls vorhanden, oder null, wenn nicht.

var result = arr.reduce(function(prev, curr) { return (curr.b === 6) ? curr : prev; }, null);
12
Sam Dushay

Wie wäre es mit _.find(collection, [predicate=_.identity], [fromIndex=0]) von lo-dash , um ein Objekt aus einem Objektarray anhand des Objekteigenschaftswerts abzurufen. Sie könnten so etwas tun: 

var o = _.find(jsObjects, {'b': 6});

Argumente: 

collection (Array|Object): The collection to inspect.
[predicate=_.identity] (Function): The function invoked per iteration.
[fromIndex=0] (number): The index to search from.

Kehrt zurück

(*): Returns the matched element (in your case, {a: 5, b: 6}), else undefined.

In Bezug auf die Leistung ist _.find() schneller, da nur das erste Objekt mit der Eigenschaft {'b': 6} abgerufen wird. Wenn Ihr Array hingegen mehrere Objekte mit übereinstimmenden Eigenschaften (key: value) enthält, sollten Sie die _.filter()-Methode in Betracht ziehen. In Ihrem Fall würde ich _.find() verwenden, da Ihr Array ein einzelnes Objekt mit dieser Eigenschaft hat. 

9
Simple-Solution

Sie können es ebenso wie unten mit der Pfeilfunktion verwenden:

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}
6
Shobhit Sharma

Sehen Sie sich diese Dokumentation an https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values ​​
Beispiel: 

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 }
4
asrulsibaoel

Der schnellste/beste Teil von dieser Antwort wurde verbessert, um wiederverwendbar zu sein:

function getElByPropVal(arr, prop, val){
    for (var i = 0, length = arr.length; i < length; i++) {
        if (arr[i][prop] == val){
            return arr[i];
        }
    }
}
3
Andrew

Erstes Objekt aus einem Objektarray anhand eines bestimmten Eigenschaftswerts abrufen:

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>

1
misher
var result = jsObjects.filter(x=> x.b === 6);

wird besser sein, mit return in filter kann man manchmal kein Ergebnis erzielen

0
Died

Verwenden Sie find with bind, um bestimmte Schlüsselwerte an eine Rückruffunktion zu übergeben. 

   function byValue(o) { 
       return o.a === this.a && o.b === this.b; 
   };   

   var result = jsObjects.find(byValue.bind({ a: 5, b: 6 }));
0
Serjuice