Yang dimaksud dengan manipulasi objek disini adalah mengakses data, mengubah data, menambah properti dan menghapus properti
Akses data
Ada dua cara untuk mengakses properti data di objek, menggunakan dot. notasi() atau notasi braket []
Sedangkan untuk mengakses setiap properti dari suatu objek kita dapat menggunakan for. dalam pernyataan
Copy
7for (const key in blueDino) {
8 console.log(`${key}: ${blueDino[key]}`);
Ubah data
Selain untuk mengakses data objek, notasi titik dan tanda kurung juga digunakan untuk mengubah data objek
Artikel asli. Tutorial Array Objek JavaScript – Cara Membuat, Memperbarui, dan Mengulangi Objek Menggunakan Metode JS Array oleh {{ author }}
Rata-rata saya bekerja dengan data JSON 18 kali seminggu. Dan saya masih harus menggunakan google untuk menemukan cara memanipulasinya hampir setiap saat. Bagaimana jika ada panduan yang selalu bisa memberi Anda jawabannya?
Pada artikel ini, saya akan menunjukkan kepada Anda dasar-dasar saat bekerja dengan array yang terdiri dari objek dalam JavaScript
Jika Anda pernah bekerja dengan struktur JSON, Anda sebenarnya pernah bekerja dengan objek JavaScript. JSON adalah singkatan dari Notasi Objek JavaScript
Membuat objek sesederhana ini
{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 }_Objek ini mewakili sebuah mobil. Ada banyak jenis dan warna mobil, setiap objek mewakili mobil tertentu
Sekarang, sebagian besar data yang Anda dapatkan dari layanan eksternal seperti ini. Namun terkadang Anda perlu membuat objek dan array secara manual. Seperti yang saya lakukan saat membuat e-shop ini
Ingat setiap item daftar kategori akan terlihat seperti ini di HTML
Saya tidak ingin kode ini diulang 12 kali, yang akan membuat kode tidak dapat dipertahankan
Buat array objek
Tapi mari kita kembali ke mobil. Mari kita lihat kelompok mobil ini
Kita bisa mewakilinya 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 }, { ... }, ... ]Larik objek tidak akan sama sepanjang waktu. Kami hampir selalu harus melakukan manipulasi array. Jadi mari kita lihat bagaimana kita bisa menambahkan objek ke array yang sudah ada
Menambahkan objek baru di awal - Array. lepaskan
Untuk menambahkan objek di posisi pertama, gunakan 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 }, { ... }, ... ] 4
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); _Menambahkan objek baru di akhir - Array. dorongan
Untuk menambahkan objek di posisi terakhir, gunakan 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 }, { ... }, ... ] 5
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.push(car); _Menambahkan objek baru di tengah - Array. sambatan
Untuk menambahkan objek di tengah, gunakan 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 }, { ... }, ... ] 6. Fungsi ini sangat berguna karena juga dapat menghapus item. Perhatikan parameternya
Array.splice( {index untuk mulai}, {jumlah item yang akan dihapus}, {item yang ingin ditambahkan} ); _Jadi kalau mau nambah Volkswagen Cabrio merah di posisi kelima, kita pakai
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.splice(4, 0, car);_Perulangan pada objek array
Izinkan saya bertanya kepada Anda di sini. Mengapa Anda ingin mengulangi array objek?
JavaScript menyediakan banyak fungsi yang dapat menyelesaikan masalah Anda tanpa mengimplementasikan logika di loop umum. Ayo lihat
Temukan objek dalam array berdasarkan nilainya - Array. Temukan
Misalkan kita ingin mencari mobil berwarna merah. Kita dapat menggunakan fungsi 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 }, { ... }, ... ] _7
Fungsi ini mengembalikan elemen pencocokan pertama
console.log(car); // output: // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // }Anda juga dapat mencari menggunakan beberapa nilai
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 }, { ... }, ... ] _8
Dalam hal ini kita akan mendapatkan mobil terakhir dalam daftar
Dapatkan beberapa item dari array yang sesuai dengan kondisi - Array. filter
Fungsi 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 }, { ... }, ... ] _7 hanya mengembalikan satu objek. Jika kita ingin mendapatkan semua mobil yang berwarna merah, kita perlu menggunakan let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 0
Ubah objek pada array - Array. peta
Ini adalah sesuatu yang sering kita butuhkan. Ubah larik objek menjadi larik objek yang berbeda. Itu adalah pekerjaan untuk let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); _1. Misalkan kita ingin mengklasifikasikan mobil kita menjadi tiga kelompok berdasarkan ukurannya
Dimungkinkan juga untuk membuat objek baru jika kita membutuhkan lebih banyak nilai
Menambahkan properti ke setiap objek dalam array - Array. untuk setiap
Tapi bagaimana jika kita menginginkan ukuran mobil juga? . Ini adalah kasus penggunaan yang baik untuk menggunakan fungsi let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 3
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 }, { ... }, ... ] 1Urutkan array berdasarkan properti - Array. macam
Saat kita selesai mengubah objek, biasanya kita perlu mengurutkannya dengan satu atau lain cara
Biasanya pengurutan dilakukan berdasarkan nilai properti yang dimiliki oleh masing-masing objek. Kita dapat menggunakan fungsi let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 4, tetapi kita perlu menyediakan fungsi yang akan menentukan mekanisme penyortiran
Katakanlah kita ingin mengurutkan mobil berdasarkan kapasitasnya dalam urutan menurun
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 4 membandingkan dua objek dan menempatkan objek pertama di tempat kedua jika hasil fungsi pengurutan positif. Jadi Anda bisa menganggap fungsi pengurutan seperti kueri. Haruskah objek pertama ditempatkan di tempat kedua?
Pastikan untuk selalu menambahkan null case ketika nilai yang dibandingkan dari kedua objek sama untuk menghindari konversi yang tidak perlu
Memeriksa apakah objek dalam array memenuhi kondisi - Array. setiap, Larik. termasuk
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 6 dan let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 7 berguna ketika kita hanya perlu memeriksa setiap objek untuk kondisi tertentu
Apakah kita memiliki cabrio merah di daftar mobil? . Apakah ada produk tertentu di keranjang belanja?
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 }, { ... }, ... ] _3Anda mungkin ingat fungsi let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 8 yang mirip dengan let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 7, tetapi hanya berfungsi untuk tipe primitif
Ringkasan
Pada artikel ini, kita telah membahas fungsi dasar yang membantu Anda membuat, memanipulasi, mengubah, dan mengulang melalui objek array. Fungsi-fungsi ini harus mencakup sebagian besar kasus yang akan Anda temui
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
Jamstack dev, pembuat & streamer video YouTube, penginjil dev @Kontent, penggemar pencetakan 3D, pemutar AoE2 yang buruk, pencinta Gembala Jerman Baca lebih banyak posting
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai