Pertanyaan Bagaimana cara mengulang atau menyebutkan objek JavaScript?


Saya memiliki objek JavaScript seperti berikut:

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

Sekarang saya ingin mengulang semua p elemen (p1,p2,p3...) dan dapatkan kunci dan nilai mereka. Bagaimana saya bisa melakukannya?

Saya dapat memodifikasi objek JavaScript jika perlu. Tujuan utama saya adalah mengulang melalui beberapa pasangan nilai kunci dan jika mungkin saya ingin menghindari penggunaan eval.


2129
2018-03-26 06:01


asal


Jawaban:


Anda dapat menggunakan for-in lingkaran seperti yang ditunjukkan oleh orang lain. Namun, Anda juga harus memastikan bahwa kunci yang Anda dapatkan adalah properti sebenarnya dari suatu objek, dan tidak berasal dari prototipe.

Ini cuplikannya:

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

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


3460
2018-03-26 06:12



Di bawah ECMAScript 5, Anda dapat menggabungkan Object.keys() dan Array.prototype.forEach():

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

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

ES6 menambahkan for...of:

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

ES2017 menambahkan Object.entries() yang menghindari keharusan mencari setiap nilai dalam objek aslinya:

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

Kedua Object.keys() dan Object.entries() mengiterasi properti dalam urutan yang sama dengan for...in lingkaran tetapi abaikan rantai prototipe. Hanya objek enumerable milik objek yang diulang.

Edit: ES2016 → ES6


621
2018-04-20 21:59



Anda harus menggunakan for-in loop

Tetapi berhati-hatilah ketika menggunakan loop semacam ini, karena ini akan terjadi loop semua properti di sepanjang rantai prototipe.

Oleh karena itu, ketika menggunakan loop for-in, selalu manfaatkan hasOwnProperty metode untuk menentukan apakah properti saat ini dalam iterasi adalah benar-benar milik objek yang Anda periksa:

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
}

300
2018-03-26 06:12



Pertanyaannya tidak akan lengkap jika kita tidak menyebutkan tentang metode alternatif untuk mengulang objek.

Saat ini banyak perpustakaan JavaScript terkenal menyediakan metode mereka sendiri untuk iterasi koleksi, yaitu lebih array, objek, dan objek seperti larik. Metode ini nyaman digunakan dan sepenuhnya kompatibel dengan browser apa pun.

  1. Jika Anda bekerja dengan jQuery, Anda dapat menggunakan jQuery.each() metode. Ini dapat digunakan untuk melakukan iterasi mulus pada kedua objek dan array:

    $.each(obj, function(key, value) {
        console.log(key, value);
    });
    
  2. Di Underscore.js Anda dapat menemukan metode _.each(), yang mengulang daftar elemen, menghasilkan masing-masing secara bergiliran ke fungsi yang disediakan (perhatikan urutan argumen di iteratee fungsi!):

    _.each(obj, function(value, key) {
        console.log(key, value);
    });
    
  3. Lo-Dash menyediakan beberapa metode untuk iterasi atas properti objek. Dasar _.forEach() (atau itu alias _.each()) berguna untuk mengulang melalui kedua objek dan array, namun (!) objek dengan length properti diperlakukan seperti array, dan untuk menghindari perilaku ini disarankan untuk digunakan _.forIn() dan _.forOwn() metode (ini juga ada value argumen datang pertama):

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

    _.forIn() iterates berulang dimiliki dan diwarisi sifat yang dapat dihitung dari suatu objek, sementara _.forOwn() iterasi hanya berakhir sendiri properti dari suatu objek (pada dasarnya memeriksa terhadap hasOwnProperty fungsi). Untuk objek sederhana dan literal objek, salah satu metode ini akan berfungsi dengan baik.

Umumnya semua metode yang dijelaskan memiliki perilaku yang sama dengan objek yang disediakan. Selain menggunakan native for..in lingkaran biasanya lebih cepat daripada abstraksi apa pun, seperti jQuery.each(), metode ini jauh lebih mudah digunakan, membutuhkan lebih sedikit coding dan memberikan penanganan kesalahan yang lebih baik.


230
2018-01-20 17:58



Dalam ECMAScript 5 Anda memiliki pendekatan baru dalam bidang iterasi literal - Object.keys

Informasi lebih lanjut dapat Anda lihat MDN

Pilihan saya di bawah ini sebagai solusi yang lebih cepat dalam versi browser saat ini (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;
}

Anda dapat membandingkan kinerja pendekatan ini dengan penerapan yang berbeda jsperf.com:

Dukungan browser yang dapat Anda lihat Meja compat Kangax

Untuk browser lama yang Anda miliki sederhana dan penuh polyfill

UPD:

perbandingan kinerja untuk semua kasus paling populer dalam pertanyaan ini perfjs.info:

iterasi literer objek


47
2017-11-16 19:59



Anda hanya dapat mengulanginya seperti:

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

Perhatikan itu key tidak akan mengambil nilai properti, itu hanya nilai indeks.


30
2018-03-26 06:05



Sejak es2015 semakin populer saya posting jawaban ini yang termasuk penggunaan generator dan iterator untuk lancar mengulang melalui [key, value] pasangan. Seperti yang mungkin dalam bahasa lain misalnya Ruby.

Ok di sini adalah kode:

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

Semua informasi tentang bagaimana Anda dapat melakukan iterator dan generator dapat Anda temukan di halaman Mozilla pengembang.

Harapan itu membantu seseorang.

EDIT:

ES2017 akan termasuk Object.entries yang akan melakukan iterasi [key, value] pasang dalam objek lebih mudah. Sekarang diketahui bahwa itu akan menjadi bagian dari standar sesuai dengan ts39 informasi panggung.

Saya pikir sudah waktunya untuk memperbarui jawaban saya untuk membiarkannya menjadi lebih segar daripada sekarang.

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

Anda dapat menemukan lebih banyak tentang penggunaan MDN halaman


24
2017-08-27 09:06



melalui prototipe dengan untuk setiap() yang harus melewati rantai prototipe properti:

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

17
2017-12-09 05:05



Setelah melihat semua jawaban di sini, hasOwnProperty tidak diperlukan untuk penggunaan saya sendiri karena objek json saya bersih; tidak ada gunanya menambahkan pemrosesan javascript tambahan. Hanya ini yang saya gunakan:

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

14
2017-08-18 20:50