Kaedah Array Tidak Takrader: Tulis Kod JavaScript Bersih

Artikel ini mengikuti Panduan Penugasan dan Mutasi Variabel JavaScript, dan membincangkan masalah dan penyelesaian yang dibawa oleh kaedah array yang bermutasi. Banyak kaedah array JavaScript secara langsung mengubah suai array asal, yang dengan mudah boleh membawa kepada pepijat yang sukar untuk dikesan dalam aplikasi besar. Tetapi tidak semua kaedah seperti ini. Untuk mengelakkan mutasi yang tidak dijangka, kita boleh menulis kaedah array kita sendiri yang mengembalikan objek array baru dan bukannya mengubah suai array asal. Artikel ini akan meliputi versi kaedah yang tidak berubah seperti

, Array.prototype.slice(), Array.prototype.concat(), Array.prototype.map(), Array.prototype.filter(), pop, dan push. Menggunakan kaedah array yang tidak berubah boleh menulis lebih jelas dan lebih mudah untuk mengekalkan kod untuk mengelakkan pepijat yang disebabkan oleh kesan sampingan. shift unshift reverse mutasi array dalam javascript splice

tatasusunan javascript adalah objek dan oleh itu boleh diubahsuai. Banyak kaedah array terbina dalam secara langsung mengubah suai array itu sendiri, yang melanggar amalan terbaik dalam pengaturcaraan. Contoh berikut menunjukkan masalah yang berpotensi:

Kod ini nampaknya normal. Di permukaan, ia berfungsi:

const numbers = [1,2,3];
const countdown = numbers.reverse();

tetapi kaedah

juga mengubahsuai array numbers, yang bukan hasil yang kita mahukan: countdown numbers

Apa yang lebih buruk ialah kedua -dua pembolehubah merujuk kepada array yang sama, jadi sebarang perubahan berikutnya kepada salah satu tatasusunan akan menjejaskan yang lain. Jika kita menggunakan kaedah

countdown // [3, 2, 1]

untuk menambah elemen dengan nilai 0 hingga akhir array

, array reverse() juga akan mengubah cara yang sama (kerana mereka semua merujuk kepada array yang sama): numbers

numbers // [3, 2, 1]

Kesan sampingan ini mudah diabaikan dalam aplikasi besar dan membawa kepada pepijat yang sukar untuk dilancarkan.

Array.prototype.push() countdown kaedah array variable dalam javascript numbers

countdown.push(0)
countdown // [3, 2, 1, 0]
numbers // [3, 2, 1, 0]

Di samping

, terdapat banyak kaedah array lain yang menyebabkan mutasi ini:

reverse()

• Array.prototype.pop()
• Array.prototype.push()
• Array.prototype.shift()
Sebaliknya, beberapa kaedah tidak mengubah suai array asal, tetapi mengembalikan array baru:
• • Array.prototype.slice()
  • Array.prototype.concat()
  • Array.prototype.map()
  • Kaedah ini mengembalikan array baru berdasarkan tindakan yang dilakukan. Sebagai contoh, kaedah Array.prototype.filter() boleh digunakan untuk menggandakan semua nombor dalam array:

  Sekarang, jika kita menyemak array map(), kita dapat melihat bahawa ia tidak terjejas oleh panggilan kaedah:

  const numbers = [1,2,3];
  const countdown = numbers.reverse();

  Mengapa beberapa kaedah mengubah suai tatasusunan, sementara yang lain tidak? Nampaknya tidak ada alasan yang jelas untuk ini, tetapi kaedah baru -baru ini ditambah cenderung menjadikannya tidak berubah. Mungkin sukar untuk diingat kaedah mana yang akan mengubah suai array dan kaedah mana yang tidak akan mengubah suai array. numbers

  countdown // [3, 2, 1]

  kaedah array yang tidak berubah: Betulkan masalah mutasi

  Kami telah menentukan bahawa mutasi boleh menyebabkan masalah, dan banyak kaedah array akan menyebabkan mutasi. Mari lihat bagaimana untuk mengelakkan menggunakannya. Tidak sukar untuk menulis beberapa fungsi yang mengembalikan objek array baru dan bukannya mengubah suai array asal. Fungsi -fungsi ini adalah kaedah array yang tidak berubah. Kerana kita tidak akan mengubah suai

  , fungsi -fungsi ini selalu mengambil array itu sendiri sebagai parameter pertama.

  Array.prototype

  Mari mulakan dengan menulis fungsi pop baru yang mengembalikan salinan array asal tetapi tidak mengandungi item terakhir. Perhatikan bahawa mengembalikan nilai yang muncul dari akhir array:

  pop Fungsi ini menggunakan Array.prototype.pop() untuk mengembalikan salinan array, tetapi membuang item terakhir. Parameter kedua -1 bermaksud "hentikan kepingan, 1 kedudukan sebelum akhir". Kita dapat melihat bagaimana ia berfungsi dalam contoh berikut:

  numbers // [3, 2, 1]

  Array.prototype.slice()

  countdown.push(0)
  countdown // [3, 2, 1, 0]
  numbers // [3, 2, 1, 0]

  Seterusnya, mari buat fungsi push yang akan mengembalikan array baru, tetapi tambah elemen baru pada akhir:

  Ini mewujudkan salinan array menggunakan pengendali lanjutan. Ia kemudian menambah nilai yang disediakan sebagai parameter kedua pada akhir array baru. Berikut adalah contoh: push()

  3

  const numbers = [1,2,3];
  const evens = numbers.map(number => number * 2);

  kita boleh menulis alternatif ke

  dan

  sama:

  numbers // [1, 2, 3]

  Untuk fungsi shift kami, kami hanya memotong elemen pertama dari array dan bukannya elemen terakhir. Ini dapat dilihat dalam contoh berikut: unshift

  kaedah

  kami akan mengembalikan array baru dan menambahkan nilai baru ke permulaan array: Array.prototype.shift() Array.prototype.unshift() Pengendali

  yang dilanjutkan membolehkan kami meletakkan nilai dalam array dalam apa -apa perintah. Kami hanya perlu meletakkan nilai baru di hadapan salinan asal array. Kita dapat melihat bagaimana ia berfungsi dalam contoh berikut:

  const pop = array => array.slice(0,-1);

  shift()

  const food = ['?','?','?','?'];
  pop(food) // ['?','?','?']

  unshift()

  Sekarang mari kita cuba menulis alternatif kepada kaedah Array.prototype.reverse(). Ia akan mengembalikan salinan array yang diatur dalam urutan terbalik, dan bukannya mengubah suai array asal:

  const numbers = [1,2,3];
  const countdown = numbers.reverse();

  Kaedah ini masih menggunakan kaedah Array.prototype.reverse(), tetapi terpakai pada salinan array asal yang kami buat menggunakan pengendali lanjutan. Tidak ada masalah untuk mengubahsuai objek selepas ia dicipta, dan itulah yang kita lakukan di sini. Kita dapat melihat bagaimana ia berfungsi dalam contoh berikut:

  countdown // [3, 2, 1]

  splice

  Akhir sekali, mari kita berurusan dengan Array.prototype.splice(). Ini adalah fungsi yang sangat umum, jadi kami tidak akan menulis semula fungsinya (walaupun ia adalah latihan yang menarik). Sebaliknya, kami akan memberi tumpuan kepada dua kegunaan utama slice: memadam item dari tatasusunan dan memasukkan item ke dalam tatasusunan.

  Padam item array

  mari kita mulakan dengan fungsi yang akan mengembalikan array baru, tetapi padamkan item pada indeks yang diberikan:

  numbers // [3, 2, 1]

  ini menggunakan Array.prototype.slice() untuk memotong array dengan separuh - kedua -dua belah item yang kita mahu padam. Slice pertama mengembalikan array baru, menyalin unsur -unsur array asal sehingga indeks yang ditentukan sebagai indeks parameter. Slice kedua mengembalikan array yang mengandungi unsur -unsur yang ingin kita padamkan, sehingga ke akhir array asal. Kami kemudian menggunakan pengendali lanjutan untuk meletakkan mereka semua dalam array baru. Kita boleh menyemak sama ada ini berfungsi dengan cuba memadam item dengan indeks 2 dalam array food di bawah:

  countdown.push(0)
  countdown // [3, 2, 1, 0]
  numbers // [3, 2, 1, 0]

  Tambah item array

  Akhirnya, mari kita tulis fungsi yang akan mengembalikan array baru dan masukkan nilai baru pada indeks tertentu:

  const numbers = [1,2,3];
  const evens = numbers.map(number => number * 2);

  Ini sama dengan cara fungsi remove() berfungsi. Ia mewujudkan dua keping array, tetapi kali ini termasuk unsur -unsur di indeks yang disediakan. Apabila kita mengumpul semula kedua -dua keping bersama -sama, kita memasukkan nilai yang disediakan sebagai parameter di antara mereka. Kami boleh menyemak sama ada ini berfungsi dengan cuba memasukkan emoji cupcake ke tengah -tengah array food kami:

  numbers // [1, 2, 3]

  Sekarang kita mempunyai satu set kaedah array yang tidak berubah yang tidak mengubah suai array asal. Anda boleh menyimpannya di satu tempat dan menggunakannya dalam projek anda. Anda boleh ruang nama mereka dengan mengambilnya sebagai kaedah objek tunggal, atau menggunakannya seperti yang diperlukan. Kaedah ini sepatutnya mencukupi untuk kebanyakan operasi array. Jika anda perlu melakukan perkara yang berbeza, ingat Peraturan Emas: pertama gunakan pengendali lanjutan untuk membuat salinan array asal. Kemudian, segera gunakan sebarang kaedah pembolehubah untuk salinan ini.

  Kesimpulan

  Dalam artikel ini, kita mengkaji bagaimana JavaScript menjadikan kehidupan sukar dengan mengubah suai kaedah array yang mengubah array asal sebagai sebahagian daripada bahasa. Kami kemudian menulis kaedah array kami sendiri untuk menggantikan fungsi ini.

  Apakah kaedah array lain yang boleh anda fikirkan yang boleh mendapat manfaat daripada mempunyai versi yang tidak berubah?

  Soalan Lazim untuk membuat dan menggunakan kaedah array yang tidak berubah dalam JavaScript

  Apakah konsep invarians dalam JavaScript?

  Invariance adalah konsep asas dalam pengaturcaraan, yang merujuk kepada keadaan objek yang tidak dapat diubah suai selepas ia dibuat. Dalam JavaScript, invariance tidak dikuatkuasakan secara lalai. Walau bagaimanapun, ia adalah konsep yang kuat yang dapat membantu anda menulis lebih banyak diramalkan dan lebih mudah untuk mengekalkan kod. Ia amat berguna dalam pengaturcaraan berfungsi, di mana invarians menghalang kesilapan dan kerumitan yang disebabkan oleh perubahan keadaan.

  Kenapa saya harus menggunakan kaedah array yang tidak berubah dalam javascript?

  Menggunakan kaedah array yang tidak berubah dalam JavaScript boleh menulis lebih jelas dan lebih mudah untuk mengekalkan kod. Oleh kerana kaedah ini tidak mengubah suai array asal, mereka boleh menghalang kesan sampingan yang boleh menyebabkan kesilapan. Ini amat penting dalam pangkalan kod besar atau ketika berurusan dengan struktur data yang kompleks. Kaedah yang tidak berubah mengembalikan array baru, sementara array asal tetap tidak berubah. Ini menjadikan kod anda lebih diramalkan dan lebih mudah untuk debug.

  Apakah beberapa contoh kaedah array yang tidak berubah dalam JavaScript?

  JavaScript menyediakan beberapa kaedah array yang tidak berubah yang tidak mengubah array asal. Beberapa contoh termasuk map(), filter(), reduce(), dan concat() kaedah. Kaedah map() mencipta array baru yang mengandungi hasil fungsi yang disediakan untuk setiap elemen dalam array. Kaedah filter() mencipta array baru yang mengandungi semua elemen ujian yang dilaksanakan oleh fungsi yang disediakan. Kaedah reduce() menggunakan fungsi untuk setiap elemen dalam penumpuk dan array untuk mengurangkannya ke satu nilai output. Kaedah concat() digunakan untuk menggabungkan dua atau lebih array dan mengembalikan array baru.

  bagaimana membuat array saya tidak berubah dalam javascript?

  JavaScript tidak menyediakan kaedah terbina dalam untuk membuat array tidak berubah. Walau bagaimanapun, anda boleh mencapai invarians dengan menggunakan kaedah yang tidak mengubah array asal (mis. map(), filter(), reduce(), dan concat()). Pendekatan lain ialah menggunakan kaedah Object.freeze(), yang menghalang penambahan sifat baru ke objek, menghalang penyingkiran sifat sedia ada, dan menghalang penghitungan, konfigurasi, atau kebolehkerjaan sifat -sifat yang ada.

  Apakah perbezaan antara kaedah yang boleh berubah dan tidak berubah dalam JavaScript?

  Perbezaan utama antara kaedah yang boleh berubah dan tidak berubah dalam JavaScript adalah bagaimana mereka mengendalikan array asal. Kaedah yang boleh berubah mengubah array asal, sementara kaedah yang tidak berubah tidak. Sebaliknya, kaedah yang tidak berubah mengembalikan array baru. Ini menjadikan kod anda lebih diramalkan dan lebih mudah untuk debug kerana ia menghalang kesan sampingan yang boleh menyebabkan kesilapan.

  Bolehkah saya menggunakan array yang tidak berubah dengan jenis data lain dalam javascript?

  Ya, anda boleh menggunakan array yang tidak berubah dengan jenis data lain dalam JavaScript. Konsep Invariance terpakai kepada semua jenis data, bukan hanya tatasusunan. Sebagai contoh, anda boleh menggunakan kaedah yang tidak berubah dengan rentetan, nombor, objek, dll. Ini dapat membantu anda menulis lebih jelas dan lebih mudah untuk mengekalkan kod.

  Adakah terdapat kesan prestasi menggunakan kaedah array yang tidak berubah?

  Menggunakan kaedah array yang tidak berubah mungkin mempunyai beberapa kesan prestasi, kerana mereka biasanya membuat array baru dan bukannya mengubah suai array asal. Ini boleh menyebabkan peningkatan memori, terutamanya dalam susunan besar. Walau bagaimanapun, dalam kebanyakan kes, manfaat menggunakan kaedah yang tidak berubah, seperti kod yang lebih jelas dan bug yang lebih sedikit, melebihi kos prestasi yang berpotensi.

  bagaimana menggunakan reduce() kaedah dalam JavaScript?

  Kaedah reduce() dalam JavaScript adalah kaedah yang tidak berubah yang menggunakan fungsi untuk setiap elemen dalam penumpuk dan array untuk mengurangkannya ke satu nilai output. Berikut adalah contoh cara menggunakannya:

  const numbers = [1,2,3];
  const countdown = numbers.reverse();

  Dalam contoh ini, kaedah reduce() mengira jumlah semua elemen dalam array.

  Apakah kaedah concat() dalam JavaScript?

  Kaedah concat() dalam JavaScript digunakan untuk menggabungkan dua atau lebih tatasusunan. Kaedah ini tidak mengubah array yang sedia ada, tetapi mengembalikan array baru. Berikut adalah contoh:

  countdown // [3, 2, 1]

  Dalam contoh ini, kaedah concat() menggabungkan array1 dan array2 ke dalam array baru array3.

  bagaimana menggunakan filter() kaedah dalam JavaScript?

  Kaedah filter() dalam JavaScript mencipta array baru yang mengandungi semua elemen ujian yang dilaksanakan oleh fungsi yang disediakan. Berikut adalah contoh cara menggunakannya:

  numbers // [3, 2, 1]

  Dalam contoh ini, kaedah filter() mencipta array baru yang mengandungi nombor yang lebih besar daripada 3.

  Atas ialah kandungan terperinci Kaedah Array Tidak Takrader: Tulis Kod JavaScript Bersih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!