Cara menggunakan OBJEC di JavaScript

Question

Artikel asli. Tutorial Array Objek JavaScript – Cara Membuat, Memperbarui, dan Mengulangi Objek Menggunakan Metode JS Array

Table of Contents Show

Buat array objek
Menambahkan objek baru di awal - Array. lepaskan
Menambahkan objek baru di akhir - Array. dorongan
Menambahkan objek baru di tengah - Array. sambatan
Perulangan pada objek array
Temukan objek dalam array berdasarkan nilainya - Array. Temukan
Dapatkan beberapa item dari array yang sesuai dengan kondisi - Array. filter
Ubah objek pada array - Array. peta
Menambahkan properti ke setiap objek dalam array - Array. untuk setiap
Urutkan array berdasarkan properti - Array. macam
Memeriksa apakah objek dalam array memenuhi kondisi - Array. setiap, Larik. termasuk
Apa itu objek dalam JavaScript?
Apa itu array dan objek dalam JavaScript?
Apa itu metode dalam JavaScript?
Apa itu tipe data JavaScript?

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 dalam 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

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

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

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

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

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']

Dimungkinkan juga untuk membuat objek baru jika kita membutuhkan lebih banyak 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
  },
  {
    ...
  },
  ...
]

_0

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
  },
  {
    ...
  },
  ...
]

_1

Urutkan 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 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
  },
  {
    ...
  },
  ...
]

_2

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
  },
  {
    ...
  },
  ...
]

_3

Anda 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

Pengarang. Ondrej Polesny (Inggris)

Jamstack dev, pembuat & streamer video YouTube, penginjil dev @Kontent, penggemar pencetakan 3D, pemutar AoE2 yang buruk, pencinta Gembala Jerman

christine phandi

Penerjemah. christine phandi

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

Apa itu objek dalam JavaScript?

Nilai selain tipe data dasar secara otomatis dianggap sebagai objek . Objek di Javascript didefinisikan sebagai koleksi properti yang dapat diubah, yang berarti a sekelompok properti (karakteristik) yang nilainya dapat berubah.

Apa itu array dan objek dalam JavaScript?

Objek. kalau diterjemahkan ke dalam bahasa Indonesia adalah objek/tujuan/sasaran. Larik. jika diterjemahkan ke dalam bahasa Indonesia adalah susunan/urutan/baris . Himpunan[]. untuk menampilkan daftar nomor.

Apa itu metode dalam JavaScript?

Metode — metode ini digunakan untuk manipulasi array, seperti menambahkan item baru, menghapus, dan seterusnya .

Apa itu tipe data JavaScript?

Jenis data adalah jenis data yang dapat kita simpan dalam variabel . Ada beberapa tipe data dalam pemrograman Javascript. String (teks) Integer atau Angka (bilangan bulat)

kode javascript