Home-theater-designers
Pengembang web dari semua tingkat keahlian, dari pemrogram pemula hingga ahli pengkodean, datang untuk melihat pentingnya JavaScript dalam mengembangkan situs web modern. JavaScript sangat dominan sehingga merupakan keterampilan penting untuk mengetahui apakah Anda akan membuat aplikasi web.
Salah satu blok bangunan paling kuat yang ada di dalam bahasa JavaScript adalah array. Array umumnya ditemukan dalam banyak bahasa pemrograman dan berguna untuk menyimpan data.
JavaScript juga menyertakan fitur berguna yang dikenal sebagai metode array. Berikut adalah lima belas yang harus Anda perhatikan untuk mengembangkan keterampilan Anda sebagai pengembang.
Apa Itu Metode Array?
Metode array adalah fungsi bawaan JavaScript yang dapat Anda terapkan ke array Anda. Setiap metode memiliki fungsi unik yang melakukan perubahan atau perhitungan pada larik Anda, sehingga Anda tidak perlu mengkodekan fungsi umum dari awal.
Metode array dalam JavaScript dijalankan menggunakan notasi titik yang dilampirkan ke variabel array Anda. Karena mereka hanya fungsi JavaScript, mereka selalu diakhiri dengan tanda kurung yang dapat menampung argumen opsional. Berikut adalah metode yang dilampirkan ke array sederhana yang disebut myArray .
let myArray = [1,2,3]; myArray.pop();Kode ini akan menerapkan metode yang disebut pop ke array.
Contoh Array
Untuk setiap contoh, gunakan array sampel yang akan kita panggil myArray , untuk melakukan metode pada. Jangan ragu untuk menarik konsol dan kode Anda.
let myArray = [2,4,5,7,9,12,14];Contoh-contoh ini akan menganggap Anda mengetahui dasar dari apa itu JavaScript dan bagaimana cara kerjanya . Jika Anda tidak, tidak apa-apa, kita semua di sini untuk belajar dan tumbuh.
Gali lima belas metode array yang kuat ini!
1. Array.push()
Apa yang dilakukannya: dorongan() mengambil larik Anda dan menambahkan satu atau lebih elemen ke akhir larik, lalu mengembalikan panjang larik yang baru. Metode ini akan memodifikasi array yang ada.
Tambahkan nomor 20 ke array dengan menjalankan dorongan() , menggunakan 20 sebagai argumen.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Periksa apakah itu berhasil:
console.log(myArray); [2,4,5,7,9,12,14,20]Menjalankan dorongan() metode pada myArray menambahkan nilai yang diberikan dalam argumen ke dalam array. Dalam hal ini, 20. Saat Anda memeriksa myArray di konsol, Anda akan melihat nilai sekarang ditambahkan ke akhir array.
2. Array.concat()
Apa yang dilakukannya: concat() dapat menggabungkan dua atau lebih array menjadi array baru. Itu tidak mengubah array yang ada tetapi membuat yang baru.
Mengambil myArray dan menggabungkan array yang disebut array baru ke dalamnya.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Metode ini bekerja sangat baik ketika berhadapan dengan banyak array atau nilai yang perlu Anda gabungkan, semuanya dalam satu langkah yang cukup sederhana saat menggunakan variabel.
3. Array.join()
Apa yang dilakukannya: Ikuti() mengambil array dan menggabungkan konten array, dipisahkan dengan koma. Hasilnya ditempatkan dalam string. Anda dapat menentukan pemisah jika Anda ingin menggunakan alternatif koma.
Lihatlah cara kerjanya menggunakan myArray. Pertama menggunakan metode default tanpa argumen pemisah, yang akan menggunakan koma.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript akan menampilkan string, dengan setiap nilai dalam array dipisahkan dengan koma. Anda dapat menggunakan argumen dalam fungsi untuk mengubah pemisah. Amati dengan dua argumen: satu spasi dan string.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'Contoh pertama adalah spasi, membuat string yang mudah dibaca.
Contoh kedua menggunakan (' dan ') , dan ada dua hal yang perlu diketahui di sini.
Pertama, kami menggunakan kata 'dan' untuk memisahkan nilai. Kedua, ada spasi di kedua sisi kata 'dan'. Ini adalah hal penting yang perlu diingat saat menggunakan Ikuti() . JavaScript membaca argumen secara harfiah; jadi jika ruang ini ditinggalkan, semuanya akan dikerutkan bersama-sama (mis. '2and4and5...' dll.) Bukan hasil yang sangat mudah dibaca!
4. Array.forEach()
Apa yang dilakukannya: untuk setiap() (peka huruf besar kecil!) menjalankan fungsi pada setiap item dalam larik Anda. Fungsi ini adalah fungsi apa pun yang Anda buat, mirip dengan menggunakan loop 'untuk' untuk menerapkan fungsi ke array tetapi dengan lebih sedikit pekerjaan untuk kode.
Ada sedikit lagi untuk setiap() ; lihat sintaks, lalu lakukan fungsi sederhana untuk didemonstrasikan.
myArray.forEach(function(item){
//code
});
Kami menggunakan myArray , untuk setiap() diterapkan dengan notasi titik. Anda menempatkan fungsi yang ingin Anda gunakan di dalam kurung argumen, yaitu fungsi (barang) dalam contoh.
Melihat fungsi (barang) . Ini adalah fungsi yang dieksekusi di dalam forEach(), dan memiliki argumennya sendiri. Kami memanggil argumen barang . Ada dua hal yang perlu diketahui tentang argumen ini:
- Saat forEach() mengulang array Anda, itu akan menerapkan kode ke argumen ini. Anggap saja sebagai variabel sementara yang memegang elemen saat ini.
- Anda memilih nama argumen, dapat diberi nama apa pun yang Anda inginkan. Biasanya ini akan diberi nama sesuatu yang membuatnya lebih mudah dipahami, seperti 'item' atau 'elemen'.
Dengan mengingat dua hal tersebut, lihat contoh sederhana ini. Tambahkan 15 ke setiap nilai, dan minta konsol menunjukkan hasilnya.
myArray.forEach(function(item){
console.log(item + 15);
});
Kami menggunakan barang dalam contoh ini sebagai variabel, jadi fungsinya ditulis untuk menambahkan 15 ke setiap nilai melalui barang . Konsol kemudian mencetak hasilnya. Inilah tampilannya di konsol Google Chrome.
Hasilnya adalah setiap angka dalam array, tetapi dengan 15 ditambahkan ke dalamnya!
5. Array.map()
Apa yang dilakukannya: peta() melakukan fungsi pada setiap elemen dalam array Anda dan menempatkan hasilnya dalam array baru.
Menjalankan fungsi pada setiap elemen terdengar seperti forEach(). Perbedaannya disini adalah peta() membuat array baru saat dijalankan. forEach() tidak membuat array baru secara otomatis, Anda harus mengkodekan fungsi tertentu untuk melakukannya.
Gunakan map() untuk menggandakan nilai setiap elemen di myArray, dan menempatkannya di array baru. Anda akan melihat hal yang sama fungsi (barang) sintaks untuk sedikit lebih banyak latihan.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Periksa hasilnya di konsol.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray tidak berubah:
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift()
Fungsinya: Mirip dengan cara kerja metode Push(), the tidak bergeser() metode mengambil larik Anda dan menambahkan satu atau lebih elemen ke awal larik alih-alih di akhir, dan mengembalikan panjang larik yang baru. Metode ini akan memodifikasi array yang ada.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);Saat mencatat larik ke konsol, Anda akan melihat angka 0 di awal larik.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort()
Kegunaannya: Pengurutan adalah salah satu operasi paling umum yang dilakukan pada array dan sangat berguna. JavaScript menyortir() metode array dapat digunakan untuk mengurutkan array angka atau bahkan string hanya dengan satu baris kode. Operasi ini ada dan mengembalikan larik yang diurutkan dengan memodifikasi larik awal. Ambil satu set angka yang berbeda untuk myArray kali ini.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Karena penyortiran dilakukan di tempat, Anda tidak perlu mendeklarasikan variabel terpisah untuk array yang diurutkan.
console.log(myArray); [10, 12, 34, 55, 65]Secara default, array diurutkan dalam urutan menaik, tetapi Anda dapat secara opsional meneruskan fungsi kustom ke menyortir() metode untuk mengurutkan array dengan cara yang diinginkan. Dalam hal ini, saya melewati kebiasaan fungsi panah untuk mengurutkan array secara numerik dalam urutan menaik.
8. Array.reverse()
Fungsinya: Seperti namanya, membalikkan() Metode ini digunakan untuk membalikkan urutan elemen dalam array. Perhatikan bahwa ini tidak membalikkan isi array tetapi hanya urutannya sendiri. Berikut adalah contoh untuk memahami metode ini dengan lebih baik:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Log output ke konsol untuk memverifikasi operasi.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Seperti yang Anda lihat, urutan elemen telah dibalik. Sebelumnya, elemen pada indeks terakhir (elemen 14 pada indeks 6) sekarang menjadi elemen pada indeks ke nol dan seterusnya.
9. Array.slice()
Apa yang dilakukannya: mengiris() digunakan untuk mengambil salinan dangkal dari sebagian array. Dalam istilah yang lebih sederhana, metode ini memungkinkan Anda untuk memilih elemen tertentu dari array berdasarkan indeksnya. Anda dapat melewati indeks awal dari elemen yang ingin Anda ambil dan elemen dan secara opsional indeks akhir juga.
Jika Anda tidak memberikan indeks akhir, semua elemen dari indeks awal hingga akhir array akan diambil. Metode ini mengembalikan array baru dan tidak mengubah yang sudah ada.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);Dalam kode di atas, semua elemen dari indeks kedua hingga indeks terakhir diambil karena parameter indeks akhir tidak dilewatkan. Log kedua array ke konsol.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Jelas, larik awal tidak dimodifikasi oleh metode slice() dan sebaliknya mengembalikan larik baru yang disimpan di irisanArray variabel. Berikut adalah contoh di mana parameter indeks akhir juga diteruskan ke mengiris() metode.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Array.sambatan()
Apa yang dilakukannya: sambatan() adalah metode larik berguna yang digunakan untuk menghapus atau mengganti elemen dalam larik di tempatnya. Dengan menentukan indeks dan jumlah elemen yang akan dihapus, itu memodifikasi array.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);Dalam contoh di atas, myArray array disambung dari indeks 2 dan elemen 3 dihapus darinya. Array sekarang terdiri dari:
[2, 4, 12, 14]Untuk mengganti elemen daripada hanya menghapusnya, Anda dapat meneruskan sejumlah parameter opsional dengan elemen yang ingin Anda ganti, seperti ini:
mengapa pesan saya tidak terkirim
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Array.filter()
Apa yang dilakukannya: The Saring() metode adalah metode array yang berguna yang mengambil fungsi yang berisi tes dan mengembalikan array baru dengan semua elemen yang lulus tes itu. Sesuai dengan namanya, metode ini digunakan untuk menyaring elemen yang Anda butuhkan dari elemen lainnya. Filtrasi dilakukan dengan menggunakan fungsi yang mengembalikan nilai boolean.
Berikut adalah contoh dari Saring() metode yang digunakan untuk mendapatkan hanya elemen-elemen dari array yang habis dibagi 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);Dalam contoh di atas, fungsi panah dilewatkan sebagai parameter yang mengambil setiap angka dari larik asli dan memeriksa apakah itu habis dibagi 2 menggunakan modulo ( % ) dan persamaan ( === ) operator. Berikut tampilan outputnya:
[2, 4, 12, 14]12. Array.reduce()
Apa yang dilakukannya: mengurangi() adalah metode array yang mengambil fungsi peredam dan mengeksekusinya pada setiap elemen array untuk menghasilkan nilai tunggal saat kembali. Dibutuhkan fungsi peredam dengan variabel akumulator dan variabel elemen arus sebagai parameter yang diperlukan. Nilai akumulator diingat di semua iterasi dan akhirnya dikembalikan setelah iterasi terakhir.
Kasus penggunaan yang populer dari metode ini adalah menghitung jumlah semua elemen dalam array. Implementasi fungsi ini adalah sebagai berikut:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);0 dilewatkan sebagai parameter kedua dalam contoh di atas, yang digunakan sebagai nilai awal variabel akumulator. NS jumlahDariNums variabel akan berisi nilai balik dari mengurangi() metode yang diharapkan menjadi jumlah semua elemen dalam array.
console.log(sumOfNums); 5313. Array.include()
Kegunaannya: Mencari elemen dalam array untuk memeriksa apakah elemen tersebut ada adalah operasi yang cukup sering digunakan dan karenanya, JavaScript memiliki metode bawaan untuk ini dalam bentuk termasuk() metode larik. Inilah cara Anda dapat menggunakannya:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Metode ini mengambil parameter yang diperlukan, elemen yang akan dicari, dan parameter opsional, indeks array untuk memulai pencarian. Bergantung pada apakah elemen itu ada atau tidak, itu akan kembali benar atau Salah masing-masing. Oleh karena itu, outputnya akan menjadi:
true
false
true
false14. Array.indexOf()
Apa yang dilakukannya: Indeks() metode yang digunakan untuk mengetahui indeks di mana kemunculan pertama dari elemen tertentu dapat ditemukan dalam array. Meskipun mirip dengan metode include(), metode ini mengembalikan indeks numerik atau -1 jika elemen tidak ada dalam array.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));Indeks() metode ini menggunakan kesetaraan yang ketat untuk memeriksa apakah ada elemen, yang berarti bahwa nilainya, serta tipe datanya, harus sama. Parameter opsional kedua mengambil indeks untuk memulai pencarian. Berdasarkan kriteria ini, output akan terlihat seperti ini:
1
-1
415. Array.isi()
Fungsinya: Sering kali, Anda mungkin perlu menyetel semua nilai dalam larik ke nilai statis seperti 0. Alih-alih menggunakan loop, Anda dapat mencoba mengisi() metode untuk tujuan yang sama. Anda dapat memanggil metode ini pada larik dengan 1 parameter yang diperlukan: nilai untuk mengisi larik dengan dan 2 parameter opsional: indeks awal dan akhir untuk diisi. Metode ini memodifikasi larik yang keluar.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);Saat mencatat output ke konsol, Anda akan melihat:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Langkah Selanjutnya dalam Perjalanan JavaScript Anda
Array adalah bagian yang kuat dari bahasa JavaScript, itulah sebabnya ada begitu banyak metode bawaan untuk membuat hidup Anda lebih mudah sebagai pengembang. Cara terbaik untuk menguasai lima belas metode ini adalah dengan berlatih.
Saat Anda terus belajar JavaScript, MDN adalah sumber yang bagus untuk dokumentasi rinci. Dapatkan kenyamanan di konsol, lalu tingkatkan keterampilan Anda dengan editor JavaScript terbaik untuk programmer. Siap membangun situs web Anda dengan JavaScript? Mengapa tidak melihat beberapa kerangka kerja yang dapat Anda pertimbangkan.
Membagikan Membagikan Menciak Surel 6 Kerangka JavaScript yang Layak DipelajariAda banyak kerangka kerja JavaScript di luar sana untuk membantu pengembangan. Berikut adalah beberapa yang harus Anda ketahui.
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- JavaScript
- Kiat Pengkodean
Nitin adalah pengembang perangkat lunak yang rajin dan mahasiswa teknik komputer yang mengembangkan aplikasi web menggunakan teknologi JavaScript. Dia bekerja sebagai pengembang web lepas dan suka menulis untuk Linux dan Pemrograman di waktu luangnya.
More From Nitin RanganathBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan