Jeśli istnieje obiekt JavaScript:
var objects={...};
Załóżmy, że ma ponad 50 właściwości bez znajomości nazw właściwości (to znaczy bez znajomości „kluczy”), jak uzyskać każdą wartość właściwości w pętli?
javascript
javascript-objects
Mellon
źródło
źródło
Odpowiedzi:
Korzystając z prostej
for..in
pętli:źródło
enumerable
flaga ma wartość false. Oznacza to między innymi, że nie będziesz iterować po metodach klas, ale będziesz iterował po metodach stworzonych w inny sposób.W zależności od obsługiwanych przeglądarek można to zrobić na wiele sposobów. Przytłaczająca większość przeglądarek w środowisku naturalnym obsługuje ECMAScript 5 (ES5), ale należy pamiętać, że korzysta z wielu poniższych przykładów
Object.keys
, które nie są dostępne w IE <9. Zobacz tabelę zgodności .ECMAScript 3+
Jeśli musisz obsługiwać starsze wersje IE, jest to opcja dla Ciebie:
Zagnieżdżone
if
zapewnia, że nie wyliczysz właściwości w łańcuchu prototypów obiektu (takiego zachowania, którego prawie na pewno chcesz). Musisz użyćzamiast
ponieważ ECMAScript 5+ pozwala tworzyć obiekty bez prototypów
Object.create(null)
, a te obiekty nie będą miały tejhasOwnProperty
metody. Niegrzeczny kod może również wytwarzać obiekty, które zastępująhasOwnProperty
metodę.ECMAScript 5+
Z tych metod można korzystać w dowolnej przeglądarce obsługującej ECMAScript 5 i nowsze wersje. Otrzymują one wartości z obiektu i unikają wyliczania w łańcuchu prototypów. Gdzie
obj
jest twój obiekt:Jeśli chcesz czegoś bardziej zwartego lub chcesz być ostrożnym z funkcjami w pętlach,
Array.prototype.forEach
to twój przyjaciel:Następna metoda buduje tablicę zawierającą wartości obiektu. Jest to wygodne do zapętlania.
Jeśli chcesz, aby osoby używające były
Object.keys
bezpiecznenull
(tak jakfor-in
jest), możesz to zrobićObject.keys(obj || {})...
.Object.keys
zwraca właściwości wyliczalne . Zazwyczaj wystarcza to do iteracji prostych obiektów. Jeśli masz coś z niewymiennymi właściwościami, z którymi musisz pracować, możesz użyćObject.getOwnPropertyNames
zamiastObject.keys
.ECMAScript 2015+ (AKA ES6)
ECMAScript 2015 ułatwia iterację tablic. Możesz to wykorzystać na swoją korzyść, pracując z wartościami jeden po drugim w pętli:
Korzystając z funkcji strzałek tłuszczu w ECMAScript 2015, mapowanie obiektu na tablicę wartości staje się jednowierszowe:
ECMAScript 2015 wprowadza
Symbol
, których instancje mogą być używane jako nazwy właściwości. Aby uzyskać symbole obiektu do wyliczenia, użyjObject.getOwnPropertySymbols
(ta funkcja powoduje, żeSymbol
nie można jej używać do tworzenia właściwości prywatnych). NowyReflect
interfejs API od ECMAScript 2015 zapewniaReflect.ownKeys
, która zwraca listę nazw właściwości (w tym również tych, których nie można wyliczyć) i symboli.Wyrażenia tablicowe (nie próbuj używać)
Wyjaśnienia tablic zostały usunięte z ECMAScript 6 przed publikacją. Przed ich usunięciem rozwiązanie wyglądałoby następująco:
ECMAScript 2017+
ECMAScript 2016 dodaje funkcje, które nie wpływają na ten temat. Dodano specyfikację ECMAScript 2017
Object.values
iObject.entries
. Obie zwracają tablice (co będzie zaskakujące dla niektórych, biorąc pod uwagę analogię zArray.entries
).Object.values
może być używany tak jak jest lub zfor-of
pętlą.Jeśli chcesz użyć zarówno klucza, jak i wartości, to
Object.entries
jest dla Ciebie. Tworzy tablicę wypełnioną[key, value]
parami. Możesz użyć tego w obecnej postaci lub (zwróć również uwagę na przypisanie do restrukturyzacji ECMAScript 2015) wfor-of
pętli:Object.values
PodkładkaWreszcie, jak zauważono w komentarzach i teh_senaus w innej odpowiedzi, warto użyć jednego z nich jako podkładki. Nie martw się, poniższe nie zmieniają prototypu, po prostu dodaje metodę
Object
(co jest znacznie mniej niebezpieczne). Za pomocą funkcji strzałek grubych można to zrobić również w jednym wierszu:którego możesz teraz używać
Jeśli chcesz uniknąć przyciemniania, gdy
Object.values
istnieje natywny , możesz:Wreszcie...
Pamiętaj o przeglądarkach / wersjach, które musisz obsługiwać. Powyższe informacje są poprawne tam, gdzie metody lub funkcje językowe są zaimplementowane. Na przykład obsługa ECMAScript 2015 była do niedawna domyślnie wyłączona w wersji V8, która zasilała przeglądarki takie jak Chrome. Należy unikać funkcji z ECMAScript 2015, dopóki przeglądarki, które mają obsługiwać, nie implementują potrzebnych funkcji. Jeśli użyjesz Babel do skompilowania kodu do ECMAScript 5, masz dostęp do wszystkich funkcji tej odpowiedzi.
źródło
obj
dwa razy wspomnieć . Wydaje mi się, że utworzenie funkcji pomocnika jest nieuniknione? Coś jak wartości (obj).Object.values = obj => Object.keys(obj).map(key => obj[key]);
Oto funkcja wielokrotnego użytku do wprowadzania wartości do tablicy. Uwzględnia również prototypy.
źródło
Object
nie stanowi większego problemu (Object.keys
jest częstym oszustwem), prawdopodobnie myślisz o modyfikacji prototypu Object.hasOwnProperty()
? Jak iteracja klucza w pętli tego obiektu nie ma właściwości?Jeśli masz dostęp do Underscore.js, możesz użyć następującej
_.values
funkcji:źródło
Jeśli naprawdę chcesz tablicy Wartości, uważam, że jest to czystsze niż budowanie tablicy za pomocą pętli for ... in.
ECMA 5.1+
Warto zauważyć, że w większości przypadków tak naprawdę nie potrzebujesz tablicy wartości, szybciej to zrobisz:
Powtarza się to nad kluczami obiektu o. W każdej iteracji k jest ustawione na klucz o.
źródło
ES5
Object.keys
źródło
Możesz przeglądać klucze:
wyświetli:
źródło
Dla tych, którzy wcześnie dostosowują ludzi w erze CofeeScript, oto kolejny jej odpowiednik.
Co może być lepsze niż to, ponieważ
objects
można zmniejszyć, aby pisać ponownie i zmniejszyć czytelność.źródło
użyj polifillu, takiego jak:
następnie użyj
3) zysk!
źródło
ECMA2017 i następne:
Object.values(obj)
pobierze wszystkie wartości właściwości w postaci tablicy.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
źródło
Najwyraźniej - jak niedawno się dowiedziałem - jest to najszybszy sposób na zrobienie tego:
źródło
Pytanie nie określa, czy chce się dziedziczyć i właściwości, których nie można wyliczyć.
Jest pytanie o uzyskanie wszystkiego, odziedziczone właściwości i właściwości niepoliczalne , których Google nie może łatwo znaleźć.
Moim rozwiązaniem jest:
A następnie iteruj nad nimi, po prostu użyj pętli for-of:
Pokaż fragment kodu
źródło
Użyj:
Object.values()
przekazujemy obiekt jako argument i otrzymujemy tablicę wartości jako wartość zwracaną.Zwraca tablicę wartości danego obiektu, które można wyliczyć. Otrzymasz te same wartości, co przy użyciu
for in
pętli, ale bez właściwości Prototypu. Ten przykład prawdopodobnie wyjaśni wszystko:źródło
źródło
Oto funkcja podobna do PHP array_values ()
Oto jak uzyskać wartości obiektu, jeśli używasz ES6 lub wyższej:
źródło
Kompatybilny z ES7, nawet niektóre przeglądarki jeszcze go nie obsługują
Ponieważ
Object.values(<object>)
zostanie wbudowany w ES7 iDo czasu oczekiwania na wsparcie wszystkich przeglądarek możesz umieścić go w funkcji:
Następnie :
Gdy przeglądarki staną się kompatybilne z ES7, nie będziesz musiał nic zmieniać w kodzie.
źródło
Zdaję sobie sprawę, że jestem trochę późno, ale tutaj jest to podkładka dla nowego firefox 47
Object.values
metodzieźródło
Object.entries robią to w lepszy sposób.
źródło
const myObj = { a:1, b:2, c:3 }
Uzyskaj wszystkie wartości:
najkrótsza droga:
const myValues = Object.values(myObj)
const myValues = Object.keys(myObj).map(key => myObj[key])
źródło
źródło
w użyciu ECMAScript5
W przeciwnym razie, jeśli Twoja przeglądarka go nie obsługuje, użyj dobrze znanego
for..in loop
źródło
object[key]
do uzyskania wartości w pętli.for..in
(i hasOwnProperty), więc tak naprawdę nic nie zyskuje. Chciałbym, żeby ECMAScript 5 zdefiniowałObject.pairs
(iObject.items
dla[[key, value], ..]
), ale niestety, nie ma.Teraz używam Dojo Toolkit, ponieważ starsze przeglądarki nie obsługują
Object.values
.Wynik :
źródło
posługiwać się
a jeśli używasz Google Chrome, otwórz konsolę, używając Ctrl + Shift + j
Idź do >> Konsoli
źródło