Komposisi fungsi dalam javascript dengan array.prototype.reduceright

Pada tahun -tahun kebelakangan ini, pengaturcaraan berfungsi di JavaScript telah menjadi semakin popular. Walaupun beberapa prinsip yang sering diterbitkan (seperti invarians) memerlukan penyelesaian runtime, pemprosesan fungsi kelas pertama bahasa membuktikan sokongannya untuk kod kompos yang didorong oleh primitif asas ini. Sebelum memperkenalkan cara menggabungkan fungsi secara dinamik dari fungsi lain, mari kita semak semula.

mata utama

Kombinasi fungsi dalam JavaScript boleh membuat fungsi kompleks dengan menggabungkan fungsi yang lebih mudah, dengan itu meningkatkan kebolehgunaan semula dan modulariti kod. Pendekatan ini memudahkan pemahaman kod, debugging, dan ujian, dan menggalakkan prinsip "jangan ulangi diri" (kering) dan mengurangkan kelebihan.
Fungsi pesanan maju (boleh mengambil satu atau lebih fungsi sebagai parameter, atau mengembalikan satu fungsi sebagai hasilnya) adalah bahagian utama kombinasi fungsi dalam JavaScript. Mereka digunakan untuk membuat fungsi baru dengan menggabungkan fungsi sedia ada.
JavaScript mengendalikan fungsi sebagai nilai, membolehkan gabungan mudah pekerjaan yang lebih besar, konteks. Menggunakan fungsi pesanan yang lebih tinggi menghasilkan pemisahan definisi dan panggilan mereka. Ini boleh membebaskan pemaju dari kekangan hierarki yang ketat yang dikenakan oleh pengaturcaraan berorientasikan objek.
Kombinasi fungsi boleh digunakan dengan kerangka JavaScript seperti React atau Vue. Dalam React, menggabungkan komponen untuk membina antara muka pengguna yang kompleks adalah corak yang sama. Begitu juga, sistem Mixin Vue boleh dianggap sebagai satu bentuk kombinasi fungsi.

Apakah fungsi?

Malah, fungsi adalah prosedur

yang membolehkan pelaksanaan satu set langkah -langkah penting untuk melakukan kesan sampingan atau nilai pulangan. Contohnya:

Apabila fungsi ini dipanggil dengan objek dengan Name dan LastName Properties, getfullName mengembalikan rentetan yang mengandungi dua nilai yang sepadan:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Perlu diperhatikan bahawa sejak ES2015, JavaScript kini menyokong

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Fungsi Arrow

sintaks:

Memandangkan fungsi getfullName kami mempunyai 1 (iaitu parameter tunggal) dan hanya mempunyai satu pernyataan kembali, kami dapat mempermudah ungkapan ini:

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

Walaupun kaedah ketiga -tiga ungkapan ini berbeza, mereka semua mencapai tujuan yang sama pada akhirnya:

const getFullName = person => `${person.firstName} ${person.surname}`;

Buat fungsi yang dipanggil getfullName yang boleh diakses melalui nama harta.

• menerima orang parameter.
• Mengembalikan rentetan yang dikira yang mengandungi person.firstname dan person.lastname, dipisahkan oleh ruang.

menggabungkan fungsi melalui nilai pulangan

Selain memberikan nilai pulangan fungsi kepada pengisytiharan (mis. Const Person = getPerson ();), kita juga boleh menggunakannya untuk mengisi parameter fungsi lain, atau secara amnya memberikan nilai di mana JavaScript membenarkannya. Katakan kami mempunyai fungsi yang melaksanakan kesan sampingan pembalakan dan sessionStorage:

kita boleh melakukan operasi ini pada nilai pulangan getperson menggunakan panggilan bersarang:

const log = arg => {
  console.log(arg);
  return arg;
};

const store = arg => {
  sessionStorage.setItem('state', JSON.stringify(arg));
  return arg;
};

const getPerson = id => id === 'homer'
  ? ({ firstName: 'Homer', surname: 'Simpson' })
  : {};

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Memandangkan parameter yang diperlukan perlu diberikan kepada fungsi mengikut cara ia dipanggil, fungsi paling dalam akan dipanggil terlebih dahulu. Oleh itu, dalam contoh di atas, nilai pulangan GetPerson akan diserahkan kepada log, dan nilai pulangan log akan dikemukakan ke kedai. Dengan menggabungkan panggilan fungsi untuk membina kenyataan, kita akhirnya boleh membina algoritma kompleks dari blok bangunan atom, tetapi bersarang panggilan ini boleh menjadi sukar untuk dikendalikan;

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

bernasib baik, kita boleh menggunakan pelaksanaan umum yang elegan: Memudahkan pelbagai fungsi ke dalam fungsi pesanan yang lebih tinggi.

array kumulatif menggunakan array.prototype.reduce

Kaedah mengurangkan prototaip array

mengambil contoh array dan mengumpulkannya sebagai satu nilai. Jika kita mahu menyimpulkan array nombor, kita boleh menggunakan kaedah berikut:

Dalam segmen kod ini, Nombor. Reduce menerima dua parameter: fungsi panggil balik yang akan dipanggil pada setiap lelaran, dan nilai awal jumlah parameter yang diluluskan ke fungsi panggilan balik; lulus lelaran seterusnya kepada jumlah keseluruhan. Untuk menguraikan lagi ini dengan mengkaji panggilan di atas kepada jumlah:

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

fungsi panggil balik kami akan dijalankan 5 kali

• Oleh kerana kami memberikan nilai awal, jumlahnya akan menjadi 0 pada panggilan pertama
• Panggilan pertama akan kembali 0 2, menyebabkan jumlahnya diselesaikan hingga 2 pada panggilan kedua
• Hasil yang dikembalikan oleh panggilan berikutnya 2 3 ini akan diberikan kepada jumlah parameter dalam panggilan ketiga, dan lain -lain
Walaupun fungsi panggil balik menerima dua parameter lain, yang mewakili indeks semasa dan contoh array yang memanggil array.prototype.reduce, dua yang pertama adalah yang paling kritikal dan biasanya dipanggil:

akumulator - Nilai yang dikembalikan oleh fungsi panggil balik lelaran terakhir. Dalam lelaran pertama, ini menyelesaikan nilai awal, dan jika tiada nilai awal ditentukan, ia menyelesaikan item pertama dalam array.

• CurrentValue - Nilai array lelaran semasa;
menggabungkan fungsi menggunakan array.prototype.reduce

Sekarang kita memahami cara memudahkan array ke dalam nilai tunggal, kita boleh menggunakan kaedah ini untuk menggabungkan fungsi sedia ada ke dalam fungsi baru:

Perhatikan bahawa kami menggunakan sintaks parameter REST (...) untuk membuang beberapa parameter ke dalam array, supaya pengguna tidak perlu membuat contoh array baru untuk setiap tapak panggilan. Compose juga mengembalikan fungsi lain, yang menjadikan menyusun fungsi pesanan yang lebih tinggi yang menerima nilai awal (inisial). Ini adalah penting kerana kita boleh menggabungkan fungsi yang baru dan boleh diguna semula tanpa memanggil mereka sebelum perlu;

const getFullName = person => `${person.firstName} ${person.surname}`;

Jadi bagaimana kita menggabungkan fungsi lain ke dalam fungsi pesanan yang lebih tinggi?

dalam kod ini:

• Perisytiharan orang akan menyelesaikannya {firstName: 'Homer', Insiden: 'Simpson'}
• perwakilan orang di atas akan dikeluarkan ke konsol penyemak imbas
• orang akan bersiri ke JSON dan kemudian menulis sessionstorage
di bawah kunci orang

kepentingan pesanan panggilan

Keupayaan untuk menggabungkan bilangan fungsi menggunakan utiliti penyusunan untuk menjadikan kod kami lebih ringkas dan abstrak. Walau bagaimanapun, kita boleh menyerlahkan satu titik dengan mengkaji semula panggilan sebaris:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

orang mungkin merasa semulajadi untuk menyalinnya dengan fungsi Compose kami:

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Dalam kes ini, mengapa Fnested (4) === fcomposed (4) menyelesaikan palsu? Anda mungkin ingat bahawa saya menekankan bagaimana untuk mentafsir panggilan dalaman di tempat pertama, jadi dikarang (g, h, i) sebenarnya bersamaan dengan x = & gt; pulangan fcomposed 9. Kita hanya boleh membalikkan urutan panggilan varian bersarang atau gabungan F, tetapi diberi kekhususan yang dikarang untuk mencerminkan panggilan bersarang, kita memerlukan cara untuk mengurangkan fungsi dalam urutan kanan ke kiri; .Reduceright menyediakan ini:

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

Dengan pelaksanaan ini, kedua -dua fnested (4) dan fcomposed (4) menyelesaikan hingga 10. Walau bagaimanapun, fungsi getpersonwithSideFects kami kini tidak betul; Ternyata kaedah sebelumnya telah biasa, tetapi sering dipanggil paip :

const getFullName = person => `${person.firstName} ${person.surname}`;

Dengan menggunakan fungsi paip kami, kami akan menyimpan pesanan kiri-ke-kanan yang diperlukan oleh getPersonWithSideefefects. Pipelin telah menjadi komponen utama RXJS untuk alasan yang digariskan di atas;

Kombinasi fungsi sebagai alternatif kepada warisan

kita telah melihat dalam contoh sebelumnya bagaimana untuk menggabungkan pelbagai fungsi yang tidak terhingga ke unit yang lebih besar, boleh diguna semula, berorientasikan sasaran. Satu lagi manfaat kombinasi fungsi adalah untuk membebaskan diri dari ketegaran graf warisan. Katakan kita mahu menggunakan semula tingkah laku pembalakan dan penyimpanan berdasarkan hierarki kelas;

const log = arg => {
  console.log(arg);
  return arg;
};

const store = arg => {
  sessionStorage.setItem('state', JSON.stringify(arg));
  return arg;
};

const getPerson = id => id === 'homer'
  ? ({ firstName: 'Homer', surname: 'Simpson' })
  : {};

Selain daripada panjang, masalah langsung dengan kod ini adalah bahawa kita menyalahgunakan warisan untuk melaksanakan penggunaan semula; Masalah yang berpotensi lebih serius ialah menamakan konflik:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Jika kita mahu meniru MyState dan memanggil kaedah kedainya, kita tidak akan memanggil kaedah kedai yang boleh disimpan melainkan kita menambah panggilan ke super.store () di mystate.prototype.store, tetapi ini akan di negeri ini mewujudkan yang ketat , gandingan rapuh antara storable. Ini boleh dikurangkan menggunakan sistem entiti atau corak dasar, seperti yang saya telah memperkenalkan di tempat lain, tetapi walaupun kelebihan mewarisi taksonomi sistem ekspresi yang lebih luas, kombinasi fungsi menyediakan cara yang rata dan ringkas untuk berkongsi tanpa kebergantungan pada kod untuk nama kaedah.

Ringkasan

JavaScript mengendalikan fungsi sebagai nilai dan menjana ekspresi mereka, menjadikannya mudah untuk menggabungkan pekerjaan yang lebih besar, konteks. Berfikir tentang tugas ini sebagai kumulatif array fungsi menghapuskan keperluan untuk panggilan bersarang yang penting, dan menggunakan fungsi pesanan yang lebih tinggi mengakibatkan pemisahan definisi dan panggilan mereka. Selain itu, kita boleh menyingkirkan kekangan hierarki yang ketat yang dikenakan oleh pengaturcaraan berorientasikan objek.

FAQs Mengenai Kombinasi Fungsi dalam JavaScript

Apakah maksud gabungan fungsi dalam JavaScript?

Kombinasi fungsi adalah konsep asas dalam JavaScript dan pengaturcaraan fungsional yang besar. Ia membolehkan pemaju untuk mewujudkan fungsi kompleks dengan menggabungkan fungsi yang lebih mudah, dengan itu meningkatkan kebolehgunaan semula dan modulariti kod mereka. Pendekatan ini menjadikan kod lebih mudah difahami, debug dan ujian. Ia juga menggalakkan prinsip "jangan ulangi diri" (kering) untuk mengurangkan kelebihan dalam asas kod.

Bagaimanakah kombinasi fungsi berkaitan dengan konsep fungsi pesanan lebih tinggi?

Fungsi pesanan tinggi adalah bahagian utama kombinasi fungsi dalam JavaScript. Fungsi pesanan yang lebih tinggi adalah fungsi yang boleh mengambil satu atau lebih fungsi sebagai parameter, mengembalikan fungsi sebagai hasilnya, atau melaksanakan kedua-dua operasi pada masa yang sama. Dalam kombinasi fungsi, kita sering menggunakan fungsi pesanan yang lebih tinggi untuk mewujudkan fungsi baru dengan menggabungkan fungsi sedia ada.

Bolehkah anda memberikan contoh praktikal kombinasi fungsi dalam JavaScript?

Sudah tentu, mari kita pertimbangkan contoh mudah. Katakan kita mempunyai dua fungsi, dua kali ganda dan kenaikan. Double mengambil nombor dan mendarabkannya dengan 2, dan kenaikan menambah 1 ke inputnya. Kita boleh menggabungkan kedua -dua fungsi ini untuk mewujudkan fungsi baru yang menggandakan nombor dan meningkatkan hasilnya.

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Apakah perbezaan antara gabungan fungsi dan rantai fungsi dalam JavaScript?

Gabungan fungsi dan rantai fungsi adalah dua cara yang berbeza untuk menggabungkan fungsi dalam JavaScript. Gabungan fungsi melibatkan lulus output satu fungsi sebagai input kepada yang lain. Sebaliknya, rantaian fungsi melibatkan memanggil pelbagai fungsi dalam rangka, di mana setiap fungsi memanggil hasil fungsi sebelumnya. Walaupun kedua -dua teknik dapat mencapai hasil yang sama, kombinasi fungsi lebih selaras dengan prinsip -prinsip pengaturcaraan berfungsi.

Bagaimanakah gabungan fungsi membantu dengan ujian kod dan debugging?

Kombinasi fungsi memudahkan penciptaan fungsi tulen kecil yang hanya melakukan satu perkara dan melakukannya dengan baik. Fungsi -fungsi ini lebih mudah untuk diuji dan debug daripada fungsi monolitik yang besar. Oleh kerana setiap fungsi adalah bebas, anda boleh mengujinya secara individu tanpa bimbang tentang kod lain. Ini menjadikannya lebih mudah untuk mencari dan memperbaiki pepijat dalam kod.

Adakah kombinasi fungsi mungkin dengan fungsi tak segerak dalam JavaScript?

Ya, kombinasi fungsi boleh digunakan dengan fungsi asynchronous dalam JavaScript. Walau bagaimanapun, ini memerlukan lebih banyak perhatian, seperti yang anda perlukan untuk memastikan bahawa output fungsi tak segerak diluluskan dengan betul ke fungsi seterusnya sebagai input. Ini biasanya melibatkan penggunaan janji atau async/menunggu sintaks.

Apakah kelemahan atau cabaran yang berpotensi menggunakan kombinasi fungsi dalam JavaScript?

Walaupun terdapat banyak manfaat untuk berfungsi kombinasi, ia juga boleh memperkenalkan kerumitan jika digunakan secara tidak wajar. Sebagai contoh, panggilan fungsi yang sangat bersarang boleh sukar dibaca dan difahami. Selain itu, jika fungsi gabungan bukan fungsi tulen (iaitu mereka mempunyai kesan sampingan), ia boleh membawa kepada hasil yang tidak dijangka. Oleh itu, adalah penting untuk menggunakan kombinasi fungsi dengan berhati -hati dan menggabungkannya dengan amalan pengekodan yang baik.

Bagaimanakah kombinasi fungsi berkaitan dengan konsep kari dalam JavaScript?

Curriization adalah teknik dalam JavaScript di mana fungsi dengan pelbagai parameter ditukar menjadi satu siri fungsi, setiap fungsi hanya mempunyai satu parameter. Currying boleh digunakan dengan kombinasi fungsi untuk mewujudkan fungsi yang lebih fleksibel dan boleh diguna semula. Malah, beberapa perpustakaan utiliti seperti Lodash dan Ramda menyediakan kedua -dua fungsi kari dan kombinatorial.

Adakah kombinasi fungsi berguna dengan kerangka JavaScript seperti React atau Vue?

Ya, kombinasi fungsi boleh digunakan dengan kerangka JavaScript seperti React atau Vue. Malah, dalam React, menggabungkan komponen untuk membina antara muka pengguna yang kompleks adalah corak yang sama. Begitu juga, sistem Mixin Vue boleh dianggap sebagai satu bentuk kombinasi fungsi.

Perpustakaan atau alat apa yang ada untuk membantu kombinasi fungsi dalam JavaScript?

Ya, terdapat beberapa perpustakaan yang menyediakan utiliti untuk kombinasi fungsi dalam JavaScript. Beberapa perpustakaan popular termasuk Lodash, Ramda, dan Redux (untuk pengurusan negeri). Perpustakaan ini menyediakan fungsi seperti menyusun atau paip, menjadikan fungsi menggabungkan lebih mudah dan lebih cekap.

Atas ialah kandungan terperinci Komposisi fungsi dalam javascript dengan array.prototype.reduceright. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!