Jak iterovat pomocí objektu klíče a hodnoty v JavaScriptu

někdy budete muset iterovat přes objekt v JavaScriptu načíst více párů klíč-hodnota. V tomto článku se podíváme na čtyři různé způsoby opakování vlastností objektu v JavaScriptu.

před ES6, jediný způsob, jak smyčku přes objekt byl for…in smyčka. V ES6 byla zavedena metoda Object.keys(), která usnadňuje iteraci nad 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 opakování pole k iteraci přes toto pole.

začněme první metodou!

for…in smyčka

nejjednodušší a nejjednodušší způsob iterace nad vlastnostmi objektu je pomocí příkazu for...in. Tato metoda funguje ve všech moderních i starých prohlížečích, včetně aplikace Internet Explorer 6 a vyšší.

zde je příklad, který používá smyčku for...in pro iteraci nad objektem:

const user = { name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true};// iterate over the user objectfor (const key in user) { console.log(`${key}: ${user}`);}// name: John Doe// email: [email protected]// age: 25// dob: 08/02/1989// active: true

problém s for...in smyčka je, že to iteruje vlastnosti v řetězci prototypu, stejně. Vzhledem k tomu, že objekty v JavaScriptu mohou zdědit vlastnosti z jejich prototypů, příkaz fo...in bude procházet i těmito vlastnostmi.

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

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

Naštěstí, jsme již nebudou muset spoléhat na for...inhasOwnProperty() metoda procházet objekt. K dispozici jsou lepší způsoby.

objekt.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).

pak můžete použít kteroukoli z metod opakování pole, například forEach (), k iteraci přes pole a načtení hodnoty každé vlastnosti.

zde je příklad:

const courses = { java: 10, javascript: 55, nodejs: 5, php: 15};// convert object to key's arrayconst keys = Object.keys(courses);// print all keysconsole.log(keys);// // iterate over objectkeys.forEach((key, index) => { console.log(`${key}: ${courses}`);});// java: 10// javascript: 55// nodejs: 5// php: 15

ve výše uvedené deklaraci funkce jsem použil syntaxi ES6. Předpokládám, že již znáte ES6, zejména funkce šipek. Pokud jste v ES6 nováčkem, podívejte se na Průvodce funkcemi šipky a dozvíte se o tom.

objekt.hodnoty () metoda

objekt.metoda 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 valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘

objekt.položky () metoda

objekt.entries () je další metoda, která byla zavedena v ES8 a může být použita pro procházení objektu. Na rozdíl od Object.values(), který vytváří pole hodnot v objektu,Object.entries() vytváří pole polí. Každé vnitřní pole má dva prvky. První prvek je vlastnost; druhý prvek je hodnota.

zde je příklad:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]

Chcete-li iterovat přes pole vrácené Object.entries(), můžete použít pro…metody foreach (), jak je uvedeno níže:

// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});

závěr

to je vše pro iteraci nad vlastnostmi objektu v JavaScriptu. Podívali jsme se na čtyři různé metody, jak tento úkol splnit. for...in je stále dobrá volba, pokud chcete podporovat staré prohlížeče. Jinak stačí použít některý z nejnovějších metod: Object.keys()Object.values() nebo Object.entries().

Like Like Líbí se vám tento článek? Sledujte @attacomsian na Twitteru. Můžete mě také sledovat na LinkedIn a DEV. Přihlásit se k odběru RSS Feed.

If pokud vás baví čtení mých článků a chcete mě podpořit, abych pokračoval ve vytváření bezplatných výukových programů, Buy kupte mi kávu (cena $5) .