Cara menggunakan array function javascript

Question

Array untuk para programmer JavaScript seperti sekrup dan paku untuk tukang kayu. Oleh karena itu penting untuk mengetahui bagaimana cara kerjanya. Mengosongkan array adalah salah satu konsep penting yang terlibat jadi berikut adalah beberapa metode yang dapat digunakan.

Table of Contents Show

Membuat sebuah array dari object
Menambahkan object baru di awal - Array.unshift
Menambahkan object baru di akhir - Array.push
Menambahkan object baru di tengah - Array.splice
Looping pada array object
Temukan object dalam array berdasarkan valuenya - Array.find
Mendapatkan beberapa item dari array yang sesuai dengan kondisi - Array.filter
Mengubah object pada array - Array.map
Menambahkan properti pada tiap object dalam array - Array.forEach
Mengurutkan array berdasarkan properti - Array.sort
Memeriksa apakah object dalam array memenuhi kondisi - Array.every, Array.includes
Bagaimana cara menggunakan array dalam java script?
Bagaimana Anda membuat fungsi di javascript?
Bagaimana cara mengosongkan nilai data pada array?
Method apa yang dapat kita gunakan untuk memilah elemen array berdasarkan kondisi tertentu dan akan membuat sebuah array baru?

01. Menggunakan property .length
Fungsi properti .length pada object Array adalah untuk mendapatkan jumlah item pada Array dan juga dapat digunakan untuk mengosongkan object Array dengan mengisi nilai “0” seperti berikut.

var arrObj = ['satu', 'dua', 'tiga'];
console.log(arrObj.length); // total item = 3

// kosong kan array
arrObj.length = 0;
console.log(arrObj.length); // total item = 0
console.log(arrObj); // hasil = []

02. Atur Ulang dengan nilai Array kosong
Ini adalah cara tercepat untuk mengosongkan Array. Cukup dengan kode berikut.

var arrObj = ['satu', 'dua', 'tiga'];

// kosong kan array
arrObj = [];
console.log(arrObj.length); // total item = 0
console.log(arrObj); // hasil = []

03. Menggunakan fungsi Array splice()
Salah satu cara lainnya adalah dengan fungsi splice() yang tersedia pada object Array. Caranya adalah sebagai berikut.

var arrObj = ['satu', 'dua', 'tiga'];
console.log(arrObj.length); // total item = 3

// kosong kan array
arrObj.splice(0, arrObj.length);
console.log(arrObj.length); // total item = 0
console.log(arrObj); // hasil = []

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Seperti itu beberapa cara untuk mengosongkan nilai Array pada JavaScript. Semoga artikel ini bermanfaat.

Original article: JavaScript Array of Objects Tutorial – How to Create, Update, and Loop Through Objects Using JS Array Methods by {{ author }}

Rata-rata saya bekerja dengan data JSON 18 kali seminggu. Dan saya masih harus menggunakan google untuk menemukan cara untuk memanipulasinya hampir setiap saat. Bagaimana jika ada panduan yang selalu bisa memberi Anda jawabannya?

Pada artikel ini, saya akan menunjukkan kepada Anda hal dasar ketika bekerja dengan array yang terdiri dari object pada JavaScript.

Jika Anda pernah bekerja dengan struktur JSON, sebenarnya Anda telah bekerja dengan object JavaScript. JSON adalah singkatan dari JavaScript Object Notation.

Membuat object sesederhana ini:

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

Object ini merepresentasikan sebuah mobil. Terdapat banyak jenis dan warna mobil, setiap object mewakili mobil tertentu.

Sekarang, kebanyakan data yang Anda peroleh dari layanan eksternal seperti ini. Namun terkadang Anda perlu membuat object 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 terulang 12 kali, dimana akan membuat kode tidak dapat dimaintain.

Membuat sebuah array dari object

Tapi mari kita kembali ke mobil. Mari kita lihat kumpulan 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
  },
  {
    ...
  },
  ...
]

Array dari object tidak akan sama sepanjang waktu. Kita hampir selalu harus melakukan manipulasi array. Jadi mari kita lihat bagaimana kita bisa menambahkan object ke array yang sudah ada.

Menambahkan object baru di awal - Array.unshift

Untuk menambahkan object 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 object baru di akhir - Array.push

Untuk menambahkan object 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 object baru di tengah - Array.splice

Untuk menambahkan object 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 bisa juga untuk menghapus item. Perhatikan parameternya:

Array.splice(
  {index untuk mulai},
  {jumlah item yang akan dihapus},
  {item yang ingin ditambahkan}
);

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

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

Looping pada array object

Izinkan saya bertanya pada Anda di sini: Mengapa Anda ingin mengiterasi array dari object? Alasan saya bertanya karena perulangan hampir tidak pernah menjadi penyebab utama dari apa yang ingin kita capai.

JavaScript menyediakan banyak fungsi yang dapat menyelesaikan masalah Anda tanpa mengimplementasikan logika pada siklus yang umum. Mari kita lihat.

Temukan object dalam array berdasarkan valuenya - Array.find

Anggaplah 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 pertama yang sesuai:

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 value:

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

Pada kasus ini kita akan mendapatkan mobil terakhir dalam daftar.

Mendapatkan 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 object. Apabila 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
//   }
// ]

Mengubah object pada array - Array.map

Ini adalah sesuatu yang kita sering butuhkan. Mengubah array object menjadi array object yang berbeda. Itu merupakan pekerjaan untuk

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

1. Anggaplah 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']

Mungkin juga untuk membuat object baru jika kita membutuhkan lebih banyak value:

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 pada tiap object dalam array - Array.forEach

Tapi bagaimana jika kita menginginkan ukuran mobil juga? Dalam hal ini kita dapat meningkatkan object untuk properti baru

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

2. Ini adalah use-case 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

Mengurutkan array berdasarkan properti - Array.sort

Ketika kita selesai mengubah object, biasanya kita perlu mengurutkannya dengan satu atau lain cara.

Biasanya, pengurutan berdasarkan pada value properti yang dimiliki setiap object. 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 pengurutan.

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 object dan menempatkan object pertama di tempat kedua jika hasil dari fungsi sorting adalah positif. Jadi Anda dapat menganggap fungsi sorting seperti pertanyaan: Haruskah object pertama ditempatkan di tempat kedua?

Pastikan untuk selalu menambahkan case nol ketika nilai yang dibandingkan dari kedua object sama untuk menghindari penukaran yang tidak perlu.

Memeriksa apakah object dalam array memenuhi kondisi - Array.every, Array.includes

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 object untuk kondisi tertentu.

Apakah kita memiliki cabrio merah dalam daftar mobil? Apakah semua mobil mampu mengangkut setidaknya 4 orang? Atau lebih web-centric: 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 mengingat 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

Dalam artikel ini, kita telah membahas fungsi-fungsi dasar yang membantu Anda membuat, memanipulasi, mengubah, dan loop melalui array object. Fungsi-fungsi ini seharusnya mencakup sebagian besar kasus yang akan Anda temui.

Author: Ondrej Polesny (English)

Jamstack dev, YouTube video maker & streamer, dev evangelist @Kontent, 3D printing enthusiast, bad AoE2 player, German Shepherd lover

christine phandi

Translator: christine phandi

Bagaimana cara menggunakan array dalam java script?

Ada 2 cara penulisan array pada JavaScript, yaitu menggunakan kurung siku [ ] dan menggunakan keyword new Array(). Perintah new ini akan membuat 'objek' array. Berikut contoh penulisan Array : var angka = [];