Cara mengulang melalui array yang berisi objek dan mengakses propertinya

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!

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

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

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

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

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

Referensi

• Array.prototype.some ()
• Array.prototype.forEach ()
• Array.prototype.map ()
• Array.prototype.filter ()
• Array.prototype.sort ()
• Sebarkan sintaks
• Array.prototype.find ()

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.

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

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

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

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

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

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

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

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

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

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.

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

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 (`)

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