Array dan Metode Objek yang Berguna dalam JavaScript

Penulis artikel tersebut, terjemahan yang kami terbitkan hari ini, mengatakan bahwa salah satu masalah podcast FM Syntax , yang memberikan gambaran umum tentang metode objek dan array yang berguna dalam JavaScript, mendorong idenya. Metode ini membantu pengembang menulis kode yang bersih dan mudah dibaca. Penggunaannya mengurangi kebutuhan akan perpustakaan pihak ketiga seperti Lodash .

Array.prototype.filter ()

Metode Array.prototype.filter () membuat array baru yang hanya elemen-elemen dari array asli yang cocok dengan kondisi yang ditentukan jatuh.

▍ Contoh

Atas dasar susunan yang berisi informasi tentang siswa, kami akan membuat susunan baru di mana catatan hanya akan disertakan tentang siswa yang usianya memungkinkan mereka untuk membeli alkohol.

const studentsAge = [17, 16, 18, 19, 21, 17]; const ableToDrink = studentsAge.filter( age => age > 18 ); //  ableToDrink    : [19, 21] 

Array.prototype.map ()

Metode Array.prototype.map () memungkinkan Anda untuk membuat array baru berdasarkan nilai pemrosesan array lain. Metode ini sangat bagus untuk memodifikasi data, karena fakta bahwa itu tidak membuat perubahan pada array asli, ini sering digunakan dalam Bereaksi.

▍ Contoh

Berdasarkan array angka, buat array baru, di awal setiap elemen yang $ sign akan ditempatkan.

 const numbers = [2, 3, 4, 5]; const dollars = numbers.map( number => '$' + number); //      dollars: ['$2', '$3', '$4', '$5'] 

Array.prototype.reduce ()

Metode Array.prototype.reduce () sering diabaikan. Ini memungkinkan Anda untuk mengurangi array ke nilai tunggal yang terakumulasi di elemen penerima. Nilai yang dikembalikan oleh metode ini bisa dari jenis apa pun. Misalnya, bisa berupa objek, array, string, atau angka.

▍ Contoh

Kami akan menggunakan metode .reduce() untuk mendapatkan jumlah elemen array numerik.

 const numbers = [5, 10, 15]; const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue); //   total    30 

Bahkan, metode ini dapat digunakan dengan berbagai cara menarik. Contoh yang relevan dapat ditemukan dalam dokumentasi MDN . Secara khusus, kita berbicara tentang memperluas array array, tentang pengelompokan objek berdasarkan properti, dan tentang menghapus elemen duplikat dari array.

Array.prototype.forEach ()

Metode Array.prototype.forEach () menerapkan fungsi yang diteruskan ke setiap elemen array.

▍ Contoh

Berikut ini cara mengeluarkan setiap elemen array ke konsol menggunakan metode .forEach() .

 const emotions = ['happy', 'sad', 'angry']; emotions.forEach( emotion => console.log(emotion) ); //   : // 'happy' // 'sad' // 'angry' 

Array.prototype.some ()

Metode Array.prototype.some () memeriksa apakah setidaknya satu elemen array cocok dengan kondisi yang ditentukan oleh fungsi yang diteruskan ke sana. Metode ini, misalnya, mampu menunjukkan dirinya dengan baik dalam menyelesaikan tugas memverifikasi hak pengguna. Ini dapat dianggap sebagai analog dari .forEach() sebelumnya dianggap, dengan perbedaan bahwa, ketika digunakan dengan bantuan fungsi yang diteruskan ke sana, dimungkinkan untuk melakukan tindakan tertentu pada elemen array hingga fungsi ini mengembalikan nilai sebenarnya, lalu sela pemrosesan.

▍ Contoh

Periksa apakah array berisi setidaknya satu string admin .

 const userPrivileges = ['user', 'user', 'user', 'admin']; const containsAdmin = userPrivileges.some( element => element === 'admin'); //  containsAdmin   true 

Array.prototype.every ()

Metode Array.prototype.every () mirip dengan metode .some () yang dijelaskan di atas, tetapi ia mengembalikan true hanya jika semua elemen array memenuhi kondisi yang ditentukan oleh fungsi yang diteruskan ke fungsi metode ini.

▍ Contoh

Periksa apakah semua perkiraan yang disimpan dalam array sama atau lebih besar dari 3.

 const ratings = [3, 5, 4, 3, 5]; const goodOverallRating = ratings.every( rating => rating >= 3 ); //goodOverallRating   true 

Array.prototype.includes ()

Metode Array.prototype.includes () memberi tahu Anda jika array berisi nilai yang diberikan. Ini mirip dengan metode .some() , tetapi tidak memeriksa apakah elemen-elemen array cocok dengan kondisi tertentu, melainkan apakah array berisi nilai yang ditentukan ketika dipanggil.

▍ Contoh

Periksa apakah ada elemen string waldo di array:

 const names = ['sophie', 'george', 'waldo', 'stephen', 'henry']; const includesWaldo = names.includes('waldo'); // includesWaldo   true 

Array.dari ()

Metode statis Array.from () memungkinkan Anda membuat array berdasarkan array atau string lain. Jika perlu, metode ini dapat meneruskan fungsi untuk melakukan pemetaan, yang memungkinkan Anda untuk mempengaruhi data yang akan jatuh ke dalam array baru. Bahkan, metode khusus disediakan untuk pemetaan - Array.prototype.map () , jadi tidak sepenuhnya jelas mengapa ada orang yang memerlukan fitur ini dari metode Array.from() .

▍ Contoh

Buat array berdasarkan string.

 const newArray = Array.from('hello'); // newArray    ['h', 'e', 'l', 'l', 'o'] 

Buat array yang berisi nilai dua kali lipat dari elemen array numerik asli.

 const doubledValues = Array.from([2, 4, 6], number => number * 2); //   doubleValues    : [4, 8, 12] 

Object.values ​​()

Metode Object.values ​​() mengembalikan array nilai properti objek yang diteruskan ke sana.

▍ Contoh

Kami membentuk array nilai properti objek.

 const icecreamColors = {   chocolate: 'brown',   vanilla: 'white',   strawberry: 'red', } const colors = Object.values(icecreamColors); //  colors    ["brown", "white", "red"] 

Object.keys ()

Metode Object.keys () mengembalikan array yang terdiri dari nama properti objek (kunci).

▍ Contoh

Kami akan membentuk array nama properti objek.

 const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const types = Object.keys(icecreamColors); //     types: ["chocolate", "vanilla", "strawberry"] 

Object.entries ()

Metode Object.entries () mengembalikan, setelah memproses objek yang diteruskan ke sana, sebuah array yang berisi array yang merupakan pasangan bentuk [, ] , yang merupakan nama-nama properti dan nilai-nilai properti ini.

▍ Contoh

Kami membentuk larik yang berisi, untuk objek yang menarik bagi kami, data tentang nama properti dan nilainya.

 const weather = { rain: 0, temperature: 24, humidity: 33, } const entries = Object.entries(weather); //   entries    // [['rain', 0], ['temperature', 24], ['humidity', 33]] 

Operator ekstensi dan array

Operator ekstensi (operator spread , ...), sebagaimana diterapkan pada array, memungkinkan Anda untuk memperluasnya dengan mengekstraksi elemen-elemen mereka dari elemen tersebut. Operator ini berguna, misalnya, ketika Anda perlu menggabungkan beberapa array. Selain itu, penggunaannya menghilangkan kebutuhan untuk menggunakan metode .splice() jika Anda perlu menghapus beberapa elemen dari array, karena dapat dikombinasikan dengan metode .slice() , yang menghindari mengubah array asli.

▍ Contoh

Gabungkan dua array.

 const spreadableOne = [1, 2, 3, 4]; const spreadableTwo = [5, 6, 7, 8]; const combined = [...spreadableOne, ...spreadableTwo]; //  combined   : [1, 2, 3, 4, 5, 6, 7, 8] 

Kami membentuk array baru, yang merupakan array asli dari mana elemen itu dihapus. Dalam hal ini, array asli tidak boleh diubah.

 const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat']; const mammals = [...animals.slice(0,3), ...animals.slice(4)]; // mammals   : ['squirrel', 'bear', 'deer', 'rat'] 

