Penulis materi, terjemahan yang kami terbitkan hari ini, mengatakan bahwa dalam beberapa bulan terakhir, ketika memeriksa permintaan tarik, ia terus-menerus menemukan empat kekurangan yang sama terkait dengan penggunaan metode array yang tidak rasional dalam JavaScript. Untuk mengurangi kekurangan kode yang sebelumnya muncul di programnya, dia menulis artikel ini.
Mengganti indexOf () dengan include ()
"Jika Anda mencari sesuatu dalam array, gunakan metode
indexOf() ." Saya bertemu dengan rekomendasi seperti itu di salah satu kursus ketika saya belajar JavaScript. Rekomendasi ini cukup normal, tidak ada hal buruk yang bisa dikatakan tentang itu.
Pada MDN, Anda bisa mengetahui bahwa metode
indexOf() mengembalikan indeks pertama di mana elemen tertentu dapat ditemukan dalam array. Ini berarti bahwa jika kami berencana untuk menggunakan indeks ini dalam program, metode
indexof() sangat bagus untuk menemukan elemen dalam array.
Tetapi bagaimana jika kita hanya perlu mencari tahu apakah ada elemen tertentu dalam array atau tidak? Artinya, kami tertarik bukan pada indeks elemen ini, jika itu dalam array, tetapi fakta ada atau tidaknya. Dengan pendekatan ini, kami cukup nyaman dengan perintah yang mengembalikan
true atau
false . Dalam kasus seperti itu, saya sarankan tidak menggunakan metode
indexOf() , tetapi metode
includes() , yang mengembalikan nilai boolean. Pertimbangkan sebuah contoh:
'use strict'; const characters = [ 'ironman', 'black_widow', 'hulk', 'captain_america', 'hulk', 'thor', ]; console.log(characters.indexOf('hulk'));
Menggunakan metode find () alih-alih metode filter ()
Metode
filter() adalah alat yang sangat berguna. Itu, berdasarkan satu array, menciptakan array lain yang mengandung elemen-elemen dari array asli yang cocok dengan kondisi yang ditentukan. Seperti yang Anda lihat dari nama metode ini, ia dirancang untuk memfilter array, di mana array biasanya diperoleh yang lebih pendek dari yang asli.
Bagaimana jika kita tahu bahwa setelah memfilter array, hanya satu elemen yang akan tersisa? Misalnya, ini bisa terjadi ketika Anda mencoba memfilter elemen array berdasarkan beberapa pengidentifikasi unik. Dalam situasi seperti itu, saya tidak akan merekomendasikan menggunakan metode
filter() , karena array yang terbentuk hanya berisi satu elemen. Jika kita tertarik pada elemen array dengan nilai unik, maka kita akan bekerja dengan nilai tunggal, dan array tidak diperlukan untuk mewakili nilai seperti itu.
Jika kita berbicara tentang kinerja metode
filter() , ternyata untuk membentuk daftar elemen yang sesuai dengan kondisi yang ditentukan ketika dipanggil, ia harus melihat seluruh array. Selain itu, bayangkan bahwa ada ratusan elemen dalam array yang memenuhi kondisi tertentu. Ini akan menghasilkan array yang dihasilkan menjadi cukup besar.
Untuk menghindari situasi seperti itu, saya akan merekomendasikan menggunakan metode
find() . Ketika dipanggil, ia menerima panggilan balik yang menggambarkan kondisi, sangat mirip dengan yang digunakan dengan metode
filter() , tetapi metode
find() mengembalikan hanya elemen pertama yang cocok dengan kondisi tersebut. Pada saat yang sama, metode ini berhenti bekerja segera setelah menemukan elemen seperti itu. Akibatnya, ia tidak harus melihat seluruh array.
'use strict'; const characters = [ { id: 1, name: 'ironman' }, { id: 2, name: 'black_widow' }, { id: 3, name: 'captain_america' }, { id: 4, name: 'captain_america' }, ]; function getCharacter(name) { return character => character.name === name; } console.log(characters.filter(getCharacter('captain_america'))); // [ // { id: 3, name: 'captain_america' }, // { id: 4, name: 'captain_america' }, // ] console.log(characters.find(getCharacter('captain_america'))); // { id: 3, name: 'captain_america' }
Mengganti metode find () dengan metode some ()
Harus saya akui, pengawasan yang akan kita bahas sekarang, sudah saya lakukan berkali-kali. Kemudian mereka menyarankan saya untuk melihat
MDN dan melihat bagaimana meningkatkan apa yang saya lakukan secara tidak rasional. Singkatnya, ini sangat mirip dengan apa yang baru saja kita lihat ketika berbicara tentang metode
indexOf() dan
includes() .
Dalam kasus di atas, kami melihat bahwa metode
find() , sebagai argumen, mengambil panggilan balik dan mengembalikan elemen array. Bisakah metode
find() disebut solusi paling sukses jika kita perlu mencari tahu apakah array mengandung nilai tertentu atau tidak? Mungkin tidak, karena metode ini mengembalikan nilai elemen array, bukan boolean.
Dalam situasi seperti itu, saya akan merekomendasikan menggunakan metode
some() , yang mengembalikan nilai boolean.
'use strict'; const characters = [ { id: 1, name: 'ironman', env: 'marvel' }, { id: 2, name: 'black_widow', env: 'marvel' }, { id: 3, name: 'wonder_woman', env: 'dc_comics' }, ]; function hasCharacterFrom(env) { return character => character.env === env; } console.log(characters.find(hasCharacterFrom('marvel')));
Menggunakan metode pengurangan () alih-alih kombinasi metode filter () dan peta ()
Perlu dikatakan bahwa metode
reduce() tidak dapat diklasifikasikan sebagai mudah dimengerti. Namun, jika apa yang dapat dilakukan dengan itu dilakukan dalam dua langkah, menggunakan metode
filter() dan
map() yang digabungkan dalam sebuah rantai, tampaknya ada sesuatu dalam pendekatan ini yang salah.
Saya mengatakan bahwa dengan pendekatan ini, Anda harus melihat array dua kali. Lulus pertama, yang dilakukan oleh metode
filter() , melibatkan melihat seluruh array dan membuat array baru yang difilter. Setelah lintasan kedua, dilakukan oleh metode
map() , sekali lagi, array baru dibuat yang berisi hasil transformasi elemen-elemen array yang diperoleh setelah metode
filter() dijalankan. Akibatnya, untuk mencapai array yang selesai, dua metode digunakan. Setiap metode memiliki callback sendiri, dan selama pelaksanaan operasi seperti itu menggunakan metode
filter() , sebuah array dibuat yang kita tidak bisa lagi bekerja dengan.
Untuk mengurangi beban pada sistem yang dibuat dengan menggunakan dua metode dan meningkatkan produktivitas program, dalam kasus seperti itu, saya akan merekomendasikan menggunakan metode
reduce() . Hasilnya akan sama, tetapi kode akan menjadi lebih baik. Metode ini memungkinkan Anda untuk memfilter elemen yang menarik bagi kami dan menambahkannya ke baterai. Baterai dapat berupa variabel numerik yang menyimpan, katakanlah, jumlah elemen array, dapat berupa objek, string atau array di mana kita dapat mengakumulasikan elemen yang kita butuhkan.
Dalam kasus kami, karena kita berbicara tentang menggunakan metode
map() , saya akan menyarankan menggunakan metode
reduce() dengan array sebagai akumulator. Dalam contoh berikut, kami memfilter elemen array yang objek dengan nilai bidang
env dan melakukan konversi.
'use strict'; const characters = [ { name: 'ironman', env: 'marvel' }, { name: 'black_widow', env: 'marvel' }, { name: 'wonder_woman', env: 'dc_comics' }, ]; console.log( characters .filter(character => character.env === 'marvel') .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) ); // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ] console.log( characters .reduce((acc, character) => { return character.env === 'marvel' ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) : acc; }, []) ) // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ]
Ringkasan
Dalam artikel ini, kami menguji beberapa pendekatan untuk penggunaan metode array yang efektif dalam menyelesaikan berbagai masalah. Kami percaya bahwa ide-ide yang menjadi dasar rekomendasi yang diberikan oleh penulis artikel ini dapat membantu meningkatkan kode JS dalam situasi lain.
Pembaca yang budiman! Pernahkah Anda menemukan contoh kesalahan alokasi mekanisme JavaScript?
