Rumah > hujung hadapan web > tutorial js > Transduser: Corak komposisi fungsi yang berkuasa

Transduser: Corak komposisi fungsi yang berkuasa

Barbara Streisand
Lepaskan: 2025-01-13 14:28:12
asal
674 orang telah melayarinya

Transducer: A powerful function composition pattern

alias:: Transduser: Corak komposisi fungsi yang berkuasa
buku nota:: Transduser: 一种强大的函数组合模式

peta & penapis

Semantik peta ialah "pemetaan", yang bermaksud melakukan transformasi pada semua elemen dalam satu set sekali.

  const list = [1, 2, 3, 4, 5]

  list.map(x => x + 1)
  // [ 2, 3, 4, 5, 6 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  function map(f, xs) {
    const ret = []
    for (let i = 0; i < xs.length; i++) {
      ret.push(f(xs[i]))
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Pernyataan di atas sengaja menggunakan pernyataan for untuk menyatakan dengan jelas bahawa pelaksanaan peta bergantung pada jenis koleksi.
Pelaksanaan berurutan;
Penilaian segera, bukan malas.
Mari lihat penapis:

  function filter(f, xs) {
    const ret = []
    for (let i = 0; i < xs.length; i++) {
      if (f(xs[i])) {
        ret.push(xs[i])
      }
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  var range = n => [...Array(n).keys()]
Salin selepas log masuk
Salin selepas log masuk
  filter(x => x % 2 === 1, range(10))
  // [ 1, 3, 5, 7, 9 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Begitu juga, pelaksanaan penapis juga bergantung pada jenis koleksi tertentu dan pelaksanaan semasa memerlukan xs untuk menjadi tatasusunan.
Bagaimanakah peta boleh menyokong jenis data yang berbeza? Contohnya, Tetapkan , Peta  dan jenis data tersuai.
Terdapat cara konvensional: ia bergantung pada antara muka (protokol) koleksi.
Bahasa yang berbeza mempunyai pelaksanaan yang berbeza, JS mempunyai sokongan asli yang agak lemah dalam hal ini, tetapi ia juga boleh dilaksanakan:
Lelaran menggunakan Symbol.iterator .
Gunakan Object#constractor untuk mendapatkan pembina.
Jadi, bagaimanakah kami menyokong jenis data yang berbeza secara abstrak dalam tekan ?
Meniru perpustakaan ramdajs, ia boleh bergantung pada fungsi @@transducer/step tersuai.

  function map(f, xs) {
    const ret = new xs.constructor()  // 1. construction
    for (const x of xs) { // 2. iteration
      ret['@@transducer/step'](f(x))  // 3. collection
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk
  Array.prototype['@@transducer/step'] = Array.prototype.push
  // [Function: push]
Salin selepas log masuk
Salin selepas log masuk
  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  Set.prototype['@@transducer/step'] = Set.prototype.add
  // [Function: add]
Salin selepas log masuk
Salin selepas log masuk
  map(x => x + 1, new Set([1, 2, 3, 4, 5]))
  // Set (5) {2, 3, 4, 5, 6}
Salin selepas log masuk
Salin selepas log masuk

Dengan menggunakan kaedah ini, kami boleh melaksanakan fungsi seperti peta , penapis , dll., yang lebih berpaksi.
Kuncinya ialah mewakilkan operasi seperti pembinaan, lelaran dan pengumpulan kepada kelas koleksi tertentu, kerana hanya koleksi itu sendiri yang tahu cara menyelesaikan operasi ini.

  function filter(f, xs) {
    const ret = new xs.constructor()
    for (const x of xs) {
      if (f(x)) {
        ret['@@transducer/step'](x)
      }
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk
  filter(x => x % 2 === 1, range(10))
  // [ 1, 3, 5, 7, 9 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  filter(x => x > 3, new Set(range(10)))
  // Set (6) {4, 5, 6, 7, 8, 9}
Salin selepas log masuk
Salin selepas log masuk

mengarang

Akan terdapat beberapa isu apabila peta dan penapis di atas digunakan dalam gabungan.

  range(10)
    .map(x => x + 1)
    .filter(x => x % 2 === 1)
    .slice(0, 3)
  // [ 1, 3, 5 ]
Salin selepas log masuk
Salin selepas log masuk

Walaupun hanya 5 elemen digunakan, semua elemen dalam koleksi akan dilalui.
Setiap langkah akan menghasilkan objek koleksi perantaraan.
Kami menggunakan karang untuk melaksanakan logik ini semula

  function compose(...fns) {
    return fns.reduceRight((acc, fn) => x => fn(acc(x)), x => x)
  }
Salin selepas log masuk
Salin selepas log masuk

Untuk menyokong gubahan, kami melaksanakan fungsi seperti peta dan penapis dalam bentuk kari .

  function curry(f) {
    return (...args) => data => f(...args, data)
  }
Salin selepas log masuk
Salin selepas log masuk
  var rmap = curry(map)
  var rfilter = curry(filter)

  function take(n, xs) {
    const ret = new xs.constructor()
    for (const x of xs) {
      if (n <= 0) {
        break
      }
      n--
      ret['@@transducer/step'](x)
    }
    return ret
  }
  var rtake = curry(take)
Salin selepas log masuk
Salin selepas log masuk
  take(3, range(10))
  // [ 0, 1, 2 ]
Salin selepas log masuk
Salin selepas log masuk
  take(4, new Set(range(10)))
  // Set (4) {0, 1, 2, 3}
Salin selepas log masuk
Salin selepas log masuk
  const takeFirst3Odd = compose(
    rtake(3),
    rfilter(x => x % 2 === 1),
    rmap(x => x + 1)
  )

  takeFirst3Odd(range(10))
  // [ 1, 3, 5 ]
Salin selepas log masuk
Salin selepas log masuk

Setakat ini, pelaksanaan kami jelas dan ringkas dalam ungkapan tetapi membazir dalam masa jalan.

Bentuk fungsi

Transformer

Fungsi peta dalam versi kari adalah seperti ini:

  const map = f => xs => ...
Salin selepas log masuk
Salin selepas log masuk

Iaitu, map(x => ...) mengembalikan fungsi parameter tunggal.

  const list = [1, 2, 3, 4, 5]

  list.map(x => x + 1)
  // [ 2, 3, 4, 5, 6 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Fungsi dengan satu parameter boleh digubah dengan mudah.
Secara khusus, input fungsi ini ialah "data", output ialah data yang diproses dan fungsinya ialah pengubah data (Transformer).

  function map(f, xs) {
    const ret = []
    for (let i = 0; i < xs.length; i++) {
      ret.push(f(xs[i]))
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  function filter(f, xs) {
    const ret = []
    for (let i = 0; i < xs.length; i++) {
      if (f(xs[i])) {
        ret.push(xs[i])
      }
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Transformer adalah fungsi parameter tunggal, mudah untuk komposisi fungsi.

  var range = n => [...Array(n).keys()]
Salin selepas log masuk
Salin selepas log masuk

Pengurang

Pengurang ialah fungsi dua parameter yang boleh digunakan untuk menyatakan logik yang lebih kompleks.

  filter(x => x % 2 === 1, range(10))
  // [ 1, 3, 5, 7, 9 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

jumlah

  function map(f, xs) {
    const ret = new xs.constructor()  // 1. construction
    for (const x of xs) { // 2. iteration
      ret['@@transducer/step'](f(x))  // 3. collection
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk

peta

  Array.prototype['@@transducer/step'] = Array.prototype.push
  // [Function: push]
Salin selepas log masuk
Salin selepas log masuk
  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

penapis

  Set.prototype['@@transducer/step'] = Set.prototype.add
  // [Function: add]
Salin selepas log masuk
Salin selepas log masuk

ambil

Bagaimana untuk melaksanakan pengambilan ? Ini memerlukan reduce untuk mempunyai kefungsian yang serupa dengan break .

  map(x => x + 1, new Set([1, 2, 3, 4, 5]))
  // Set (5) {2, 3, 4, 5, 6}
Salin selepas log masuk
Salin selepas log masuk
  function filter(f, xs) {
    const ret = new xs.constructor()
    for (const x of xs) {
      if (f(x)) {
        ret['@@transducer/step'](x)
      }
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk
  filter(x => x % 2 === 1, range(10))
  // [ 1, 3, 5, 7, 9 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Transduser

Akhir sekali, kami bertemu dengan protagonis kami
Mula-mula periksa semula pelaksanaan peta sebelumnya

  filter(x => x > 3, new Set(range(10)))
  // Set (6) {4, 5, 6, 7, 8, 9}
Salin selepas log masuk
Salin selepas log masuk

Kita perlu mencari cara untuk memisahkan logik yang bergantung pada tatasusunan (Array) yang disebutkan di atas dan mengabstrakkannya menjadi Penurun .

  range(10)
    .map(x => x + 1)
    .filter(x => x % 2 === 1)
    .slice(0, 3)
  // [ 1, 3, 5 ]
Salin selepas log masuk
Salin selepas log masuk

Pembinaan hilang, lelaran hilang, dan koleksi elemen juga hilang.
Melalui pengurang , peta kami hanya mengandungi logik dalam tanggungjawabnya.
Lihat sekali lagi pada penapis

  function compose(...fns) {
    return fns.reduceRight((acc, fn) => x => fn(acc(x)), x => x)
  }
Salin selepas log masuk
Salin selepas log masuk

Notis penapis dan jenis pemulangan rmap di atas:

  function curry(f) {
    return (...args) => data => f(...args, data)
  }
Salin selepas log masuk
Salin selepas log masuk

Ia sebenarnya adalah Transfomer , dengan kedua-dua parameter dan nilai pulangan ialah Reducer , ia Transducer .
Transformer boleh digubah, jadi Transduser juga boleh digubah.

  var rmap = curry(map)
  var rfilter = curry(filter)

  function take(n, xs) {
    const ret = new xs.constructor()
    for (const x of xs) {
      if (n <= 0) {
        break
      }
      n--
      ret['@@transducer/step'](x)
    }
    return ret
  }
  var rtake = curry(take)
Salin selepas log masuk
Salin selepas log masuk

ke dalam & transduksi

Walau bagaimanapun, bagaimana untuk menggunakan transduser ?

  take(3, range(10))
  // [ 0, 1, 2 ]
Salin selepas log masuk
Salin selepas log masuk
  take(4, new Set(range(10)))
  // Set (4) {0, 1, 2, 3}
Salin selepas log masuk
Salin selepas log masuk

Kita perlu melaksanakan lelaran dan pengumpulan menggunakan pengurang.

  const takeFirst3Odd = compose(
    rtake(3),
    rfilter(x => x % 2 === 1),
    rmap(x => x + 1)
  )

  takeFirst3Odd(range(10))
  // [ 1, 3, 5 ]
Salin selepas log masuk
Salin selepas log masuk

Ia boleh berfungsi sekarang dan kami juga mendapati bahawa lelaran adalah "atas permintaan". Walaupun terdapat 100 elemen dalam koleksi, hanya 10 elemen pertama telah diulang.
Seterusnya, kita akan merangkum logik di atas ke dalam fungsi.

  const map = f => xs => ...
Salin selepas log masuk
Salin selepas log masuk
  type Transformer = (xs: T) => R
Salin selepas log masuk

Aliran

Penjana Fibonacci.

Andaikan kita mempunyai beberapa jenis pengumpulan data tak segerak, seperti penjana Fibonacci tak terhingga tak segerak.

  data ->> map(...) ->> filter(...) ->> reduce(...) -> result
Salin selepas log masuk
  function pipe(...fns) {
    return x => fns.reduce((ac, f) => f(ac), x)
  }
Salin selepas log masuk
  const reduce = (f, init) => xs => xs.reduce(f, init)

  const f = pipe(
    rmap(x => x + 1),
    rfilter(x => x % 2 === 1),
    rtake(5),
    reduce((a, b) => a + b, 0)
  )

  f(range(100))
  // 25
Salin selepas log masuk

Kita perlu melaksanakan ke fungsi yang menyokong struktur data di atas.
Siarkan versi tatasusunan kod di sebelahnya sebagai rujukan:

  type Transformer = (x: T) => T
Salin selepas log masuk

Berikut ialah kod pelaksanaan kami:

  type Reducer = (ac: R, x: T) => R
Salin selepas log masuk

Operasi pengumpulan adalah sama, operasi lelaran berbeza.

  // add is an reducer
  const add = (a, b) => a + b
  const sum = xs => xs.reduce(add, 0)

  sum(range(11))
  // 55
Salin selepas log masuk

Logik yang sama digunakan pada struktur data yang berbeza.

Pesanan

Anda, yang prihatin, mungkin menyedari bahawa susunan parameter versi karang berdasarkan kari dan versi berdasarkan pengurang adalah berbeza.

versi kari

  const list = [1, 2, 3, 4, 5]

  list.map(x => x + 1)
  // [ 2, 3, 4, 5, 6 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  function map(f, xs) {
    const ret = []
    for (let i = 0; i < xs.length; i++) {
      ret.push(f(xs[i]))
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Pelaksanaan fungsi adalah bersekutu kanan.

versi transduser

  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  function filter(f, xs) {
    const ret = []
    for (let i = 0; i < xs.length; i++) {
      if (f(xs[i])) {
        ret.push(xs[i])
      }
    }
    return ret
  }
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Rujukan

Transduser Akan Datang
Transduser - Rujukan Clojure

Atas ialah kandungan terperinci Transduser: Corak komposisi fungsi yang berkuasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan