Cara mengulang melalui array yang berisi objek dan mengakses propertinya


188

Saya ingin menelusuri objek-objek yang terdapat dalam array dan mengubah properti masing-masing. Jika saya melakukan ini:

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j]);

}

Konsol harus memunculkan setiap objek dalam array, bukan? Namun sebenarnya itu hanya menampilkan objek pertama. jika saya menghibur log array di luar loop, semua objek muncul sehingga pasti ada lebih banyak di sana.

Bagaimanapun, inilah masalah selanjutnya. Bagaimana cara mengakses, misalnya Object1.x dalam array, menggunakan loop?

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j.x]);

}

Ini mengembalikan "tidak terdefinisi." Sekali lagi log konsol di luar loop memberitahu saya bahwa semua objek memiliki nilai untuk "x". Bagaimana cara mengakses properti ini di loop?

Saya direkomendasikan di tempat lain untuk menggunakan array terpisah untuk masing-masing properti, tetapi saya ingin memastikan saya telah menghabiskan jalan ini terlebih dahulu.

Terima kasih!


2
Bisakah Anda memposting sampel array Anda? Cuplikan kode pertama tampaknya benar.
Sirko

jadalah angka. Anda mendefinisikannya di bagian atas loop Anda.

2
Mungkin myArraysebenarnya bukan hanya array ??
techfoobar

kita perlu info lebih lanjut tentang bagaimana myArray dibangun
bgusach

Dengan semua jawaban berikut dan menerima jawaban yang diterima, tidak ada yang menjelaskan mengapa masalah terjadi dan bagaimana mengatasinya dengan for loop. #forEachbekerja. Tetapi pertanyaannya adalah untuk loop.
FreeLightman

Jawaban:


341

Gunakan forEach dengan fungsi array bawaan. Array.forEach():

yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});

2
dengan senang hati membantu .. Javascript menjadi sangat keren .. ditambah forEach jauh lebih baik dan lebih mudah untuk membaca loop kompleks ..
Dory Zidon

3
Saya khawatir itu forEachtidak didukung di IE 9. Jangan salahkan saya! Produk majikan saya memberikan dukungan untuk itu!
fatCop

1
@DoryZidon: forEach tidak mendukung istirahat atau berhenti - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Ankur Loriya

2
Perhatikan bahwa Anda harus memiliki array. Jika Anda dapatkan yourArraydari sesuatu seperti document.getElementsByClassNameitu akan menjadi HTMLCollection, bukan array. Maka pertanyaan ini bisa membantu.
J0ANMM

Catatan: forEachmemblokir dan tidak mendukung await.Lok for...ofakan.
Petani kentang

107

Beberapa kasus menggunakan perulangan melalui array dengan cara pemrograman fungsional dalam JavaScript:

1. Hanya loop melalui array

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

Catatan: Array.prototype.forEach () bukan cara fungsional secara tegas, karena fungsi yang diperlukan karena parameter input tidak seharusnya mengembalikan nilai, yang dengan demikian tidak dapat dianggap sebagai fungsi murni.

2. Periksa apakah ada elemen dalam array yang lulus tes

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. Transformasikan ke array baru

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

Catatan: Metode map () membuat array baru dengan hasil memanggil fungsi yang disediakan pada setiap elemen dalam array panggilan.

4. Jumlahkan properti tertentu, dan hitung rata-rata

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. Buat array baru berdasarkan yang asli tetapi tanpa mengubahnya

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. Hitung jumlah setiap kategori

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. Ambil subset array berdasarkan kriteria tertentu

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

Catatan: Metode filter () membuat array baru dengan semua elemen yang lulus tes diimplementasikan oleh fungsi yang disediakan.

8. Urutkan sebuah array

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

masukkan deskripsi gambar di sini

9. Temukan elemen dalam array

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

masukkan deskripsi gambar di sini

Metode Array.prototype.find () mengembalikan nilai elemen pertama dalam array yang memenuhi fungsi pengujian yang disediakan.

Referensi


1
Ini adalah referensi yang fantastis - apakah ini asli untuk pertanyaan ini atau apakah Anda memiliki sesuatu seperti ini yang dihosting di tempat lain?
Salvatore

Jawabannya sangat jelas dan teliti, terima kasih telah berkontribusi.
Erica Summers

hai, jika saya ingin menunjukkan semua nama dan kemudian melakukan perbandingan, apakah Anda tahu bagaimana melakukannya?
dipgirl

@dipgirl, apakah ini seperti di bawah ini? const people = [ {name: "john", age:23}, {name: "john", age:43}, {name: "jim", age:101}, {name: "bob", age:67} ]; const sortByAge = people.map(p => { console.log(p.name) return p }).sort(function (p1, p2) { return p1.age - p2.age; }); console.log(sortByAge);
Yuci

1
Selamat untuk pemungutan suara ke-100 :)
Syed

46

Anda dapat menggunakan for..of loop untuk mengulang array objek.

for (let item of items) {
    console.log(item); // Will display contents of the object inside the array
}

Salah satu hal terbaik tentang for..ofloop adalah mereka dapat mengulang lebih dari sekedar array. Anda dapat mengulangi semua jenis iterable, termasuk peta dan objek. Pastikan Anda menggunakan transpiler atau sesuatu seperti TypeScript jika Anda perlu mendukung browser lama.

