Penjana JavaScript: Supercharge Kod Anda dengan Kuasa Jeda!

Penjana JavaScript agak hebat. Mereka seperti fungsi biasa, tetapi dengan kuasa besar. Saya sering menggunakannya sejak kebelakangan ini, dan saya harus katakan, mereka telah mengubah cara saya berfikir tentang aliran kawalan dalam kod saya.

Mari kita mulakan dengan perkara asas. Penjana ialah fungsi yang boleh dijeda dan disambung semula. Ia menggunakan sintaks fungsi* dan kata kunci hasil. Berikut ialah contoh mudah:

function* countToThree() {
  yield 1;
  yield 2;
  yield 3;
}

const counter = countToThree();
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3

Lihat bagaimana kita boleh melangkah melalui fungsi satu hasil pada satu masa? Itulah keajaiban penjana.

Tetapi penjana boleh melakukan lebih daripada sekadar mengira. Mereka hebat untuk mencipta iterator tersuai. Katakan anda ingin menjana jujukan Fibonacci:

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

const fib = fibonacci();
for (let i = 0; i < 10; i++) {
  console.log(fib.next().value);
}

Penjana ini akan terus menghasilkan nombor Fibonacci selama-lamanya. Ia adalah urutan yang tidak terhingga, tetapi kami hanya mengira nilai yang kami perlukan.

Itu membawa kita kepada salah satu perkara paling hebat tentang penjana: penilaian malas. Mereka hanya mengira nilai apabila kita memintanya. Ini boleh menjadi sangat cekap untuk set data yang besar atau pengiraan yang kompleks.

Mari kita lihat contoh yang lebih praktikal. Katakan anda sedang membina sistem penomboran untuk set data yang besar:

function* paginate(items, pageSize) {
  for (let i = 0; i < items.length; i += pageSize) {
    yield items.slice(i, i + pageSize);
  }
}

const allItems = Array.from({ length: 100 }, (_, i) => i + 1);
const pageSize = 10;
const pages = paginate(allItems, pageSize);

console.log(pages.next().value); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(pages.next().value); // [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

Penjana ini membolehkan kami mengambil halaman data seperti yang kami perlukan, tanpa perlu memuatkan semuanya ke dalam memori sekaligus.

Penjana juga bersinar apabila melibatkan pengaturcaraan tak segerak. Mereka boleh menjadikan kod async kelihatan dan berkelakuan lebih seperti kod segerak. Berikut ialah contoh menggunakan perpustakaan bersama:

const co = require('co');

function* fetchUserData() {
  const user = yield fetchUser();
  const posts = yield fetchPosts(user.id);
  const comments = yield fetchComments(posts[0].id);
  return { user, posts, comments };
}

co(fetchUserData).then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

Kod ini kelihatan segerak, tetapi ia sebenarnya membuat tiga panggilan tak segerak. Penjana berhenti seketika pada setiap hasil sehingga janji diselesaikan.

Penjana juga boleh digunakan untuk multitasking koperasi. Anda boleh mencipta berbilang penjana dan bertukar antara mereka, mensimulasikan pelaksanaan serentak:

function* task1() {
  yield 'Start task 1';
  yield 'Middle of task 1';
  yield 'End task 1';
}

function* task2() {
  yield 'Start task 2';
  yield 'Middle of task 2';
  yield 'End task 2';
}

function run(tasks) {
  const iterations = tasks.map(task => task());
  while (iterations.length) {
    const [first, ...rest] = iterations;
    const { value, done } = first.next();
    if (!done) {
      console.log(value);
      iterations.push(first);
    }
    iterations.unshift(...rest);
  }
}

run([task1, task2]);

Kod ini silih berganti antara dua tugasan, menjalankan setiap satu langkah pada satu masa.

Penjana juga bagus untuk mencipta mesin keadaan. Setiap hasil boleh mewakili keadaan yang berbeza:

function* trafficLight() {
  while (true) {
    yield 'red';
    yield 'green';
    yield 'yellow';
  }
}

const light = trafficLight();
console.log(light.next().value); // red
console.log(light.next().value); // green
console.log(light.next().value); // yellow
console.log(light.next().value); // red

Lampu isyarat ini akan terus berbasikal melalui negerinya selama-lamanya.

Sekarang, mari bercakap tentang beberapa teknik yang lebih maju. Delegasi penjana membolehkan anda menyerahkan kepada penjana lain:

function* innerGenerator() {
  yield 'inner 1';
  yield 'inner 2';
}

