Kuinka iteroida kautta objektin avaimet ja arvot JavaScript

joskus saatat joutua iteroida kautta objektin JavaScript hakea useita avain-arvo paria. Tässä artikkelissa, tarkastelemme neljä eri tapaa silmukointi yli objektin ominaisuudet JavaScript.

ennen ES6: ta ainoa tapa silmukoida objektin läpi oli for…in silmukka. Object.keys() menetelmä otettiin käyttöön ES6: ssa, jotta kappaleiden iterointi olisi helpompaa. Myöhemmin ES8: aan lisättiin kaksi uutta menetelmää, Object.entries() ja Object.values(). Uusimmat menetelmät muuntaa objektin array ja sitten käyttää array silmukointi menetelmiä iteroida yli, että array.

aloittakaamme ensimmäisellä menetelmällä!

for…in Silmukka

yksinkertaisin ja suoraviivaisin tapa iteroida kohteen ominaisuuksia on for...in lauseke. Tämä menetelmä toimii kaikissa nykyaikaisissa ja vanhoissa selaimissa, mukaan lukien Internet Explorer 6 ja uudemmat.

tässä on esimerkki, jossa for...in silmukka iteroi kohteen yli:

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

for...in silmukan ongelma on, että se iteroituu myös prototyyppiketjun ominaisuuksien kautta. Koska JavaScriptin oliot voivat periä ominaisuuksia prototyypeiltään, fo...in lauseke silmukoi myös nämä ominaisuudet.

jotta prototyyppiominaisuuksia ei iteroitaisi objektia silmukoidessa, täytyy hasOwnProperty() – menetelmällä tarkistaa erikseen, kuuluuko ominaisuus objektille:

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

onneksi enää ei tarvitse turvautua for...in ja hasOwnProperty() menetelmään silmukoida objektin läpi. Parempiakin keinoja on tarjolla.

objekti.keys () – menetelmä

Object.keys() – menetelmä otettiin käyttöön ES6: ssa. Se ottaa objektin, jonka haluat iteroida yli argumenttina ja palauttaa taulukon, joka sisältää kaikki ominaisuuksien nimet (tai avaimet).

voit käyttää mitä tahansa array silmukoinnin menetelmiä, kuten forEach(), iteroida array ja hakea arvo kunkin ominaisuuden.

tässä on esimerkki:

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

yllä olevassa funktioilmoituksessa käytin ES6-syntaksia. Oletan, että olet jo perehtynyt ES6 erityisesti arrow toiminnot. Jos olet uusi ES6, tutustu arrow toiminnot opas oppia siitä.

objekti.arvot () menetelmä

objekti.arvot () – menetelmä otettiin käyttöön ES8: ssa ja se tekee päinvastoin kuin Object.key(). Se palauttaa objektin kaikkien ominaisuuksien arvot taulukkona. Voit sitten silmukka läpi arvot array käyttämällä mitä tahansa array silmukointi menetelmiä.

Tarkastellaanpa esimerkkiä:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘

objekti.merkinnät () menetelmä

objekti.merkinnät () on toinen ES8: ssa käyttöön otettu menetelmä, jota voidaan käyttää jonkin objektin läpikulkuun. Toisin kuin Object.values(), joka luo joukon objektin arvoja, Object.entries() tuottaa joukon taulukoita. Jokaisessa sisärivistössä on kaksi elementtiä. Ensimmäinen osa on omaisuus, toinen osa on arvo.

tässä on esimerkki:

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

iteroidaksesi Object.entries(), voit käyttää joko for: ää…of loop tai forEach () menetelmä kuten alla:

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

Conclusion

That ’ s all for iterating over object properties in JavaScript. Tarkastelimme neljää eri menetelmää tämän tehtävän toteuttamiseksi. for...in on edelleen hyvä vaihtoehto, jos haluaa tukea vanhoja selaimia. Muussa tapauksessa käytetään mitä tahansa uusimpia menetelmiä: Object.keys()Object.values() tai Object.entries().

️ ️ Like this article? Seuraa @attacomsian Twitterissä. Voit myös seurata minua LinkedInissä ja DEVISSÄ. Tilaa RSS-syöte.

👋 Jos nautit artikkeleideni lukemisesta ja haluat tukea minua jatkamaan ilmaisten opetusohjelmien luomista, ☕ osta minulle kahvi (maksaa 5 dollaria) .