Jika Anda ingin beralih di atas peta, sintaksisnya sebagian besar sama dengan yang di atas, kecuali ia menangani kunci dan nilainya.

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

Saya menggunakan for..ofloop untuk hampir semua jenis iterasi yang saya lakukan dalam Javascript. Selain itu, salah satu hal paling keren adalah mereka juga bekerja dengan async / menunggu juga.


29
for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

Itu hanya solusi untuk pertanyaan kedua.
Sirko

18

Inilah contoh bagaimana Anda bisa melakukannya :)

var students = [{
    name: "Mike",
    track: "track-a",
    achievements: 23,
    points: 400,
  },
  {
    name: "james",
    track: "track-a",
    achievements: 2,
    points: 21,
  },
]

students.forEach(myFunction);

function myFunction(item, index) {
  for (var key in item) {
    console.log(item[key])
  }
}


bagaimana Anda mendapatkan nilai trackproperti untuk setiap elemen dan menugaskannya ke variabel untuk digunakan atau interpolasi di bagian lain dari kode?
Chris22

7

Berkeliaran melalui berbagai objek adalah fungsi yang cukup mendasar. Inilah yang bekerja untuk saya.

var person = [];
person[0] = {
  firstName: "John",
  lastName: "Doe",
  age: 60
};

var i, item;

for (i = 0; i < person.length; i++) {
  for (item in person[i]) {
    document.write(item + ": " + person[i][item] + "<br>");
  }
}


6

myArray[j.x] secara logis salah.

Gunakan (myArray[j].x);sebagai gantinya

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

@ Cyborgx37 Oh .. Maksudku jx diperlakukan sebagai nama variabel yang salah.
Vivek Sadh

5

Ini sangat sederhana menggunakan metode forEach sejak ES5 +. Anda dapat secara langsung mengubah setiap properti dari setiap objek dalam array Anda.

myArray.forEach(function (arrayElem){ 
  arrayElem = newPropertyValue;
});

Jika Anda ingin mengakses properti tertentu pada setiap objek:

myArray.forEach(function (arrayElem){ 
      arrayElem.nameOfYourProperty = newPropertyValue;
    });

4

Berikut cara lain untuk mengulangi melalui berbagai objek (Anda perlu memasukkan pustaka jQuery ke dokumen Anda untuk ini).

$.each(array, function(element) {
  // do some operations with each element... 
});

1
Jawaban Anda tidak memiliki informasi penting tentang perlunya memuat pustaka jQuery untuk menggunakan $.eachmetode.
Matthew Morek

4

Ini akan berhasil. Looping array yang menyeluruh (yourArray). Kemudian loop melalui properti langsung dari setiap objek (eachObj).

yourArray.forEach( function (eachObj){
    for (var key in eachObj) {
        if (eachObj.hasOwnProperty(key)){
           console.log(key,eachObj[key]);
        }
    }
});

2

Array objek iterasi, menggunakan jQuery, (gunakan parameter kedua untuk mencetak string).

$.each(array, function(index, item) {
       console.log(index, item);
});

2

var c = {
    myProperty: [
        { name: 'this' },
        { name: 'can' },
        { name: 'get' },
        { name: 'crazy' }
    ]
};

c.myProperty.forEach(function(myProperty_element) {
    var x = myProperty_element.name;
    console.log('the name of the member is : ' + x);
})

Ini adalah salah satu cara bagaimana saya bisa mencapainya.


1

Jawaban yang diterima menggunakan fungsi normal. Jadi memposting kode yang sama dengan sedikit modifikasi menggunakan fungsi panah di forEach

  yourArray.forEach(arrayItem => {
      var x = arrayItem.prop1 + 2;
      console.log(x);
  });

Juga dalam $. Setiap Anda dapat menggunakan fungsi panah seperti di bawah ini

 $.each(array, (item, index) => {
       console.log(index, item);
 });

1

const jobs = [
    {
        name: "sipher",
        family: "sipherplus",
        job: "Devops"
    },
    {
        name: "john",
        family: "Doe",
        job: "Devops"
    },
    {
        name: "jim",
        family: "smith",
        job: "Devops"
    }
];

const txt = 
   ` <ul>
        ${jobs.map(job => `<li>${job.name} ${job.family} -> ${job.job}</li>`).join('')}
    </ul>`
;

document.body.innerHTML = txt;

Hati-hati dengan Kicks belakang (`)


0

Ini mungkin membantu seseorang. Mungkin itu bug di Node.

var arr = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];
var c = 0;

Ini tidak berfungsi:

while (arr[c].name) { c++; } // TypeError: Cannot read property 'name' of undefined

Tapi ini berhasil ...

while (arr[c]) { c++; } // Inside the loop arr[c].name works as expected.

Ini juga berfungsi ...

while ((arr[c]) && (arr[c].name)) { c++; }

TAPI hanya membalik urutan tidak berfungsi. Saya menduga ada semacam optimasi internal di sini yang merusak Node.

while ((arr[c].name) && (arr[c])) { c++; }

Kesalahan mengatakan array tidak terdefinisi, tetapi tidak: - / Node v11.15.0

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.