Susunan JavaScript dengan mudah adalah salah satu jenis data kegemaran saya. Mereka dinamik, mudah digunakan, dan menawarkan banyak kaedah bawaan yang dapat kita manfaatkan.
Namun, semakin banyak pilihan yang anda miliki adalah lebih membingungkan untuk menentukan pilihan mana yang harus anda gunakan.
Dalam artikel ini, saya ingin membincangkan beberapa cara umum untuk menambahkan elemen ke array JavaScript.
Kaedah Push
Kaedah tatasusunan JavaScript pertama dan mungkin paling biasa yang akan anda hadapi ialah tekan () . Kaedah push () digunakan untuk menambahkan elemen ke hujung array.
Katakan anda mempunyai pelbagai elemen, setiap elemen adalah rentetan yang mewakili tugas yang perlu anda laksanakan. Adalah masuk akal untuk menambahkan item yang lebih baru pada akhir array sehingga kita dapat menyelesaikan tugas-tugas awal kita terlebih dahulu.
Mari lihat contoh dalam bentuk kod:
const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']Baiklah, jadi tolakan telah memberi kita sintaks yang bagus dan sederhana untuk menambahkan item ke akhir susunan kami.
Katakan kita mahu menambahkan dua atau tiga item sekaligus dalam senarai kita, apa yang akan kita lakukan kemudian? Ternyata, tekan () dapat menerima beberapa elemen untuk ditambahkan sekaligus.
const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']Sekarang setelah kami menambah beberapa tugas ke array kami, kami mungkin ingin mengetahui berapa banyak item yang ada dalam array kami untuk menentukan sama ada kami mempunyai terlalu banyak item.
Nasib baik, push () mempunyai nilai kembali dengan panjang array setelah elemen kami ditambahkan.
const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']Kaedah Tidak Beralih
Tidak semua tugas dibuat sama. Anda mungkin menghadapi senario di mana anda menambahkan tugas ke array anda dan tiba-tiba anda menghadapi satu yang lebih mendesak daripada yang lain.
Sudah tiba masanya untuk memperkenalkan rakan kita unshift () yang membolehkan kita menambah item pada permulaan array kita.
const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']Anda mungkin melihat dalam contoh di atas bahawa, seperti kaedah push () , unshift () mengembalikan panjang array baru untuk kita gunakan. Ini juga memberi kita kemampuan untuk menambahkan lebih dari satu elemen pada satu masa.
Kaedah Concat
Pendek kata untuk gabungan (untuk menghubungkan bersama), kaedah concat () digunakan untuk menyatukan dua (atau lebih) tatasusunan.
Sekiranya anda ingat dari atas, kaedah unshift () dan push () mengembalikan panjang array baru. concat () , sebaliknya,akan mengembalikan array yang sama sekali baru.
Ini adalah perbezaan yang sangat penting dan menjadikan concat () sangat berguna ketika anda berhadapan dengan tatasusunan yang anda tidak mahu bermutasi (seperti array yang disimpan dalam keadaan React).
Inilah rupa kes yang cukup asas dan mudah:
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] Katakan anda mempunyai pelbagai tatasusunan yang ingin anda gabungkan. Jangan bimbang, kesimpulan () ada untuk menyelamatkan hari!
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] Pengklonan dengan Concat
Ingat bagaimana saya mengatakan bahawa concat () boleh berguna apabila anda tidak mahu mengubah susunan yang ada? Mari kita lihat bagaimana kita dapat memanfaatkan konsep ini untuk menyalin kandungan satu array ke dalam array baru.
const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]Hebat! Kita pada dasarnya dapat "mengklon" array menggunakan concat () .
Tetapi ada 'gotcha' kecil dalam proses pengklonan ini. Array baru adalah "salinan cetek" dari array yang disalin. Ini bermaksud bahawa objek apa pun disalin dengan rujukan dan bukan objek sebenar.
Mari kita lihat contoh untuk menerangkan idea ini dengan lebih jelas.
const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]Walaupun kami tidak secara langsung membuat perubahan pada array asal kami, array akhirnya dipengaruhi oleh perubahan yang kami buat pada array kloning kami!
Terdapat pelbagai cara untuk melakukan "deep clone" dari array, tetapi saya akan meninggalkannya sebagai kerja rumah.
TL; DR
Apabila anda ingin menambahkan elemen ke hujung array anda, gunakan push (). Sekiranya anda perlu menambahkan elemen ke awal larik anda, cuba unshift (). Dan anda bolehtambah tatasusunan bersama menggunakan concat ().
Tentunya terdapat banyak pilihan lain untuk menambahkan elemen pada array, dan saya mengajak anda keluar dan mencari beberapa kaedah array yang lebih hebat!
Jangan ragu untuk menghubungi saya di Twitter dan beritahu saya kaedah susunan kegemaran anda untuk menambahkan elemen pada array.