Jak przejść przez pętlę lub wyliczyć obiekt JavaScript?

Mam obiekt JavaScript podobny do następującego:

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

Teraz chcę pętli wszystkich pelementów ( p1, p2, p3...) i dostać klucze i wartości. Jak mogę to zrobić?

W razie potrzeby mogę zmodyfikować obiekt JavaScript. Moim ostatecznym celem jest przejście przez niektóre pary kluczowych wartości i jeśli to możliwe, chcę uniknąć ich używania eval.

Możesz użyć for-inpętli w sposób pokazany przez innych. Musisz jednak upewnić się, że klucz, który otrzymasz, jest faktyczną właściwością obiektu i nie pochodzi z prototypu.

Oto fragment:

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

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " -> " + p[key]);
    }
}

For-of with Object.keys () alternatywa:

var p = {
    0: "value1",
    "b": "value2",
    key: "value3"
};

for (var key of Object.keys(p)) {
    console.log(key + " -> " + p[key])
}

Zauważ, że użycie for-ofzamiast for-in, jeśli nie zostanie użyte, zwróci niezdefiniowane właściwości o nazwanych właściwościach i Object.keys()zapewni użycie tylko własnych właściwości obiektu bez właściwości całego łańcucha prototypów

Używając nowej Object.entries()metody:

Uwaga: Ta metoda nie jest obsługiwana natywnie przez Internet Explorera. Możesz rozważyć użycie funkcji Polyfill w starszych przeglądarkach.

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

for (let [key, value] of Object.entries(p)) {
  console.log(`${key}: ${value}`);
}

W ECMAScript 5 możesz łączyć Object.keys()i Array.prototype.forEach():

var obj = { first: "John", last: "Doe" };

Object.keys(obj).forEach(function(key) {
    console.log(key, obj[key]);
});

ECMAScript 6 dodaje for...of:

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

ECMAScript 8 dodaje, Object.entries()że unika się konieczności wyszukiwania każdej wartości w oryginalnym obiekcie:

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

Możesz łączyć for...of, niszczyć i Object.entries:

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

Zarówno Object.keys()i Object.entries()iterują właściwości w tej samej kolejności co for...inpętla, ale ignorują łańcuch prototypów . Iterowane są tylko własne wyliczalne właściwości obiektu.

Musisz użyć pętli for-in

Należy jednak zachować ostrożność podczas korzystania z tego rodzaju pętli, ponieważ spowoduje to zapętlenie wszystkich właściwości wzdłuż łańcucha prototypów .

Dlatego podczas korzystania z pętli wejściowych zawsze używaj hasOwnPropertymetody, aby ustalić, czy bieżąca właściwość w iteracji jest rzeczywiście własnością obiektu, który sprawdzasz:

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
}

Pytanie nie będzie kompletne, jeśli nie wspomnimy o alternatywnych metodach zapętlania obiektów.

Obecnie wiele dobrze znanych bibliotek JavaScript udostępnia własne metody iteracji po kolekcjach, tj. Tablicach , obiektach i obiektach podobnych do tablic . Te metody są wygodne w użyciu i są w pełni kompatybilne z dowolną przeglądarką.

1. Jeśli pracujesz z jQuery , możesz użyć jQuery.each()metody. Można go używać do płynnego iterowania zarówno obiektów, jak i tablic:

   $.each(obj, function(key, value) {
       console.log(key, value);
   });

2. W Underscore.js można znaleźć metodę _.each(), która iteruje po liście elementów, dając z kolei każdy z dostarczonych funkcji (zwróć uwagę na kolejność argumentów w funkcji iteracji !):

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

3. Lo-Dash zapewnia kilka metod iteracji właściwości obiektu. Podstawowy _.forEach()(lub jego alias _.each()) jest przydatny do przechodzenia między obiektami i tablicami, jednak (!) Obiekty z lengthwłaściwością są traktowane jak tablice i aby uniknąć tego zachowania, sugeruje się użycie _.forIn()i _.forOwn()metody (te mają również valueargument na początku):

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

   _.forIn()iteruje nad własnymi i odziedziczonymi wyliczalnymi właściwościami obiektu, podczas gdy _.forOwn()iteruje tylko nad własnymi właściwościami obiektu (w zasadzie sprawdzenie hasOwnPropertyfunkcji). W przypadku prostych obiektów i literałów obiektowych dowolna z tych metod będzie działać poprawnie.

Ogólnie wszystkie opisane metody zachowują się tak samo z dowolnymi dostarczonymi obiektami. Poza tym użycie for..inpętli rodzimej będzie zwykle szybsze niż jakakolwiek abstrakcja, na przykład jQuery.each()metody te są znacznie łatwiejsze w użyciu, wymagają mniej kodowania i zapewniają lepszą obsługę błędów.

W ECMAScript 5 masz nowe podejście do iteracji w dosłowności - Object.keys

Więcej informacji można znaleźć w MDN

Mój wybór jest poniżej jako szybsze rozwiązanie w obecnych wersjach przeglądarek (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;
}

Możesz porównać wydajność tego podejścia z różnymi implementacjami na jsperf.com :

• Rozszerz implementacje
• Iteracja kluczy obiektowych
• iteracja dosłowna obiektu

Obsługa przeglądarek widoczna w tabeli kompatybilności Kangaxa

W przypadku starej przeglądarki masz prosty i pełny pakiet wypełniający

UPD:

porównanie wydajności dla wszystkich najpopularniejszych przypadków w tym pytaniu na perfjs.info:

iteracja dosłowna obiektu

Przedmowa:

• Właściwości obiektu mogą być własne (właściwość znajduje się na samym obiekcie) lub odziedziczone (nie na samym obiekcie, na jednym z jego prototypów).
• Właściwości obiektu mogą być policzalne lub niepoliczalne . Właściwości niepoliczalne są pomijane w wielu wyliczeniach / tablicach właściwości.
• Nazwy właściwości mogą być ciągami znaków lub symbolami. Właściwości, których nazwy to Symbole, są pomijane w wielu wyliczeniach / tablicach właściwości.

Tutaj w 2018 r. Masz opcje do przechodzenia między właściwościami obiektu (niektóre przykłady znajdują się na liście):

1. for-in[ MDN , spec ] - Struktura pętli, która przechodzi przez nazwy właściwości wyliczalnych obiektu , w tym odziedziczonych, których nazwy są łańcuchami
2. Object.keys[ MDN , spec ] - Funkcja udostępniająca tablicę nazw własnych , policzalnych właściwości obiektu, których nazwy są łańcuchami.
3. Object.values[ MDN , Spec ] - funkcja zapewnienia tablicę wartości obiektu na własnych , przeliczalnych właściwości.
4. Object.entries[ MDN , spec ] - Funkcja zapewniająca tablicę nazw i wartości własnych , wyliczalnych właściwości obiektu (każda pozycja w tablicy jest [name, value]tablicą).
5. Object.getOwnPropertyNames[ MDN , spec ] - Funkcja udostępniająca tablicę nazw własnych właściwości obiektu (nawet niepoliczalnych), których nazwy są łańcuchami.
6. Object.getOwnPropertySymbols[ MDN , spec ] - Funkcja udostępniająca tablicę nazw własnych właściwości obiektu (nawet niepoliczalnych), których nazwy to Symbole.
7. Reflect.ownKeys[ MDN , spec ] - Funkcja udostępniająca tablicę nazw własnych właściwości obiektu (nawet tych niepoliczalnych), niezależnie od tego, czy są to ciągi znaków, czy symbole.
8. Jeśli chcesz wszystkie właściwości obiektu, w tym zakaz przeliczalnych odziedziczonych z nich, trzeba użyć pętli i Object.getPrototypeOf[ MDN , Spec ] i za pomocą Object.getOwnPropertyNames, Object.getOwnPropertySymbolsalbo Reflect.ownKeysna każdy obiekt w łańcuchu prototypu (przykład na dole tej odpowiedzi).

Ze wszystkich z wyjątkiem for-in, można by użyć jakiegoś zapętlenie konstrukt na tablicy ( for, for-of, forEach, itd.).

Przykłady:

for-in:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name in o) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.keys (z for-ofpętlą, ale można użyć dowolnej konstrukcji pętli) :

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.keys(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.values:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const value of Object.values(o)) {
    console.log(`${value}`);
}

