Rumah  >  Artikel  >  hujung hadapan web  >  Contoh lima fungsi JavaScript yang biasa digunakan (perkongsian ringkasan)

Contoh lima fungsi JavaScript yang biasa digunakan (perkongsian ringkasan)

WBOY
WBOYke hadapan
2022-10-01 08:00:262160semak imbas

Artikel ini membawakan anda pengetahuan yang berkaitan tentang JavaScript terutamanya memperkenalkan lima fungsi biasa dan contohnya, termasuk pemasa, kawalan proses, aplikasi penutupan dan parameter baki yang berkaitan serta isu pengkapsulan sekunder fungsi, mari kita lihat di bawah saya harap ia akan membantu semua orang.

Contoh lima fungsi JavaScript yang biasa digunakan (perkongsian ringkasan)

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

1 🎜 >

Untuk melaksanakan pemasa titik, keperluannya ialah:

1 Dari

hingga start (termasuk end dan start), setiap 100 milisaat end nombor. , setiap Kenaikan nombor ialah 1console.log

2 Objek yang dikembalikan perlu mengandungi kaedah

untuk menghentikan operasi pemasaan cancel

3 Nombor pertama perlu dikeluarkan dengan segera

function count(start, end) {
    console.log(start++); 
    let timer = setInterval(() => {
        if (start <= end) {
            console.log(start++);
        }
    }, 100);
    return {
        cancel: () => {
            clearInterval(timer);
        },
    };}
Nombor pertama adalah keluaran serta-merta Dalam

, console.log(start ) ialah keluaran dahulu dan kemudian meningkat sebanyak 1. Gunakan start pemasa selepas

, setInterval fungsi count keluar daripada return, dan di dalam cancel ialah operasi untuk mengosongkan pemasa (merujuk kepada cancel dalam timer fungsi diisytiharkan pembolehubah), pengetahuan count penutupan digunakan di sini.

ialah fungsi penutupan, yang boleh mengakses pembolehubah cancel dalam fungsi count Pada masa ini, ini timer tidak akan digunakan oleh timerJSsampah. mekanisme pengumpulan Jelas (akan tahan kekal dalam ingatan walaupun fungsi dimusnahkan), itulah sebabnya pemasa countjelascancel boleh dipanggil secara luaran. timer

Penutupan merujuk kepada fungsi yang mempunyai akses kepada pembolehubah setempat dalam skop fungsi lain. Fungsi yang diisytiharkan dalam fungsi dipanggil fungsi penutupan. Dan fungsi dalam sentiasa boleh mengakses parameter dan pembolehubah yang diisytiharkan dalam fungsi luar di mana ia terletak, walaupun selepas fungsi luarnya dikembalikan (akhir hayat).

2. Kawalan proses

melaksanakan fungsi

Hubungan antara parameter fizzBuzz dan nilai pulangan adalah seperti berikut: num 1. Jika boleh digunakan oleh 3 dan Boleh dibahagi dengan 5, kembalikan rentetan
num 2. Jika fizzbuzz boleh dibahagi sama rata dengan 3, kembalikan rentetan
num 3. Jika fizz boleh dibahagikan sama rata dengan 5, kembalikan rentetan
num 4. Jika parameter kosong atau tidak daripada jenis buzz, kembalikan
Number 5. Dalam kes lain, kembalikan parameter false
num Contoh:

ini Ia adalah penghakiman cawangan mudah:
输入:15输出:fizzbuzz

3. Aplikasi penutupan
function fizzBuzz(num) {
    if (!num || typeof num !== "number") return false;
    
    if (num % 3 === 0 && num % 5 === 0) return "fizzbuzz";

    if (num % 3 === 0) return "fizz";

    if (num % 5 === 0) return "buzz";

    return num;}

melaksanakan fungsi

memanggil, syarat berikut dipenuhi:

1. Kembalikan tatasusunan fungsi makeClosures , panjangnya sama dengan
result 2. Jalankan fungsi arr dalam
, iaitu, result, hasilnya sama seperti iresult[i]()fn(arr[i]) Contoh:

Penyelesaian:
var arr = [1, 2, 3];var fn = function (x) {
    return x * x;};var result = makeClosures(arr, fn);result[1]() === fn(arr[1]) ? console.log("yes") === 4 : console.log("no"); // yes

Soalan ini mungkin kelihatan mengelirukan pada pandangan pertama, tetapi anda boleh mencari penyelesaian dengan mudah jika anda menyikatnya dari atas ke bawah:
function makeClosures(arr, fn) {
    const result = []
    arr.forEach(item=>{
        result.push(function(){
            return fn(item)
        })
    })
    return result}

    Kembalikan tatasusunan
  • makeClosuresSetiap elemen dalam tatasusunan ialah fungsi
  • dan hasil fungsi ini mesti konsisten dengan hasil panggilan
  • menggunakan elemen yang sepadan dalam
  • sebagai parameterarrfn
  • 4 Argumen Baki parameter

Fungsi

boleh menerima 1 atau lebih parameter. Sila laksanakan fungsi

untuk mengembalikan hasil penambahan semua parameter panggilan. Parameter ujian soalan ini adalah semua jenis useArguments dan tidak perlu mempertimbangkan penukaran parameter. useArgumentsNumber

Penyelesaian: Fungsi
输入:1, 2, 3, 4输出:10

boleh terus mengakses pembolehubah
function useArguments() {
    return [...arguments].reduce((a, b) => a + b);}
Pembolehubah ini ialah

tatasusunan pseudoarguments yang mengandungi semua parameter yang diterima oleh. fungsi. (Bukan semua kaedah tatasusunan). Jadi saya mula-mula menggunakan

penstrukturan untuk menukar

kepada tatasusunan sebenar, dan kemudian memanggil kaedah penjumlahan ... tatasusunan itu untuk dijumlahkan. Kaedah argumentsreduce

secara berurutan melaksanakan fungsi

yang disediakan oleh anda pada setiap elemen dalam tatasusunan Setiap kali reduce() dijalankan, hasil pengiraan elemen sebelumnya akan dihantar sebagai parameter , dan akhirnya Hasilnya diringkaskan menjadi nilai pulangan tunggal. reducerreducer

Array.prototype.reduce(callbackFn, initialValue)
Parameter:

  • Fungsi "callbackFn", mengandungi empat parameter:

    • previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]
    • currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]
    • currentIndex:数组中正在处理的元素的索引。若指定了初始值
    • initialValue,则起始索引号为 0,否则从索引 1 起始。
    • array:用于遍历的数组。
  • initialValue 可选
    作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;否则 previousValue 将使用数组第一个元素,而 currentValue 将使用数组第二个元素。

五、二次封装函数

实现函数 partialUsingArguments,调用之后满足如下条件:
1、返回一个函数 result
2、调用 result 之后,返回的结果与调用函数 fn 的结果一致
3、fn 的调用参数为 partialUsingArguments 的第一个参数之后的全部参数以及 result 的调用参数

解:

function partialUsingArguments(fn) {
  const arr = [].slice.call(arguments,1)
  return function (...arr2) { // ...arr2表示用arr2接收所有参数,arr2是一个数组
      return fn(...arr,...arr2)
  }}

第一个arr数组表示的是partialUsingArguments接收的第一个参数之后的全部参数数组。

因为arguments是伪数组,不具有slice方法,所以这里通过随便一个数组(我选的是空数组[])来调用slice,然后通过call修改调用的这个slicethis指向,使其指向到arguments,这样就相当于是在arguments上使用slice方法。

call修改函数this指向并立即调用该函数,call第一个参数表示需要修改的this指向,之后的所有参数都会作为原函数的参数传递到原函数中。

slice(begin,end) 方法能切割数组,返回一个新的数组对象,这一对象是一个由 beginend 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
不加end参数表示从 begin一直切割到最后。

【相关推荐:javascript视频教程web前端

Atas ialah kandungan terperinci Contoh lima fungsi JavaScript yang biasa digunakan (perkongsian ringkasan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam