15 metode JavaScript untuk bekerja dengan array yang perlu Anda ketahui pada tahun 2020

Ini adalah terjemahan dari artikel yang diterbitkan di dev.to. Dikirim oleh: Ibrahima Ndaw .
Aslinya diterbitkan di blog penulis.

Array dalam JavaScript adalah struktur data khusus yang digunakan untuk menyimpan berbagai elemen. Menggunakan properti bawaan dan metode di dalamnya, Anda dapat menambah, menghapus, menghitung atau mengolah data sesuai dengan kebutuhan Anda. Mengetahui cara bekerja dengan array dalam JavaScript akan membawa keterampilan pengembangan profesional Anda ke tingkat berikutnya.

Pada artikel ini, kami akan membahas 15 metode yang akan membantu Anda bekerja lebih efisien dengan array dalam JavaScript.



Harap dicatat bahwa pada dasarnya kami akan menyederhanakan fungsi yang dilewatkan sebagai parameter.

// Instead of using this way myAwesomeArray.some(test => { if (test === "d") { return test } }) // We'll use the shorter one myAwesomeArray.some(test => test === "d") 

1. beberapa ()

Metode ini memeriksa apakah ada elemen array yang memenuhi kondisi yang ditentukan dalam fungsi yang diteruskan. Ini akan mengembalikan true jika setidaknya satu elemen cocok dengan fungsi yang sedang diuji, dan false jika tidak.

 const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.some(test => test === "d") //-------> Output : true 

2. kurangi ()

Metode ini mengambil fungsi yang mengambil akumulator dan nilai sebagai argumen. Ini berlaku fungsi ke akumulator dan setiap nilai array, untuk mengembalikan hanya satu nilai sebagai hasilnya.

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.reduce((total, value) => total * value) // 1 * 2 * 3 * 4 * 5 //-------> Output = 120 

3. setiap ()

Metode ini memeriksa apakah semua elemen array memenuhi kondisi yang ditentukan dalam fungsi yang diteruskan. Ini akan mengembalikan true jika setiap elemen cocok dengan fungsi yang diuji, dan false jika tidak.

 const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.every(test => test === "d") //-------> Output : false const myAwesomeArray2 = ["a", "a", "a", "a", "a"] myAwesomeArray2.every(test => test === "a") //-------> Output : true 

4. peta ()

Metode ini mengambil fungsi sebagai parameter dan membuat array baru dengan hasil memanggil fungsi yang ditentukan untuk setiap elemen array. Itu akan selalu mengembalikan jumlah item yang sama.

 const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) //-------> Output : 25 // 16 // 9 // 4 // 1 

5. flat ()

Metode ini mengambil array array sebagai argumen dan menghaluskan array bersarang menjadi array tingkat atas. Harap dicatat bahwa metode ini hanya berfungsi untuk satu tingkat.

 const myAwesomeArray = [[1, 2], [3, 4], 5] myAwesomeArray.flat() //-------> Output : [1, 2, 3, 4, 5] 

6. filter ()

Metode ini mengambil fungsi sebagai parameter dan mengembalikan array baru yang berisi semua elemen array yang fungsi filternya diteruskan sebagai argumen, dan mengembalikannya dengan true .

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, { id: 4, name: "Mass" }, ] myAwesomeArray.filter(element => element.name === "Mass") //-------> Output : 0:{id: 3, name: "Mass"}, // 1:{id: 4, name: "Mass"} 

7. forEach ()

Metode ini menerapkan fungsi ke setiap elemen array.

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) //-------> Output : john // Ali // Mass 

8. findIndex ()

Metode ini mengambil fungsi sebagai parameter dan kemudian menerapkannya ke array. Ini mengembalikan indeks elemen yang ditemukan jika elemen memenuhi kondisi fungsi pengecekan dilewatkan sebagai argumen. Jika tidak puas, –1 dikembalikan.

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.findIndex(element => element.id === 3) //-------> Output : 2 myAwesomeArray.findIndex(element => element.id === 7) //-------> Output : -1 

9. temukan ()

Metode ini mengambil fungsi sebagai argumen dan kemudian menerapkannya ke array. Ini mengembalikan nilai elemen yang ditemukan dalam array jika elemen memenuhi kondisi fungsi pemeriksaan. Jika tidak, ia kembali dengan nilai yang undefined .

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.find(element => element.id === 3) //-------> Output : {id: 3, name: "Mass"} myAwesomeArray.find(element => element.id === 7) //-------> Output : undefined 

10. sort ()

Metode ini mengambil fungsi sebagai parameter. Ini memilah elemen array dan mengembalikannya.

 const myAwesomeArray = [5, 4, 3, 2, 1] // Sort from smallest to largest myAwesomeArray.sort((a, b) => a - b) //-------> Output : [1, 2, 3, 4, 5] // Sort from largest to smallest myAwesomeArray.sort((a, b) => b - a) //-------> Output : [5, 4, 3, 2, 1] 

11. concat ()

Metode ini menggabungkan dua atau lebih array / nilai dan mengembalikan array baru.

 const myAwesomeArray = [1, 2, 3, 4, 5] const myAwesomeArray2 = [10, 20, 30, 40, 50] myAwesomeArray.concat(myAwesomeArray2) //-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50] 

12. isi ()

Metode ini mengisi semua elemen array dengan nilai yang sama, dari indeks awal (default 0) hingga indeks akhir (default array.length).

 const myAwesomeArray = [1, 2, 3, 4, 5] // The first argument (0) is the value // The second argument (1) is the starting index // The third argument (3) is the ending index myAwesomeArray.fill(0, 1, 3) //-------> Output : [1, 0, 0, 4, 5] 

13. termasuk ()

Metode ini mengembalikan true jika array berisi elemen tertentu, dan false jika tidak.

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.includes(3) //-------> Output : true myAwesomeArray.includes(8) //-------> Output : false 

14. mundur ()

Metode ini membalik urutan elemen dalam array. Elemen pertama menjadi yang terakhir, dan yang terakhir menjadi yang pertama.

 const myAwesomeArray = ["e", "d", "c", "b", "a"] myAwesomeArray.reverse() //-------> Output : ['a', 'b', 'c', 'd', 'e'] 

15. flatMap ()

Metode ini menerapkan fungsi ke setiap elemen array, dan kemudian menghaluskan hasilnya menjadi array baru. Ini menggabungkan metode flat() dan metode map() menjadi satu fungsi.

 const myAwesomeArray = [[1], [2], [3], [4], [5]] myAwesomeArray.flatMap(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50] // With .flat() and .map() myAwesomeArray.flat().map(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50]