Object.entries:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const [name, value] of Object.entries(o)) {
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertyNames:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertyNames(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertySymbols:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertySymbols(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Reflect.ownKeys:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Reflect.ownKeys(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Wszystkie właściwości , w tym odziedziczone niewymienne:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) {
    for (const name of Reflect.ownKeys(current)) {
        const value = o[name];
        console.log(`[${depth}] ${String(name)} = ${String(value)}`);
    }
}

.as-console-wrapper {
  max-height: 100% !important;
}

Możesz po prostu iterować:

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

Pamiętaj, że keynie przyjmuje wartości właściwości, jest to tylko wartość indeksu.

Ponieważ es2015 staje się coraz bardziej popularny, zamieszczam tę odpowiedź, która obejmuje użycie generatora i iteratora do płynnego iterowania [key, value]par. Jak to możliwe w innych językach, na przykład Ruby.

Ok, oto kod:

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}`);
}

Wszystkie informacje o tym, jak wykonać iterator i generator, można znaleźć na stronie programisty Mozilla.

Mam nadzieję, że to komuś pomogło.

EDYTOWAĆ:

ES2017 będzie zawierać, Object.entriesco [key, value]jeszcze bardziej ułatwi iterację par w obiektach. Obecnie wiadomo, że będzie to część standardu zgodnie z informacją o etapie ts39 .

Myślę, że czas zaktualizować moją odpowiedź, aby stała się jeszcze bardziej świeża niż obecnie.

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}`);
}

Więcej informacji na temat użytkowania można znaleźć na stronie MDN

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

Uwaga: możesz to zrobić na tablicach, ale będziesz iterował także lengthi inne właściwości.

Po przejrzeniu wszystkich odpowiedzi tutaj, hasOwnProperty nie jest wymagane do własnego użytku, ponieważ mój obiekt json jest czysty; naprawdę nie ma sensu dodawać żadnego dodatkowego przetwarzania javascript. To wszystko, czego używam:

for (var key in p) {
    console.log(key + ' => ' + p[key]);
    // key is key
    // value is p[key]
}

poprzez prototyp za pomocą forEach (), który powinien pominąć właściwości łańcucha prototypów :

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

To ciekawe, ludzie w tych odpowiedziach dotknął zarówno Object.keys()a for...ofjednak nigdy ich łączy:

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

_{Nie można po prostu ponieważ nie jest iterator i czy ing jest brzydki / nieefektywne. Cieszę się, że większość ludzi powstrzymuje się od (z lub bez sprawdzania ), ponieważ jest to również trochę niechlujne, więc poza moją odpowiedzią powyżej, jestem tutaj, aby powiedzieć ...for...ofObjectfor...index.forEach()Object.keys()
for...in.hasOwnProperty()}

Możesz iterować zwykłe powiązania obiektów! Zachowując się jak Maps przy bezpośrednim użyciu fantazyjnego for...of
DEMO działającego w Chrome i FF (zakładam tylko 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);

Tak długo, jak podasz mój podkładkę poniżej:

//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;
    }};
};

Bez konieczności tworzenia prawdziwego obiektu mapy, który nie ma miłego cukru syntaktycznego.

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

W rzeczywistości przy tym podkładce dystansowej, jeśli nadal chciałbyś skorzystać z innej funkcjonalności Mapy (bez odgradzania ich wszystkich), ale nadal chciałeś używać schludnej notacji obiektowej, ponieważ obiekty są teraz iterowalne, możesz teraz po prostu stworzyć z nich Mapę!

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

Dla tych, którzy nie lubią się bawić, lub prototypew ogóle nie zadzierać , możesz zamiast tego ustawić funkcję okna, nazywając to tak jak getObjIterator()wtedy;

//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;
}

Teraz możesz po prostu wywołać to jako zwykłą funkcję, nic więcej nie ma wpływu

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

lub

for (let pair of getObjIterator(ordinaryObject))

Nie ma powodu, dla którego to by nie działało.

Witamy w przyszłości.

Object.keys (obj): Array

pobiera wszystkie klucze o wartościach łańcuchowych wszystkich możliwych do wyliczenia własnych (nie odziedziczonych) właściwości.

Daje to taką samą listę kluczy, jaką zamierzasz, testując każdy klucz obiektu za pomocą hasOwnProperty. Ta dodatkowa operacja testowa nie Object.keys( obj ).forEach(function( key ){})jest potrzebna i powinna być szybsza. Udowodnijmy to:

var uniqid = function(){
			var text = "",
					i = 0,
					possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
			for( ; i < 32; i++ ) {
					text += possible.charAt( Math.floor( Math.random() * possible.length ) );
			}
			return text;
		}, 
		CYCLES = 100000,
		obj = {}, 
		p1,
		p2,
		p3,
		key;

// Populate object with random properties
Array.apply( null, Array( CYCLES ) ).forEach(function(){
	obj[ uniqid() ] = new Date()
});

// Approach #1
p1 = performance.now();
Object.keys( obj ).forEach(function( key ){
	var waste = obj[ key ];
});

p2 = performance.now();
console.log( "Object.keys approach took " + (p2 - p1) + " milliseconds.");

// Approach #2
for( key in obj ) {
	if ( obj.hasOwnProperty( key ) ) {
		var waste = obj[ key ];
	}
}

p3 = performance.now();
console.log( "for...in/hasOwnProperty approach took " + (p3 - p2) + " milliseconds.");

W moim Firefoksie mam następujące wyniki

• Podejście Object.keys trwało 40,21101451665163 milisekund.
• dla ... w / hasOwnProperty podejście zajęło 98,26163508463651 milisekund.

PS. w Chrome różnica jest jeszcze większa http://codepen.io/dsheiko/pen/JdrqXa

PS2: W ES6 (EcmaScript 2015) możesz iterować ładniej obiekt iterowalny:

let map = new Map().set('a', 1).set('b', 2);
for (let pair of map) {
    console.log(pair);
}

// OR 
let map = new Map([
    [false, 'no'],
    [true,  'yes'],
]);
map.forEach((value, key) => {
    console.log(key, value);
});

Oto kolejna metoda iteracji po obiekcie.

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


Object.keys(p).forEach(key => { console.log(key, p[key]) })

Możesz także użyć Object.keys () i iterować po obiektowych kluczach jak poniżej, aby uzyskać wartość:

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

Object.keys(p).forEach((key)=> {
 console.log(key +' -> '+ p[key]);
});

Tylko kod JavaScript bez zależności:

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
}

Object.keys()Zwraca tablicę własnych właściwości przeliczalnych danego obiektu. Przeczytaj więcej na ten temat tutaj

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

Object.keys(p).map((key)=> console.log(key + "->" + p[key]))

Wydajność

Dzisiaj 2020.03.06 Przeprowadzam testy wybranych rozwiązań na Chrome v80.0, Safari v13.0.5 i Firefox 73.0.1 na MacOs High Sierra v10.13.6

Wnioski

• rozwiązania oparte na for-in(A, B) są szybkie (lub najszybsze) dla wszystkich przeglądarek dla dużych i małych obiektów
• zaskakująco for-of(H) rozwiązanie szybko nakłada chrom na małe i duże obiekty
• rozwiązania oparte na wyraźnym indeksie i (J, K) są dość szybkie we wszystkich przeglądarkach dla małych obiektów (dla Firefox również szybkie dla dużych ojbects, ale średnio szybkie w innych przeglądarkach)
• rozwiązania oparte na iteratorach (D, E) są najwolniejsze i nie są zalecane
• rozwiązanie C jest wolne dla dużych obiektów i średnio wolne dla małych obiektów

Detale

Przeprowadzono testy wydajności dla

• mały obiekt - z 3 polami - możesz wykonać test na swoim komputerze TUTAJ
• „duży” obiekt - z 1000 polami - możesz wykonać test na swojej maszynie TUTAJ

Poniżej fragmenty przedstawiają zastosowane rozwiązania

function A(obj,s='') {
	for (let key in obj) if (obj.hasOwnProperty(key)) s+=key+'->'+obj[key] + ' ';
  return s;
}

function B(obj,s='') {
	for (let key in obj) s+=key+'->'+obj[key] + ' ';
  return s;
}

function C(obj,s='') {
  const map = new Map(Object.entries(obj));
	for (let [key,value] of map) s+=key+'->'+value + ' ';
  return s;
}

function D(obj,s='') {
  let o = { 
    ...obj,
    *[Symbol.iterator]() {
      for (const i of Object.keys(this)) yield [i, this[i]];    
    }
  }
  for (let [key,value] of o) s+=key+'->'+value + ' ';
  return s;
}