function* outerGenerator() {
  yield 'outer 1';
  yield* innerGenerator();
  yield 'outer 2';
}

const gen = outerGenerator();
console.log(gen.next().value); // outer 1
console.log(gen.next().value); // inner 1
console.log(gen.next().value); // inner 2
console.log(gen.next().value); // outer 2

Sintaks hasil* mewakilkan kepada innerGenerator, menghasilkan semua nilainya sebelum meneruskan dengan outerGenerator.

Ralat pengendalian dalam penjana juga patut disebut. Anda boleh membuang ralat ke dalam penjana menggunakan kaedah throw():

function* errorGenerator() {
  try {
    yield 'Start';
    yield 'Middle';
    yield 'End';
  } catch (error) {
    console.error('Caught:', error);
    yield 'Error handled';
  }
}

const gen = errorGenerator();
console.log(gen.next().value); // Start
console.log(gen.throw(new Error('Oops!')).value); // Caught: Error: Oops!
                                                  // Error handled

Ini membolehkan beberapa strategi pengendalian ralat yang cukup canggih.

Penjana juga boleh digunakan untuk melaksanakan algoritma penjejakan ke belakang. Berikut ialah contoh mudah yang menjana semua kemungkinan kombinasi item:

function* countToThree() {
  yield 1;
  yield 2;
  yield 3;
}

const counter = countToThree();
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3

Penjana ini akan menghasilkan kesemua gabungan 2 elemen bagi item yang diberikan.

Satu kawasan di mana penjana benar-benar bersinar adalah dalam memproses sejumlah besar data. Anda boleh membuat saluran paip pemprosesan data yang cekap yang hanya mengira apa yang diperlukan. Berikut ialah contoh yang memproses fail besar baris demi baris:

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

const fib = fibonacci();
for (let i = 0; i < 10; i++) {
  console.log(fib.next().value);
}

Penjana ini membaca fail baris demi baris, membolehkan anda memproses fail besar tanpa memuatkannya sepenuhnya ke dalam memori.

Penjana juga boleh digunakan untuk melaksanakan corak Boleh Diperhatikan. Berikut ialah pelaksanaan mudah:

function* paginate(items, pageSize) {
  for (let i = 0; i < items.length; i += pageSize) {
    yield items.slice(i, i + pageSize);
  }
}

const allItems = Array.from({ length: 100 }, (_, i) => i + 1);
const pageSize = 10;
const pages = paginate(allItems, pageSize);

console.log(pages.next().value); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(pages.next().value); // [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

Penjana ini bertindak sebagai pemerhati, memproses setiap keping data yang diterimanya.

Satu lagi penggunaan penjana yang hebat adalah untuk mencipta struktur kawalan tersuai. Berikut ialah contoh fungsi cuba semula yang menggunakan penjana:

const co = require('co');

function* fetchUserData() {
  const user = yield fetchUser();
  const posts = yield fetchPosts(user.id);
  const comments = yield fetchComments(posts[0].id);
  return { user, posts, comments };
}

co(fetchUserData).then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

Fungsi cuba semula ini akan mencuba fungsi yang diberikan sehingga maxAttempts kali sebelum berputus asa.

Kesimpulannya, penjana ialah ciri hebat JavaScript yang boleh membantu anda menulis kod yang lebih ekspresif, cekap dan boleh diselenggara. Ia bagus untuk mengendalikan aliran kawalan yang kompleks, mengurus operasi tak segerak dan memproses set data yang besar. Walaupun mereka mungkin kelihatan agak pelik pada mulanya, setelah anda membiasakannya, anda akan menemui pelbagai cara kreatif untuk menggunakannya dalam projek anda. Jadi teruskan, cuba penjana dalam projek JavaScript anda yang seterusnya. Anda mungkin terkejut melihat sejauh mana mereka boleh memudahkan kod anda!

---

Ciptaan Kami

Pastikan anda melihat ciptaan kami:

Pusat Pelabur | Hidup Pintar | Epos & Gema | Misteri Membingungkan | Hindutva | Pembangunan Elit | Sekolah JS

---

Kami berada di Medium

Tech Koala Insights | Dunia Epok & Gema | Medium Pusat Pelabur | Medium Misteri Membingungkan | Sains & Zaman Sederhana | Hindutva Moden

Atas ialah kandungan terperinci Penjana JavaScript: Supercharge Kod Anda dengan Kuasa Jeda!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!