Hoe vind je de index van een object op basis van sleutel en waarde in een JavaScript-array

Gegeven:

var peoples = [
  { "attr1": "bob", "attr2": "pizza" },
  { "attr1": "john", "attr2": "sushi" },
  { "attr1": "larry", "attr2": "hummus" }
];

Gezocht:

Index van object waar attr === value, bijvoorbeeld attr1 === "john" of attr2 === "hummus"

Update: Lees alsjeblieft mijn vraag zorgvuldig, ik wil het object niet vinden via $.inArray en ik wil ook niet de waarde van een specifiek attribuut van het object krijgen. Houd hier rekening mee in je antwoorden. Dank je!

Antwoord #1

De functionele benadering

Alle coole kinderen doen tegenwoordig functioneel programmeren (hallo React-gebruikers), dus ik dacht dat ik de functionele oplossing zou geven. Naar mijn mening is het eigenlijk veel mooier dan de imperatieve for- en each-lussen die tot nu toe zijn voorgesteld en met de ES6-syntaxis is het vrij elegant.

Bijwerken

Er is nu een geweldige manier om dit te doen genaamd findIndex, die een functie neemt die true/false retourneert op basis van of het array-element overeenkomt (zoals altijd, controleer echter de compatibiliteit met browsers).

var index = peoples.findIndex(function(person) {
  return person.attr1 == "john"
});

Met ES6-syntaxis kun je dit schrijven:

var index = peoples.findIndex(p => p.attr1 == "john");

De (Oude) Functionele Benadering

TL;DR

Als je op zoek bent naar index waar peoples[index].attr1 == "john" gebruik:

var index = peoples.map(function(o) { return o.attr1; }).indexOf("john");

Uitleg

Stap 1

Gebruik .map() om een array van waarden te krijgen gegeven een bepaalde sleutel:

var values = object_array.map(function(o) { return o.your_key; });

De lijn hierboven brengt je vanaf hier:

var peoples = [
  { "attr1": "bob", "attr2": "pizza" },
  { "attr1": "john", "attr2": "sushi" },
  { "attr1": "larry", "attr2": "hummus" }
];

Naar hier:

var values = [ "bob", "john", "larry" ];

Stap 2

Nu gebruiken we gewoon .indexOf() om de index van de sleutel te vinden die we willen (wat natuurlijk ook de index is van het object dat we zoeken):

var index = values.indexOf(your_value);

Oplossing

We combineren al het bovenstaande:

var index = peoples.map(function(o) { return o.attr1; }).indexOf("john");

Of, als je de voorkeur geeft aan ES6-syntaxis:

var index = peoples.map((o) => o.attr1).indexOf("john");

Demo :

var peoples = [
  { "attr1": "bob", "attr2": "pizza" },
  { "attr1": "john", "attr2": "sushi" },
  { "attr1": "larry", "attr2": "hummus" }
];

var index = peoples.map(function(o) { return o.attr1; }).indexOf("john");
console.log("index of 'john': " + index);

var index = peoples.map((o) => o.attr1).indexOf("larry");
console.log("index of 'larry': " + index);

var index = peoples.map(function(o) { return o.attr1; }).indexOf("fred");
console.log("index of 'fred': " + index);

var index = peoples.map((o) => o.attr2).indexOf("pizza");
console.log("index of 'pizza' in 'attr2': " + index);

Antwoord #2

Als je het object zelf wilt controleren zonder het prototype te beïnvloeden, gebruik dan hasOwnProperty():

var getIndexIfObjWithOwnAttr = function(array, attr, value) {
    for(var i = 0; i < array.length; i++) {
        if(array[i].hasOwnProperty(attr) && array[i][attr] === value) {
            return i;
        }
    }
    return -1;
}

om ook prototype-attributen op te nemen, gebruik:

var getIndexIfObjWithAttr = function(array, attr, value) {
    for(var i = 0; i < array.length; i++) {
        if(array[i][attr] === value) {
            return i;
        }
    }
    return -1;
}