function E(obj,s='') {
  let o = { 
    ...obj,
    *[Symbol.iterator]() {yield *Object.keys(this)}
  }
  for (let key of o) s+=key+'->'+o[key] + ' ';
  return s;
}

function F(obj,s='') {
	for (let key of Object.keys(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function G(obj,s='') {
	for (let [key, value] of Object.entries(obj)) s+=key+'->'+value+' ';
  return s;
}

function H(obj,s='') {
	for (let key of Object.getOwnPropertyNames(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function I(obj,s='') {
	for (const key of Reflect.ownKeys(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function J(obj,s='') {
  let keys = Object.keys(obj);
	for(let i = 0; i < keys.length; i++){
    let key = keys[i];
    s+=key+'->'+obj[key]+' ';
  }
  return s;
}

function K(obj,s='') {
  var keys = Object.keys(obj), len = keys.length, i = 0;
  while (i < len) {
    let key = keys[i];
    s+=key+'->'+obj[key]+' ';
    i += 1;
  }
  return s;
}

function L(obj,s='') {
  Object.keys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
  return s;
}

function M(obj,s='') {
  Object.entries(obj).forEach(([key, value]) => s+=key+'->'+value+' ');
  return s;
}

function N(obj,s='') {
  Object.getOwnPropertyNames(obj).forEach(key => s+=key+'->'+obj[key]+' ');
  return s;
}

function O(obj,s='') {
  Reflect.ownKeys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
  return s;
}



// TEST

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
let log = (name,f) => console.log(`${name} ${f(p)}`)

log('A',A);
log('B',B);
log('C',C);
log('D',D);
log('E',E);
log('F',F);
log('G',G);
log('H',H);
log('I',I);
log('J',J);
log('K',K);
log('L',L);
log('M',M);
log('N',N);
log('O',O);

This snippet only presents choosen solutions

A oto wyniki dla małych obiektów na chromie

Możesz dodać prostą funkcję forEach do wszystkich obiektów, dzięki czemu możesz automatycznie zapętlać dowolny obiekt:

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
});

Dla tych, którzy nie lubią metody „ za ... za ”:

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
});

Teraz możesz po prostu zadzwonić:

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

Jeśli nie chcesz wywoływać konfliktów z innymi metodami forEach, możesz nazwać je swoją unikalną nazwą.

Pętle mogą być bardzo interesujące przy użyciu czystego JavaScript. Wygląda na to, że tylko ECMA6 (nowa specyfikacja JavaScript 2015) ma kontrolę nad pętlami. Niestety, kiedy to piszę, zarówno przeglądarki, jak i popularne zintegrowane środowisko programistyczne (IDE) wciąż mają trudności z obsługą całkowicie nowych dzwonków i gwizdków.

Oto, jak wygląda pętla obiektów JavaScript przed 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;
  }
}

Wiem też, że to pytanie jest poza zakresem tego pytania, ale w 2011 r. ECMAScript 5.1 dodał forEachmetodę tylko dla tablic, która w zasadzie stworzyła nowy, ulepszony sposób zapętlania tablic, pozostawiając nie iterowalne obiekty ze starą pełną i mylącą forpętlą. Dziwne jest jednak to, że ta nowa forEachmetoda nie obsługuje, breakco doprowadziło do różnego rodzaju innych problemów.

Zasadniczo w 2011 roku nie ma naprawdę solidnego sposobu zapętlenia w JavaScript poza tym, co wiele popularnych bibliotek (jQuery, Underscore itp.) Postanowiło ponownie wdrożyć.

Począwszy od 2015 roku, mamy teraz lepszy gotowy do zapętlenia sposób na zapętlenie (i rozbicie) dowolnego typu obiektu (w tym tablic i ciągów). Oto, jak ostatecznie będzie wyglądać pętla w JavaScript, kiedy rekomendacja stanie się głównym nurtem:

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

Pamiętaj, że większość przeglądarek nie będzie obsługiwać powyższego kodu od 18 czerwca 2016 r. Nawet w Chrome musisz włączyć tę specjalną flagę, aby działała: chrome://flags/#enable-javascript-harmony

Dopóki nie stanie się to nowym standardem, stara metoda może być nadal używana, ale istnieją również alternatywy w popularnych bibliotekach, a nawet lekkie alternatywy dla tych, którzy nie korzystają z żadnej z tych bibliotek.

W ES6 mamy dobrze znane symbole do ujawnienia niektórych wcześniej wewnętrznych metod, możesz go użyć do zdefiniowania działania iteratorów dla tego obiektu:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3",
    *[Symbol.iterator]() {
        yield *Object.keys(this);
    }
};

[...p] //["p1", "p2", "p3"]

da to taki sam wynik jak użycie for ... w pętli es6.

for(var key in p) {
    console.log(key);
}

Ale ważne jest, aby znać możliwości, które masz teraz za pomocą es6!

Zrobiłbym to raczej niż sprawdzanie obj.hasOwnerPropertyw każdej for ... inpętli.

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");
}

Korzystanie z for-ofONObject.keys()

Lubić:

let object = {
   "key1": "value1"
   "key2": "value2"
   "key3": "value3"
};

for (var key of Object.keys(p)) {
   console.log(key + " : " + object[key])
}

Jeśli chcesz również wykonać iterację właściwości niepoliczalnych , możesz użyć, Object.getOwnPropertyNames(obj)aby zwrócić tablicę wszystkich właściwości (policzalnych lub nie) znalezionych bezpośrednio na danym obiekcie.

var obj = Object.create({}, {
  // non-enumerable property
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});

obj.foo = 1; // enumerable property

Object.getOwnPropertyNames(obj).forEach(function (name) {
  document.write(name + ': ' + obj[name] + '<br/>');
});

Jeśli ktoś potrzebuje pętli przez obiekty obiektowe z warunkiem :

var arrayObjects = [{"building":"A", "status":"good"},{"building":"B","status":"horrible"}];

for (var i=0; i< arrayObjects.length; i++) {
  console.log(arrayObjects[i]);
  
  for(key in arrayObjects[i]) {      
    
      if (key == "status" && arrayObjects[i][key] == "good") {
        
          console.log(key + "->" + arrayObjects[i][key]);
      }else{
          console.log("nothing found");
      }
   }
}

Biorąc pod uwagę ES6, chciałbym dodać własną łyżkę cukru i podać jeszcze jedno podejście do iteracji właściwości obiektu.

Ponieważ zwykły obiekt JS nie daje się iterować po wyjęciu z pudełka, nie możemy używać for..ofpętli do iteracji nad jego zawartością. Ale nikt nie może nas powstrzymać, aby umożliwić iterację .

Mamy bookobiekt.

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 };
}

