Jika ada objek Javascript:
var objects={...};
Misalkan, ia memiliki lebih dari 50 properti, tanpa mengetahui nama properti (itu tanpa mengetahui 'kunci') bagaimana cara mendapatkan setiap nilai properti dalam satu lingkaran?
Jika ada objek Javascript:
var objects={...};
Misalkan, ia memiliki lebih dari 50 properti, tanpa mengetahui nama properti (itu tanpa mengetahui 'kunci') bagaimana cara mendapatkan setiap nilai properti dalam satu lingkaran?
Jawaban:
Dengan menggunakan for..in
loop sederhana :
for(var key in objects) {
var value = objects[key];
}
enumerable
flagnya disetel ke false. Ini - antara lain - berarti Anda tidak akan mengulangi metode kelas apa pun, tetapi Anda akan beralih menggunakan metode yang dibuat dengan cara lain.
Bergantung pada browser mana yang harus Anda dukung, ini dapat dilakukan dengan beberapa cara. Mayoritas browser yang ada di wild mendukung ECMAScript 5 (ES5), tetapi perlu diingatkan bahwa banyak contoh di bawah ini digunakan Object.keys
, yang tidak tersedia di IE <9. Lihat tabel kompatibilitas .
Jika Anda harus mendukung versi IE yang lebih lama, maka ini adalah opsi untuk Anda:
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
var val = obj[key];
// use val
}
}
Bersarang if
memastikan bahwa Anda tidak menyebutkan properti dalam rantai prototipe objek (yang merupakan perilaku yang hampir pasti Anda inginkan). Anda harus menggunakan
Object.prototype.hasOwnProperty.call(obj, key) // ok
daripada
obj.hasOwnProperty(key) // bad
karena ECMAScript 5+ memungkinkan Anda membuat objek tanpa prototipe Object.create(null)
, dan objek ini tidak akan memiliki hasOwnProperty
metode. Kode nakal juga dapat menghasilkan objek yang menimpa hasOwnProperty
metode ini.
Anda dapat menggunakan metode ini di browser apa pun yang mendukung ECMAScript 5 dan di atasnya. Ini mendapatkan nilai dari suatu objek dan menghindari penghitungan di atas rantai prototipe. Di mana obj
objek Anda:
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
var val = obj[keys[i]];
// use val
}
Jika Anda menginginkan sesuatu yang sedikit lebih kompak atau Anda ingin berhati-hati dengan fungsi dalam loop, maka Array.prototype.forEach
adalah teman Anda:
Object.keys(obj).forEach(function (key) {
var val = obj[key];
// use val
});
Metode selanjutnya membangun array yang berisi nilai-nilai objek. Ini nyaman untuk diulang.
var vals = Object.keys(obj).map(function (key) {
return obj[key];
});
// use vals array
Jika Anda ingin membuat mereka yang menggunakan Object.keys
aman terhadap null
(sebagaimana for-in
adanya), maka Anda dapat melakukannyaObject.keys(obj || {})...
.
Object.keys
mengembalikan properti enumerable . Untuk beralih pada objek sederhana, ini biasanya cukup. Jika Anda memiliki sesuatu dengan properti non-enumerable yang perlu Anda kerjakan, Anda dapat menggunakanObject.getOwnPropertyNames
sebagai gantinya Object.keys
.
Array lebih mudah untuk diulang dengan ECMAScript 2015. Anda dapat menggunakan ini untuk keuntungan Anda saat bekerja dengan nilai satu-per-satu dalam satu lingkaran:
for (const key of Object.keys(obj)) {
const val = obj[key];
// use val
}
Menggunakan fungsi panah gemuk ECMAScript 2015, memetakan objek ke array nilai menjadi satu-liner:
const vals = Object.keys(obj).map(key => obj[key]);
// use vals array
ECMAScript 2015 memperkenalkan Symbol
, contoh yang dapat digunakan sebagai nama properti. Untuk mendapatkan simbol dari objek yang akan disebutkan, gunakan Object.getOwnPropertySymbols
(fungsi ini adalah mengapa Symbol
tidak dapat digunakan untuk membuat properti pribadi). Reflect
API baru dari ECMAScript 2015 menyediakanReflect.ownKeys
, yang mengembalikan daftar nama properti (termasuk yang non-enumerable) dan simbol.
Pemahaman array telah dihapus dari ECMAScript 6 sebelum publikasi. Sebelum dihapus, solusi akan terlihat seperti:
const vals = [for (key of Object.keys(obj)) obj[key]];
// use vals array
ECMAScript 2016 menambahkan fitur yang tidak memengaruhi subjek ini. Spesifikasi ECMAScript 2017 menambahkan Object.values
dan Object.entries
. Keduanya mengembalikan array (yang akan mengejutkan bagi sebagian orang mengingat analogi dengan Array.entries
). Object.values
dapat digunakan apa adanya atau dengan for-of
loop.
const values = Object.values(obj);
// use values array or:
for (const val of Object.values(obj)) {
// use val
}
Jika Anda ingin menggunakan kunci dan nilainya, itu Object.entries
untuk Anda. Ini menghasilkan array yang diisi dengan [key, value]
pasangan. Anda dapat menggunakan ini sebagaimana adanya, atau (perhatikan juga penugasan perusakan ECMAScript 2015) dalam satu for-of
lingkaran:
for (const [key, val] of Object.entries(obj)) {
// use key and val
}
Object.values
shimAkhirnya, sebagaimana dicatat dalam komentar dan oleh teh_senaus dalam jawaban lain, mungkin layak menggunakan salah satunya sebagai shim. Jangan khawatir, berikut ini tidak mengubah prototipe, itu hanya menambah metode Object
(yang jauh lebih berbahaya). Menggunakan fungsi panah gemuk, ini dapat dilakukan dalam satu baris juga:
Object.values = obj => Object.keys(obj).map(key => obj[key]);
yang sekarang dapat Anda gunakan seperti
// ['one', 'two', 'three']
var values = Object.values({ a: 'one', b: 'two', c: 'three' });
Jika Anda ingin menghindari pencukuran ketika orang asli Object.values
ada, maka Anda dapat melakukannya:
Object.values = Object.values || (obj => Object.keys(obj).map(key => obj[key]));
Waspadai peramban / versi yang perlu Anda dukung. Di atas adalah benar di mana metode atau fitur bahasa diimplementasikan. Misalnya, dukungan untuk ECMAScript 2015 dimatikan secara default di V8 hingga baru-baru ini, yang mendukung browser seperti Chrome. Fitur-fitur dari ECMAScript 2015 harus dihindari sampai browser yang Anda maksud mendukung implementasi fitur-fitur yang Anda butuhkan. Jika Anda menggunakan babel untuk mengkompilasi kode Anda ke ECMAScript 5, maka Anda memiliki akses ke semua fitur dalam jawaban ini.
obj
dua kali. Saya kira membuat fungsi pembantu tidak dapat dihindari? Sesuatu seperti nilai (obj).
Object.values = obj => Object.keys(obj).map(key => obj[key]);
Berikut adalah fungsi yang dapat digunakan kembali untuk memasukkan nilai ke dalam array. Dibutuhkan juga prototipe.
Object.values = function (obj) {
var vals = [];
for( var key in obj ) {
if ( obj.hasOwnProperty(key) ) {
vals.push(obj[key]);
}
}
return vals;
}
Object
tidak banyak masalah ( Object.keys
adalah masalah umum), Anda mungkin berpikir untuk memodifikasi prototipe Obyek.
hasOwnProperty()
? Bagaimana kuncinya diulang dalam loop dari objek yang tidak memiliki properti?
Jika Anda memiliki akses ke Underscore.js, Anda dapat menggunakan _.values
fungsi seperti ini:
_.values({one : 1, two : 2, three : 3}); // return [1, 2, 3]
Jika Anda benar-benar menginginkan array Nilai, saya menemukan ini lebih bersih daripada membangun array dengan for ... in loop.
ECMA 5.1+
function values(o) { return Object.keys(o).map(function(k){return o[k]}) }
Perlu dicatat bahwa dalam kebanyakan kasus Anda tidak benar-benar membutuhkan array nilai, akan lebih cepat untuk melakukan ini:
for(var k in o) something(o[k]);
Ini beralih pada kunci Objek o. Dalam setiap iterasi k diatur ke kunci o.
ES5 Object.keys
var a = { a: 1, b: 2, c: 3 };
Object.keys(a).map(function(key){ return a[key] });
// result: [1,2,3]
gunakan polyfill seperti:
if(!Object.values){Object.values=obj=>Object.keys(obj).map(key=>obj[key])}
lalu gunakan
Object.values(my_object)
3) keuntungan!
ECMA2017 dan selanjutnya:
Object.values(obj)
akan menjemput Anda semua nilai properti sebagai array.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
Rupanya - seperti yang baru saya pelajari - ini adalah cara tercepat untuk melakukannya:
var objs = {...};
var objKeys = Object.keys(obj);
for (var i = 0, objLen = objKeys.length; i < objLen; i++) {
// do whatever in here
var obj = objs[objKeys[i]];
}
Pertanyaannya tidak menentukan apakah ingin properti yang diwarisi dan tidak dapat dihitung juga.
Ada pertanyaan untuk mendapatkan semuanya, properti yang diwarisi dan properti yang tidak dapat dihitung juga , yang tidak dapat dengan mudah ditemukan oleh Google.
Solusi saya untuk itu adalah:
function getAllPropertyNames(obj) {
let result = new Set();
while (obj) {
Object.getOwnPropertyNames(obj).forEach(p => result.add(p));
obj = Object.getPrototypeOf(obj);
}
return [...result];
}
Dan kemudian beralih di atasnya, cukup gunakan for-of loop:
Menggunakan: Object.values()
:, kami meneruskan objek sebagai argumen dan menerima array nilai sebagai nilai balik.
Ini mengembalikan array dari objek tertentu yang memiliki nilai properti enumerable. Anda akan mendapatkan nilai yang sama dengan menggunakan for in
loop tetapi tanpa properti pada Prototipe. Contoh ini mungkin akan membuat segalanya lebih jelas:
function person (name) {
this.name = name;
}
person.prototype.age = 5;
let dude = new person('dude');
for(let prop in dude) {
console.log(dude[prop]); // for in still shows age because this is on the prototype
} // we can use hasOwnProperty but this is not very elegant
// ES6 +
console.log(Object.values(dude));
// very concise and we don't show props on prototype
Berikut fungsi yang mirip dengan array_values PHP ()
function array_values(input) {
var output = [], key = '';
for ( key in input ) { output[output.length] = input[key]; }
return output;
}
Berikut cara mendapatkan nilai objek jika Anda menggunakan ES6 atau lebih tinggi:
Array.from(values(obj));
Karena, Object.values(<object>)
akan built-in di ES7 &
Sampai menunggu semua browser untuk mendukungnya, Anda dapat membungkusnya di dalam suatu fungsi:
Object.vals=(o)=>(Object.values)?Object.values(o):Object.keys(o).map((k)=>o[k])
Kemudian :
Object.vals({lastname:'T',firstname:'A'})
// ['T','A']
Object.entries melakukannya dengan cara yang lebih baik.
var dataObject = {"a":{"title":"shop"}, "b":{"title":"home"}}
Object.entries(dataObject).map(itemArray => {
console.log("key=", itemArray[0], "value=", itemArray[1])
})
const myObj = { a:1, b:2, c:3 }
Dapatkan semua nilai:
cara terpendek:
const myValues = Object.values(myObj)
const myValues = Object.keys(myObj).map(key => myObj[key])
dalam penggunaan ECMAScript5
keys = Object.keys(object);
Kalau tidak, jika peramban Anda tidak mendukungnya, gunakan yang terkenal for..in loop
for (key in object) {
// your code here
}
object[key]
untuk mendapatkan nilai dalam satu lingkaran.
for..in
(dan hasOwnProperty) sehingga tidak benar-benar mendapatkan apa-apa .. Saya berharap ECMAScript ke-5 didefinisikan Object.pairs
(dan Object.items
untuk [[key, value], ..]
), tapi sayangnya, tidak.
Sekarang saya menggunakan Dojo Toolkit karena browser lama tidak mendukung Object.values
.
require(['dojox/lang/functional/object'], function(Object) {
var obj = { key1: '1', key2: '2', key3: '3' };
var values = Object.values(obj);
console.log(values);
});
Keluaran:
['1', '2', '3']