Tutorial JavaScript Array of Objects - Cara Membuat, Memperbarui, dan Melakukan Loop Melalui Objek Menggunakan Metode JS Array

Rata-rata saya bekerja dengan data JSON 18 kali seminggu. Dan saya masih perlu mencari cara spesifik di Google untuk memanipulasinya hampir setiap saat. Bagaimana jika ada pemandu utama yang selalu bisa memberi Anda jawabannya?

Di artikel ini, saya akan menunjukkan kepada Anda dasar-dasar bekerja dengan array objek di JavaScript.

Jika Anda pernah bekerja dengan struktur JSON, Anda telah bekerja dengan objek JavaScript. Secara harfiah. JSON adalah singkatan dari JavaScript Object Notation.

Membuat objek sesederhana ini:

{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } 

Benda ini melambangkan sebuah mobil. Ada banyak jenis dan warna mobil, masing-masing objek mewakili mobil tertentu.

Sekarang, sebagian besar waktu Anda mendapatkan data seperti ini dari layanan eksternal. Tetapi terkadang Anda perlu membuat objek dan arraynya secara manual. Seperti yang saya lakukan saat membuat e-shop ini:

Mengingat setiap item daftar kategori terlihat seperti ini di HTML:

Saya tidak ingin kode ini diulang 12 kali, yang akan membuatnya tidak dapat dipertahankan.

Membuat larik objek

Tapi mari kita kembali ke mobil. Mari kita lihat rangkaian mobil ini:

Kita dapat merepresentasikannya sebagai array dengan cara ini:

let cars = [ { "color": "purple", "type": "minivan", "registration": new Date('2017-01-03'), "capacity": 7 }, { "color": "red", "type": "station wagon", "registration": new Date('2018-03-03'), "capacity": 5 }, { ... }, ... ] 

Susunan objek tidak tetap sama sepanjang waktu. Kami hampir selalu perlu memanipulasinya. Jadi mari kita lihat bagaimana kita bisa menambahkan objek ke array yang sudah ada.

Tambahkan objek baru di awal - Array.unshift

Untuk menambahkan objek di posisi pertama, gunakan Array.unshift.

let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 

Tambahkan objek baru di akhir - Array.push

Untuk menambahkan objek di posisi terakhir, gunakan Array.push.

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.push(car); 

Tambahkan objek baru di tengah - Array.splice

Untuk menambahkan objek di tengah, gunakan Array.splice. Fungsi ini sangat berguna karena juga dapat menghapus item. Perhatikan parameternya:

Array.splice( {index where to start}, {how many items to remove}, {items to add} ); 

Jadi jika kami ingin menambahkan Volkswagen Cabrio merah di posisi kelima, kami akan menggunakan:

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.splice(4, 0, car); 

Perulangan melalui larik objek

Izinkan saya mengajukan pertanyaan di sini: Mengapa Anda ingin melakukan perulangan melalui berbagai objek? Alasan saya bertanya adalah bahwa pengulangan hampir tidak pernah menjadi penyebab utama dari apa yang ingin kita capai.

JavaScript menyediakan banyak fungsi yang dapat menyelesaikan masalah Anda tanpa benar-benar mengimplementasikan logika tersebut dalam siklus umum. Mari lihat.

Temukan objek dalam array dengan nilainya - Array.find

Katakanlah kita ingin mencari mobil yang berwarna merah. Kita bisa menggunakan fungsinya Array.find.

let car = cars.find(car => car.color === "red"); 

Fungsi ini mengembalikan elemen pertama yang cocok:

console.log(car); // output: // { //   color: 'red', //   type: 'station wagon', //   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //   capacity: 5 // } 

Ini juga memungkinkan untuk mencari beberapa nilai:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

Kalau begitu kita akan mendapatkan mobil terakhir dalam daftar.

Dapatkan beberapa item dari array yang cocok dengan kondisi - Array.filter

The Array.findmengembalikan fungsi hanya satu objek. Jika kita ingin mendapatkan semua mobil merah, kita perlu menggunakan Array.filter.

let redCars = cars.filter(car => car.color === "red"); console.log(redCars); // output: // [ // { //    color: 'red', //    type: 'station wagon', //    registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 5 //  }, // { //    color: 'red', //    type: 'cabrio', //    registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 2 //  } // ] 

Mengubah objek dari sebuah array - Array.map

Ini adalah sesuatu yang sangat kita butuhkan. Mengubah larik objek menjadi larik objek yang berbeda. Itu pekerjaan untuk Array.map. Katakanlah kita ingin mengklasifikasikan mobil kita menjadi tiga kelompok berdasarkan ukurannya.

let sizes = cars.map(car => { if (car.capacity <= 3){ return "small"; } if (car.capacity <= 5){ return "medium"; } return "large"; }); console.log(sizes); // output: // ['large','medium','medium', ..., 'small'] 

Ini juga memungkinkan untuk membuat objek baru jika kita membutuhkan lebih banyak nilai:

let carsProperties = cars.map(car => { let properties = { "capacity": car.capacity, "size": "large" };  if (car.capacity <= 5){    properties['size'] = "medium";  }  if (car.capacity <= 3){    properties['size'] = "small";  } return properties; }); console.log(carsProperties); // output: // [ //   { capacity: 7, size: 'large' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 2, size: 'small' }, // ... // ] 

Tambahkan properti ke setiap objek array - Array.forEach

But what if we want the car object too? In that case we can enhance the object for a new property size. This is a good use-case for the Array.forEach function.

cars.forEach(car => { car['size'] = "large";  if (car.capacity <= 5){    car['size'] = "medium";  }  if (car.capacity <= 3){    car['size'] = "small";  } }); 

Sort an array by a property - Array.sort

When we're done with transforming the objects, we usually need to sort them one way or another.

Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.

Let's say we want to sort the cars based on their capacity in descending order.

let sortedCars = cars.sort((c1, c2) => (c1.capacity  c2.capacity) ? -1 : 0); console.log(sortedCars); // output: // [ // { // color: 'purple', // type: 'minivan', // registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)', // capacity: 7 // }, // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // }, // ... // ] 

The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false 

You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.

Summary

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference.

Or get in touch with me and I will prepare another article :-)