Odkąd go stworzyliśmy, możemy go używać w następujący sposób:

for(let pValue of book){
  console.log(pValue);
}
------------------------
Amazing book
Me
3

Lub jeśli znasz moc generatorów ES6 , więc z pewnością możesz skrócić kod powyżej.

book[Symbol.iterator] = function *(){

  let properties = Object.keys(this);
  for (let p of properties){
    yield this[p];
  }

}

Jasne, możesz zastosować takie zachowanie do wszystkich obiektów, umożliwiając Objectiterację na prototypepoziomie.

Object.prototype[Symbol.iterator] = function() {...}

Ponadto obiekty zgodne z iterowalnym protokołem mogą być używane z nowym operatorem rozprzestrzeniania funkcji ES2015 , dzięki czemu możemy odczytać wartości właściwości obiektu jako tablicę.

let pValues = [...book];
console.log(pValues);
-------------------------
["Amazing book", "Me", 3]

Można też użyć destructuring zadanie:

let [title, , pages] = book; // notice that we can just skip unnecessary values
console.log(title);
console.log(pages);
------------------
Amazing book
3

Możesz sprawdzić JSFiddle z całym kodem, który podałem powyżej.

od ES06 możesz pobrać wartości obiektu jako tablicę

let arrValues = Object.values( yourObject) ;

zwraca tablicę wartości obiektów i nie wyodrębnia wartości z Prototypu !!

MDN DOCS Object.values ​​()

i dla kluczy (już tutaj przede mną odebrano)

let arrKeys   = Object.keys(yourObject);

W najnowszym skrypcie ES możesz zrobić coś takiego:

let p = {foo: "bar"};
for (let [key, value] of Object.entries(p)) {
  console.log(key, value);
}