Kaip prijungti javascript objektą?

Turiu „JavaScript“ objektą, pavyzdžiui:

 var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; 

Dabar noriu eiti per visus p ( p1 , p2 , p3 ...) elementus ir gauti jų raktus bei vertybes. Kaip tai padaryti?

Jei reikia, galiu pakeisti „JavaScript“ objektą. Mano pagrindinis tikslas yra išvardyti kai kurias svarbiausias vertės poras ir, jei įmanoma, noriu išvengti eval .

2376
26 марта '09 в 9:01 2009-03-26 09:01 Tanmoy paklausė kovo 26 d., 09:01, 2009-03-26 09:01
@ 35 atsakymai
  • 1
  • 2

Galite naudoti for-in kilpą, kaip rodo kiti. Tačiau jūs taip pat turite įsitikinti, kad gautas raktas yra faktinė objekto nuosavybė ir nėra iš prototipo.

Čia yra fragmentas:

3796
26 марта '09 в 9:12 2009-03-26 09:12 atsakymas duotas levik kovo 26 d., 09:12, 2009-03-26 09:12

ECMAScript 5 galite sujungti Object.keys() ir Array.prototype.forEach() :

 var obj = { first: "John", last: "Doe" }; Object.keys(obj).forEach(function(key) { console.log(key, obj[key]); }); 

ECMAScript 6 prideda for...of :

 for (const key of Object.keys(obj)) { console.log(key, obj[key]); } 

„ECMAScript 8“ prideda „ Object.entries() kuri vengia ieškoti kiekvieno šaltinio objekto vertės:

 Object.entries(obj).forEach( ([key, value]) => console.log(key, value) ); 

Tiek Object.keys() tiek Object.entries() pakartoja savybes tokia pačia tvarka kaip ir for...in tačiau ignoruoja prototipo grandinę. Iteruotos savybės turi tik savo objekto savybes.

761
21 апр. Axel Rauschmayer atsakymas, pateiktas balandžio 21 d. 2011-04-21 00:59 '11 prie 0:59 2011-04-21 00:59

Turite naudoti, kad sukurtumėte

Bet būkite labai atsargūs, kai naudojate šio tipo ciklą, nes jis sukurs visas savybes išilgai prototipo grandinės .

Todėl, naudojant „for-in“ kilpas, visada naudokite hasOwnProperty metodą, kad nustatytumėte, ar dabartinė iteracijos ypatybė yra tikrinamo objekto nuosavybė:

 for (var prop in p) { if (!p.hasOwnProperty(prop)) { //The current property is not a direct property of p continue; } //Do your logic with the property here } 
314
26 марта '09 в 9:12 2009-03-26 09:12 Atsakymą davė Andreasas Grechas kovo 09 d., 09:12 2009-03-26 09:12

Klausimas nebus baigtas, nebent paminėtume alternatyvius objektų slinkimo būdus.

Šiuo metu daugelis gerai žinomų „JavaScript“ bibliotekų pateikia savo metodus, skirtus perkelti kolekcijas, ty per masyvus, objektus ir objektus, pvz., Masyvus. Šie metodai yra lengvai naudojami ir visiškai suderinami su bet kuria naršykle.

  • Jei dirbate su jQuery , galite naudoti jQuery.each() metodą. Jis gali būti naudojamas laisvai kartoti per objektus ir matricas:

     $.each(obj, function(key, value) { console.log(key, value); }); 
  • Underscore.js“ galite rasti _.each() metodą, kuris _.each() per elementų sąrašą, iš kurių kiekvienas lemia nustatytą funkciją (atkreipkite dėmesį į argumentų eiliškumą funkcijoje iterate!):

     _.each(obj, function(value, key) { console.log(key, value); }); 
  • „Lo-Dash“ suteikia kelis metodus, kaip pakartoti objekto savybes. „Basic _.forEach() (arba jo slapyvardis _.each() ) yra naudingas objektų ir masyvų slinkimui, tačiau (!) Objektai, kurių length yra, yra traktuojami kaip masyvai, ir siekiant išvengti šio elgesio, siūloma naudoti _.forIn() ir _.forOwn() (jie taip pat turi value argumentą):

     _.forIn(obj, function(value, key) { console.log(key, value); }); 

    _.forIn() per objekto nuosavą ir paveldėtą sąrašą, o _.forOwn() tik paties objekto savybes (daugiausia bando hasOwnProperty funkciją). Paprastiems objektams ir objektų literatūrai bet kuris iš šių metodų veiks gerai.

Paprastai visi aprašyti metodai turi tokį patį elgesį su bet kuriais nustatytais objektais. Be to, naudojant integruotą „ for..in kilpą paprastai būna greitesnis nei bet kokia abstrakcija, pvz., jQuery.each() , šie metodai yra daug lengviau naudojami, reikalauja mažiau kodavimo ir užtikrina geresnį klaidų apdorojimą.

239
20 янв. atsakymas duotas „ VisioN 20 jan. 2013-01-20 20:58 '13, 20:58, 2013-01-20 20:58

ECMAScript 5 programoje turite naują požiūrį į iteracinius Object.keys laukus - Object.keys

Daugiau informacijos rasite MDN

Mano pasirinkimas yra mažesnis kaip greitesnis sprendimas dabartinėse naršyklės versijose („Chrome30“, „IE10“, „FF25“)

 var keys = Object.keys(p), len = keys.length, i = 0, prop, value; while (i < len) { prop = keys[i]; value = p[prop]; i += 1; } 

Galite palyginti šio metodo našumą su įvairiomis jsperf.com įgyvendinimais:

Naršyklės palaikymas, kurį galite pamatyti Kangax žemėlapių lentelėje

Jei naudojate seną naršyklę, jūs tiesiog ir visiškai užpildote

UPD:

visų populiariausių šio klausimo atvejų perfjs.info :

pažodinis objektas iteracija

48
16 нояб. Atsakymą pateikė Pencroff 16 lapkritis. 2013-11-16 22:59 '13, 22:59 pm 2013-11-16 22:59

Galite tiesiog pasikartoti per ją, pavyzdžiui:

 for (var key in p) { alert(p[key]); } 

Atkreipkite dėmesį, kad key neatsižvelgia į turto vertę, tai tik indekso reikšmė.

38
26 марта '09 в 9:05 2009-03-26 09:05 atsakė Bryanui kovo 26 d. 09:05 2009-03-26 09:05

Pratarmė:

  • Objekto ypatybės gali būti privačios (nuosavybė yra pačiame objekte) arba paveldėta (o ne pačiame objekte, viename iš jos prototipų).
  • Objekto ypatybės gali būti išvardytos arba neįskaitomos. Nenurodytos savybės neįtraukiamos į nuosavybės / masyvo sąrašų rinkinį.
  • Nuosavybės pavadinimai gali būti stygos arba simboliai. Ypatybės, kurių vardai yra simboliai, nėra skaičiuojami nuosavybės / masyvo sąrašų rinkinyje.

Čia, 2018 m., Galėsite slinkti objekto ypatybes:

  1. for-in [ MDN , spec ] - kilpos struktūra, susikertanti skaičiuojamų savybių objektų, įskaitant paveldėtus, pavadinimus, kurių pavadinimai yra stygos
  2. Object.keys [ MDN , spec ] yra funkcija, kuri suteikia tinkamų objektų vardų, išvardytų savybių, kurių pavadinimai yra stygos.
  3. Object.values [ MDN , spec ] yra funkcija, kuri suteikia savo objekto reikšmių, išvardytų savybių, masyvą.
  4. Object.entries [ MDN , spec ] yra funkcija, kuri suteikia savo skaičiuotinų savybių objekto vardų ir vertybių masyvą.
  5. Object.getOwnPropertyNames [ MDN , spec ] yra funkcija, suteikianti objekto savybių (netgi nesuskaičiuojamų), kurių pavadinimai yra stygos, pavadinimus.
  6. Object.getOwnPropertySymbols [ MDN , spec ] yra funkcija, suteikianti objekto savybių (netgi nesuskaičiuojamų), kurių pavadinimai yra simboliai, pavadinimų masyvą.
  7. Reflect.ownKeys [ MDN , spec ] yra funkcija, kuri suteikia tinkamo objekto savybių vardų (netgi nesuskaičiuojamų), nepriklausomai nuo to, ar šie pavadinimai yra stygos, ar simboliai.
  8. Jei norite, kad visi objekto savybės, įskaitant neskaitomus, paveldėtus, jums reikia naudoti kilpą ir Object.getPrototypeOf [ MDN , spec ] ir naudoti Object.getOwnPropertyNames , Object.getOwnPropertySymbols arba Reflect.ownKeys kiekvienam prototipo grandinės objektui (pavyzdys šio atsakymo apačioje) ).

Su visais, išskyrus for-in , jūs turite naudoti tam tikrą kilpą masyve ( for , for-of , forEach ir tt).

Pavyzdžiai:

for-in :

 .as-console-wrapper { max-height: 100% !important; } 
26
10 июля '18 в 13:39 2018-07-10 13:39 Atsakymas, kurį pateikė TJ Crowder, liepos 10 d., 18 val., 13:30 val. 2018-07-10 13:39

Kadangi es2015 tampa vis populiaresnė, siunčiu šį atsakymą, kuris apima generatoriaus ir iteratoriaus naudojimą sklandžiam iteracijai per [key, value] poras. Kaip įmanoma, kitomis kalbomis, pavyzdžiui, Ruby.

Gerai čia yra kodas:

 const MyObject = { 'a': 'Hello', 'b': 'it\'s', 'c': 'me', 'd': 'you', 'e': 'looking', 'f': 'for', [Symbol.iterator]: function* () { for (const i of Object.keys(this)) { yield [i, this[i]]; } } }; for (const [k, v] of MyObject) { console.log(`Here is key ${k} and here is value ${v}`); } 

Visa informacija apie tai, kaip galite sukurti iteratorių ir generatorių, galite rasti „Mozilla“ kūrėjo puslapyje.

Tikiuosi, kad tai padėjo kažkas.

EDIT:

ES2017 bus įtraukta į Object.entries , kuri supaprastins iteraciją per [key, value] poras objektuose. Dabar žinoma, kad ji bus standarto dalis pagal ts39 pateiktą informaciją

Manau, kad atėjo laikas atnaujinti savo atsakymą, kad jis taptų dar šviežesnis nei dabar.

 const MyObject = { 'a': 'Hello', 'b': 'it\'s', 'c': 'me', 'd': 'you', 'e': 'looking', 'f': 'for', }; for (const [k, v] of Object.entries(MyObject)) { console.log(`Here is key ${k} and here is value ${v}`); } 

Sužinokite daugiau apie MDN puslapio naudojimą.

24
27 авг. atsakymą pateikė „ FieryCod“ 27 rug . 2016-08-27 12:06 '16 at 12:06 2016-08-27 12:06

per prototipą su „ ForEach“ () , kuri turėtų praleisti prototipo grandinės savybes:

 Object.prototype.each = function(f) { var obj = this Object.keys(obj).forEach( function(key) { f( key , obj[key] ) }); } //print all keys and values var obj = {a:1,b:2,c:3} obj.each(function(key,value) { console.log(key + " " + value) }); // a 1 // b 2 // c 3 
19
09 дек. Atsakymas pateikiamas bitstrider 09 Dec. 2012-12-09 08:05 '12, 08:05 2012-12-09 08:05

Peržiūrėję visus atsakymus čia, hasOwnProperty nereikalaujama mano paties naudojimui, nes mano džentų objektas yra švarus; nėra tikslo pridėti papildomą „JavaScript“ apdorojimą. Tai viskas, ką naudoju:

 for (var key in p) { console.log(key + ' => ' + p[key]); // key is key // value is p[key] } 
18
18 авг. Atsakymas, kurį pateikė Francis Lewis, rugpjūčio 18 d 2011-08-18 23:50 '11 11:50 val. 2011-08-18 23:50
 for(key in p) { alert( p[key] ); } 

Pastaba: tai galite padaryti pagal masyvus, bet jūs pereisite per length žymes ir kitas savybes.

16
26 марта '09 в 9:04 2009-03-26 09:04 atsakymą pateikė Richardas Levasseuras kovo 26 d. 09:04 2009-03-26 09:04

Įdomūs žmonės šiuose atsakymuose palietė abu Object.keys() ir for...of bet niekada jų Object.keys() :

 var map = {well:'hello', there:'!'}; for (let key of Object.keys(map)) console.log(key + ':' + map[key]); 

Jūs negalite paprasčiausiai for...of Object nes jis nėra iteratorius, bet for...index ar .forEach() Object.keys() yra bjaurus / neveiksmingas.
Džiaugiuosi, kad dauguma žmonių susilaiko nuo for...in (su arba be tikrinimo .hasOwnProperty() ), nes tai taip pat šiek tiek nepatogus, todėl, be pirmiau pateikto atsakymo, aš čia noriu pasakyti ...


Galite atlikti įprastas iteracijos objektų asociacijas! Elgesys yra toks pat, kaip ir Map su tiesioginiu fantazijos for...of
DEMO veikia „Chrome“ ir „FF“ (manau, tik ES6)

 var ordinaryObject = {well:'hello', there:'!'}; for (let pair of ordinaryObject) //key:value console.log(pair[0] + ':' + pair[1]); //or for (let [key, value] of ordinaryObject) console.log(key + ':' + value); 

Kai įjungiate žemiau esantį tarpiklį:

 //makes all objects iterable just like Maps!!! YAY //iterates over Object.keys() (which already ignores prototype chain for us) Object.prototype[Symbol.iterator] = function() { var keys = Object.keys(this)[Symbol.iterator](); var obj = this; var output; return {next:function() { if (!(output = keys.next()).done) output.value = [output.value, obj[output.value]]; return output; }}; }; 

Nesukuriant realaus žemėlapio objekto, kuris neturi gražaus sintaksinio cukraus.

 var trueMap = new Map([['well', 'hello'], ['there', '!']]); for (let pair of trueMap) console.log(pair[0] + ':' + pair[1]); 

Tiesą sakant, su šia padėklą, jei vis dar norėjote pasinaudoti kitų žemėlapio funkcijomis (be jų apipjaustymo), bet vis dar norėjote naudoti tvarkingą objektų žymėjimą, nes objektai dabar yra pasikartojantis, dabar galite tiesiog padaryti jo žemėlapį!

 //shown in demo var realMap = new Map({well:'hello', there:'!'}); 

Tiems, kurie nemėgsta kloti arba visai neveikia su prototype , nedvejodami atlikite funkciją >getObjIterator() ;

 //no prototype manipulation function getObjIterator(obj) { //create a dummy object instead of adding functionality to all objects var iterator = new Object(); //give it what the shim does but as its own local property iterator[Symbol.iterator] = function() { var keys = Object.keys(obj)[Symbol.iterator](); var output; return {next:function() { if (!(output = keys.next()).done) output.value = [output.value, obj[output.value]]; return output; }}; }; return iterator; } 

Dabar galite tiesiog jį pavadinti normaliomis funkcijomis.

 var realMap = new Map(getObjIterator({well:'hello', there:'!'})) 

arba

 for (let pair of getObjIterator(ordinaryObject)) 

Nėra jokios priežasties, kodėl tai neveiks.

Sveiki atvykę į ateitį.

15
28 июня '16 в 12:42 2016-06-28 12:42 atsakymą pateikė Hashbrown birželio 28 d. 16 d. 12:42 2016-06-28 12:42

Object.keys (obj): masyvas

atkuria visus eilės raktus iš visų įskaitomų tinkamų (ne paveldėtų) savybių.

Taigi jis pateikia tą patį raktų sąrašą, kaip ir jūs, išbandydami kiekvieną objekto raktą naudodami hasOwnProperty. Jums nereikia šios papildomos bandymo operacijos, bet ne „ Object.keys( obj ).forEach(function( key ){}) turėtų būti greičiau. Įrodykime:

http://codepen.io/dsheiko/pen/JdrqXa 

PS2: „ES6“ („EcmaScript 2015“) galite pakartoti pakartotinį objektą maloniau:

12
22 июня '15 в 12:52 2015-06-22 12:52 atsakymą Dmitrijus Šeikas pateikė birželio 15 d., 15 val. 12:52 2015-06-22 12:52

Čia yra dar vienas objekto kartojimo metodas.

11
20 дек. Atsakymą pateikė Harsh Patel . 2017-12-20 07:42 '17 at 7:42 2017-12-20 07:42

 <p> Output:<br> p1 = values1<br> p2 = values2<br> p3 = values3 </p> 
10
21 февр. atsakymas pateikiamas ParaMeterz 21 vasario mėn. 2012-02-21 14:22 '12 at 14:22 pm 2012-02-21 14:22

Object.keys() metodas grąžina konkrečių objektų masyvą savo pačių skaičiuojamoms savybėms. Daugiau apie tai skaitykite čia.

8
16 нояб. George Bailey lapkričio 16 d. Atsakymas 2017-11-16 23:04 '17, 11:04 val. 2017-11-16 23:04

Visiems objektams galite pridėti paprastą funkciją, kad galėtumėte automatiškai pereiti per bet kurį objektą:

 Object.defineProperty(Object.prototype, 'forEach', { value: function (func) { for (var key in this) { if (!this.hasOwnProperty(key)) { // skip loop if the property is from prototype continue; } var value = this[key]; func(key, value); } }, enumerable: false }); 

Tiems, kuriems nepatinka „už ...“, metodas:

 Object.defineProperty(Object.prototype, 'forEach', { value: function (func) { var arr = Object.keys(this); for (var i = 0; i < arr.length; i++) { var key = arr[i]; func(key, this[key]); } }, enumerable: false }); 

Dabar galite tiesiog skambinti:

 p.forEach (function(key, value){ console.log ("Key: " + key); console.log ("Value: " + value); }); 

Jei nenorite sukurti prieštaravimų su kitais „eEach“ metodais, galite jį paskambinti pagal savo unikalų pavadinimą.

7
22 нояб. Atsakymas pateiktas Biber 22 lapkričio. 2016-11-22 23:46 '16 at 11:46 2016-11-22 23:46

Kilpos gali būti gana įdomios naudojant gryną javascript. Atrodo, kad tik ECMA6 (naujos 2015 metų „JavaScript“ specifikacijos) kontroliavo ciklą. Deja, rašydamas tai, tiek naršyklės, tiek populiari integruota plėtros aplinka (IDE) vis dar stengiasi visiškai paremti naujus varpus ir švilpukus.

Iš pirmo žvilgsnio „JavaScript“ „JavaScript“ ciklas atrodo prieš ECMA6:

 for (var key in object) { if (p.hasOwnProperty(key)) { var value = object[key]; console.log(key); // This is the key; console.log(value); // This is the value; } } 

Be to, žinau, kad šis klausimas nepatenka į šio klausimo taikymo sritį, tačiau 2011 m. ECMAScript 5.1 pridėjo tik forEach metodą forEach , kurie iš esmės sukūrė naują ir patobulintą būdą cikliškai transformuoti masyvus, išlaikydami nesikeičiančius objektus su senu verboze ir sujungdami for kilpa. Tačiau keista dalis yra ta, kad šis naujasis forEach metodas nepalaiko break , kuri sukelia visas kitas problemas.

Iš esmės 2011 m. Nėra tikro patikimo būdo susieti „JavaScript“, išskyrus tai, kad daugelis populiarių bibliotekų („jQuery“, „Underscore“ ir kt.) Nusprendė iš naujo įgyvendinti.

Nuo 2015 m. Dabar turime geresnį būdą naudoti kilpą (ir nutraukti) bet kokio tipo objektus (įskaitant masyvus ir eilutes). Taip, kaip rekomendacija tampa pagrindine, atrodo, kad „loop“ bus „JavaScript“

 for (let [key, value] of Object.entries(object)) { console.log(key); // This is the key; console.log(value); // This is the value; } 

Atkreipkite dėmesį, kad dauguma naršyklių nepalaikys minėto kodo nuo 2016 m. Birželio 18 d. Net ir „Chrome“, turite įgalinti šią specialią vėliavą dirbti: chrome://flags/#enable-javascript-harmony

Kol jis taps nauju standartu, senas metodas vis dar gali būti naudojamas, tačiau populiariose bibliotekose yra alternatyvų arba netgi lengvos alternatyvos tiems, kurie nenaudoja nė vienos iš šių bibliotekų.

5
18 июня '16 в 5:11 2016-06-18 05:11 atsakymą pateikė Nicolas Bouvrette birželio 18 d., 16 val. 5:11 2016-06-18 05:11

Tik „JavaScript“ kodas be priklausomybės:

 var p = {"p1": "value1", "p2": "value2", "p3": "value3"}; keys = Object.keys(p); // ["p1", "p2", "p3"] for(i = 0; i < keys.length; i++){ console.log(keys[i] + "=" + p[keys[i]]); // p1=value1, p2=value2, p3=value3 } 
5
21 апр. atsakė mohamed-ibrahim balandžio 21 d 2015-04-21 15:02 '15 15:02 2015-04-21 15:02

Norėčiau tai padaryti, užuot obj.hasOwnerProperty kiekvieną for ... in

 var obj = {a : 1}; for(var key in obj){ //obj.hasOwnProperty(key) is not needed. console.log(key); } //then check if anybody has messed the native object. Put this code at the end of the page. for(var key in Object){ throw new Error("Please don't extend the native object"); } 
4
09 июля '15 в 11:22 2015-07-09 11:22 atsakymas pateikiamas Lewis liepos 09 d. 15 val. 11:22 2015-07-09 11:22

Jei norite kartoti daugiau nei nesuskaičiuojamas ypatybes , galite naudoti Object.getOwnPropertyNames(obj) kad grąžintumėte visų savybių (išvardytų ar ne), esančių tiesiogiai nurodytame objekte, masyvą.

3
12 сент. Atsakymas duotas Dheeraj VS 12 sept. 2015-09-12 19:31 '15, 19:31, 2015-09-12 19:31

Atsižvelgiant į ES6, norėčiau pridėti savo šaukštą cukraus ir pasiūlyti kitą metodą, kad būtų galima pakartoti objekto savybes.

Поскольку простой объект JS не является iterable просто из коробки, мы не можем использовать цикл for..of для итерации по его содержание. Но никто не может остановить нас , чтобы сделать его итерируемым .

Пусть у нас есть объект book .

 let book = { title: "Amazing book", author: "Me", pages: 3 } book[Symbol.iterator] = function(){ let properties = Object.keys(this); // returns an array with property names let counter = 0; let isDone = false; let next = () => { if(counter >= properties.length){ isDone = true; } return { done: isDone, value: this[properties[counter++]] } } return { next }; }