Jak iterovat klíči a hodnoty objektu v JavaScriptu

Někdy může být nutné procházet objektem v JavaScriptu, abyste získali více párů klíč–hodnota. V tomto článku se podíváme na čtyři různé způsoby smyčkování vlastností objektu v JavaScriptu.

Před ES6 byla jediným způsobem, jak procházet objektem smyčka for...in. Object.keys() Metoda byla zavedena v ES6, aby bylo snazší iterovat objekty. Později v ES8 byly přidány dvě nové metody, Object.entries() a Object.values() . Nejnovější metody převádějí objekt na pole a poté používají metody cyklování pole k iteraci tohoto pole.

Začněme první metodou!

for...in Smyčka

Nejjednodušší a přímočarý způsob iterace vlastností objektu je pomocí for...in tvrzení. Tato metoda funguje ve všech moderních i starých prohlížečích včetně Internet Exploreru 6 a vyšších.

Zde je příklad, který používá for...in smyčka pro iteraci objektu:

const user = {
    name: 'John Doe',
    email: '[email protected]',
    age: 25,
    dob: '08/02/1989',
    active: true
};

// iterate over the user object
for (const key in user) {
    console.log(`${key}: ${user[key]}`);
}

// name: John Doe
// email: [email protected]
// age: 25
// dob: 08/02/1989
// active: true

Problém s for...in smyčka spočívá v tom, že iteruje také prostřednictvím vlastností v řetězci prototypu. Protože objekty v JavaScriptu mohou dědit vlastnosti ze svých prototypů, fo...in příkaz bude také procházet těmito vlastnostmi.

Chcete-li se vyhnout iterování vlastností prototypu při opakování objektu, musíte explicitně zkontrolujte, zda vlastnost patří k objektu pomocí hasOwnProperty() metoda:

for (const key in user) {
    if (user.hasOwnProperty(key)) {
        console.log(`${key}: ${user[key]}`);
    }
}

Naštěstí se již nemusíme spoléhat na for...in a hasOwnProperty() metoda pro procházení objektu. Jsou k dispozici lepší způsoby.

Object.keys() Metoda

Object.keys() metoda byla zavedena v ES6. Vezme objekt, který chcete iterovat, jako argument a vrátí pole obsahující všechny názvy vlastností (nebo klíče).

Potom můžete použít kteroukoli z metod opakování pole, jako je forEach(), k iteraci pole a získání hodnoty každé vlastnosti.

Zde je příklad:

const courses = {
    java: 10,
    javascript: 55,
    nodejs: 5,
    php: 15
};

// convert object to key's array
const keys = Object.keys(courses);

// print all keys
console.log(keys);
// [ 'java', 'javascript', 'nodejs', 'php' ]

// iterate over object
keys.forEach((key, index) => {
    console.log(`${key}: ${courses[key]}`);
});

// java: 10
// javascript: 55
// nodejs: 5
// php: 15

Ve výše uvedené deklaraci funkce jsem použil syntaxi ES6. Předpokládám, že ES6 již znáte, zejména funkce šipek. Pokud jste v ES6 noví, podívejte se na průvodce funkcemi šipek, kde se o něm dozvíte.

Object.values() Metoda

Metoda Object.values() byla zavedena v ES8 a dělá opak Object.key() . Vrací hodnoty všech vlastností v objektu jako pole. Poté můžete procházet polem hodnot pomocí kterékoli z metod opakování pole.

Podívejme se na příklad:

const animals = {
    tiger: '🐅',
    cat: '🐱',
    monkey: '🐒',
    elephant: '🐘'
};

// iterate over object values
Object.values(animals).forEach(val => console.log(val));

// 🐅
// 🐱
// 🐒
// 🐘

Object.entries() Metoda

Object.entries() je další metoda, která byla zavedena v ES8 a lze ji použít k procházení objektu. Na rozdíl od Object.values() který vytvoří pole hodnot v objektu Object.entries() vytváří řadu polí. Každé vnitřní pole má dva prvky. Prvním prvkem je vlastnost; druhým prvkem je hodnota.

Zde je příklad:

const animals = {
    tiger: '🐅',
    cat: '🐱',
    monkey: '🐒',
    elephant: '🐘'
};

const entries = Object.entries(animals);
console.log(entries);

// [ [ 'tiger', '🐅' ],
//   [ 'cat', '🐱' ],
//   [ 'monkey', '🐒' ],
//   [ 'elephant', '🐘' ] ]

Pro iteraci přes pole vrácené Object.entries() , můžete použít cyklus for...of nebo metodu forEach(), jak je uvedeno níže:

// `for...of` loop
for (const [key, value] of Object.entries(animals)) {
    console.log(`${key}: ${value}`);
}

// `forEach()` method
Object.entries(animals).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
});

Závěr

To je vše pro iteraci přes vlastnosti objektu v JavaScriptu. Podívali jsme se na čtyři různé způsoby, jak tento úkol splnit. for...in je stále dobrá volba, pokud chcete podporovat staré prohlížeče. V opačném případě použijte některou z nejnovějších metod:Object.keys() , Object.values() nebo Object.entries() .