Operator ekstensi dan objek

Menerapkan operator ekstensi ke objek memungkinkan Anda untuk menambahkan properti dan nilai baru kepada mereka tanpa mengubah objek asli (yaitu, objek baru dibuat sebagai hasil dari operasi tersebut). Selain itu, operator ini dapat digunakan untuk menggabungkan objek. Perlu dicatat di sini bahwa operator ekstensi yang diterapkan pada suatu objek tidak mempengaruhi objek yang bersarang di dalamnya.

▍ Contoh

Buat objek baru dengan menambahkan properti baru ke objek asli tanpa mengubah objek asli.

 const spreadableObject = { name: 'Robert', phone: 'iPhone' }; const newObject = { ...spreadableObject, carModel: 'Volkswagen' } //  newObject   : // { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' } 

Sintaks dari parameter fungsi yang tersisa

Saat bekerja dengan fungsi, Anda dapat menggunakan sintaks dari parameter yang tersisa untuk mengatur penerimaan sejumlah argumen dalam bentuk array.

▍ Contoh

Kami mencetak array yang berisi argumen yang diteruskan ke fungsi.

 function displayArgumentsArray(...theArguments) { console.log(theArguments); } displayArgumentsArray('hi', 'there', 'bud'); //      ['hi', 'there', 'bud'] 

Object.freeze ()

Metode Object.freeze () “membekukan” suatu objek, mencegah properti yang ada dari objek ini mengubah atau menambahkan properti dan nilai baru ke objek. Ada kesalahpahaman bahwa metode ini mirip dengan mendeklarasikan objek menggunakan kata kunci const , namun, objek konstan dapat dimodifikasi.

▍ Contoh

Kami “membekukan” suatu objek, setelah itu kami mencoba mengubah propertinya dan memastikan bahwa ini tidak dapat dilakukan.

 const frozenObject = { name: 'Robert' } Object.freeze(frozenObject); frozenObject.name = 'Henry'; //  frozenObject  ,     { name: 'Robert' } 

Object.seal ()

Metode Object.seal () memungkinkan Anda untuk "menyegel" objek, mencegah penambahan properti baru. Pada saat yang sama, properti yang ada dapat diubah.

▍ Contoh

Kami "menyegel" objek, yang tidak akan memungkinkan kami untuk menambahkan properti baru ke dalamnya, tetapi akan memungkinkan untuk mengubah properti yang ada.

 const sealedObject = { name: 'Robert' } Object.seal(sealedObject); sealedObject.name = 'Bob'; sealedObject.wearsWatch = true; //  sealedObject   : { name: 'Bob' } 

Object.assign ()

Metode Object.assign () memungkinkan Anda untuk menggabungkan objek dengan menyalin properti dari satu objek ke objek lainnya. Bahkan, efek yang sama dapat dicapai dengan menggunakan operator ekspansi yang dijelaskan di atas, sehingga metode ini dapat sepenuhnya ditiadakan. Perlu dicatat bahwa metode ini, seperti operator ekstensi, tidak melakukan kloning objek yang mendalam. Jika Anda membutuhkan alat yang siap pakai untuk kloning objek yang mendalam - lihat alat-alat perpustakaan Lodash .

▍ Contoh

Mari kita buat satu dari dua objek.

 const firstObject = { firstName: 'Robert' } const secondObject = { lastName: 'Cooper' } const combinedObject = Object.assign(firstObject, secondObject); //      combinedObjec : { firstName: 'Robert', lastName: 'Cooper' } 

Ringkasan

Pada artikel ini, kami berbicara tentang metode array dan objek yang berguna dalam JavaScript. Banyak metode yang dibahas di sini mengembalikan array atau objek baru. Ini memungkinkan untuk menggabungkan mereka ke dalam rantai. Metode ini tidak mengubah data sumber, yang sangat penting dalam pengembangan Bereaksi. Selain itu, penggunaan metode ini, dalam sebagian besar kasus, memungkinkan Anda untuk meninggalkan loop seperti for while .

Pembaca yang budiman! Metode array dan objek apa dalam JavaScript yang paling sering Anda gunakan?