Penjana dan Iterator ES6: Panduan Pemaju

ES6 telah memperkenalkan banyak ciri baru kepada bahasa JavaScript. Dua daripada ciri-ciri ini, penjana dan iterators, telah mengubah cara kami menulis fungsi khusus dalam kod front-end yang lebih kompleks.

Walaupun mereka bekerja dengan baik bersama -sama, fungsi sebenar mereka boleh menjadi sedikit mengelirukan, jadi mari kita lihat lebih dekat.

mata utama

ES6 menyediakan cara yang lebih bersih untuk menulis untuk gelung, menyediakan cara yang lebih seperti python untuk terus berinteraksi dengan unsur-unsur dalam dataset, menjadikan kod lebih mudah dibaca dan ditulis.
Penjana dalam ES6 adalah fungsi yang mengingati keadaan antara setiap panggilan. Mereka boleh menjana nilai seterusnya dalam urutan setiap kali mereka dipanggil, dengan berkesan membuat lelaran tersuai.
Kata kunci "hasil" dalam fungsi penjana adalah sama dengan "pulangan", tetapi ia mengekalkan keadaan fungsi, yang membolehkannya meneruskan pelaksanaan dari gangguan pada panggilan seterusnya.
Walaupun penyemak imbas nod dan moden menyokong ciri -ciri ES6, pelayar yang lebih tua mungkin memerlukan penterjemah seperti Babel untuk menukar kod ES6 ke kod ECMAScript 5.

Iterator

Penyesuaian adalah amalan biasa dalam pengaturcaraan, biasanya digunakan untuk gelung melalui satu set nilai, menukar setiap nilai, atau menggunakan atau menyimpannya dalam beberapa cara untuk kegunaan kemudian.

Di JavaScript, kami selalu mempunyai gelung seperti:

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

tetapi ES6 memberi kita pilihan lain:

for (const i of foo) {
  // 对i执行某些操作
}

Ini boleh dikatakan lebih ringkas dan mudah digunakan, mengingatkan saya tentang bahasa seperti Python dan Ruby. Walau bagaimanapun, terdapat satu lagi perkara yang sangat penting untuk diperhatikan mengenai lelaran baru ini: ia membolehkan anda berinteraksi secara langsung dengan unsur -unsur dataset.

Katakan kita ingin mengetahui sama ada setiap nombor dalam array adalah nombor utama. Kita boleh melakukan ini dengan membuat fungsi yang melakukan ini. Ia mungkin kelihatan seperti ini:

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

Bukan yang terbaik di dunia, tetapi ia berfungsi. Langkah seterusnya ialah gelung melalui senarai nombor kami dan periksa sama ada setiap nombor adalah perdana menggunakan fungsi baru yang berkilat kami. Ia sangat mudah:

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes现在是[73, 19]

Sekali lagi, ia berfungsi, tetapi ia kekok, dan kekok ini bergantung pada bagaimana JavaScript mengendalikan gelung. Walau bagaimanapun, dengan ES6, kami mendapat pilihan yang hampir seperti Python dalam Iterator Baru. Oleh itu, gelung sebelumnya boleh ditulis seperti ini:

const possiblePrimes = [73, 6, 90, 19, 15];
const confirmedPrimes = [];

for (const i of possiblePrimes){
   if ( isPrime(i) ){
      confirmedPrimes.push(i);
   }
}

// confirmedPrimes现在是[73, 19]

Ini lebih bersih, tetapi perkara yang paling menarik adalah untuk gelung. Pembolehubah yang saya kini mewakili item sebenar dalam array bernama kemungkinanPrimes. Oleh itu, kita tidak lagi perlu memanggilnya dengan indeks. Ini bermakna kita tidak perlu memanggil kemungkinanPrimes [i] dalam gelung, tetapi hanya panggil saya.

Di sebalik tabir, lelaran ini mengambil kesempatan daripada kaedah simbol baru yang berkilat ES6 (). Kaedah ini bertanggungjawab untuk menerangkan lelaran dan apabila dipanggil, mengembalikan objek JavaScript yang mengandungi nilai seterusnya dalam gelung dan kunci yang dilakukan, yang benar atau palsu bergantung kepada sama ada gelung selesai.

Jika anda berminat dengan terperinci ini, anda boleh membaca postingan blog yang indah ini "Iterators Gonna Iterate" oleh Jake Archibald. Seperti yang kita menggali ke bahagian lain artikel ini: Penjana, ia juga memberi anda idea yang baik tentang apa yang berlaku di belakang tabir.

Generator

Penjana (juga dikenali sebagai "Kilang ITER") adalah jenis fungsi JavaScript baru yang digunakan untuk membuat lelaran tertentu. Mereka menyediakan anda dengan cara khas untuk gelung melalui kandungan.

Baiklah, jadi apa maksudnya? Mari kita lihat contoh. Katakan kita mahu fungsi, dan setiap kali kita memanggilnya, kita akan diberikan nombor perdana seterusnya:

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

Jika anda digunakan untuk JavaScript, beberapa perkara ini kelihatan seperti sihir, tetapi ia tidak terlalu buruk dalam realiti. Kami mempunyai asterisk yang pelik selepas fungsi kata kunci, tetapi itu hanya memberitahu JavaScript bahawa kita menentukan penjana.

Satu lagi bahagian pelik ialah kata kunci hasil. Ini sebenarnya apa penjana meludah apabila anda memanggilnya. Ia kira -kira bersamaan dengan kembali, tetapi ia mengekalkan keadaan fungsi dan bukannya mengubah segala -galanya setiap kali ia dipanggil. Ia "ingat" lokasinya semasa runtime, jadi pada masa akan datang anda memanggilnya, ia berterusan dari gangguan.

ini bermakna kita boleh melakukan ini:

for (const i of foo) {
  // 对i执行某些操作
}

Kemudian, setiap kali kita ingin mendapatkan - anda meneka - nombor perdana seterusnya, kita boleh menghubungi NextPrime:

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

Anda juga boleh memanggil NextPrime.Next (), yang berguna apabila penjana anda tidak tak terhingga, kerana ia mengembalikan objek seperti ini:

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes现在是[73, 19]

di sini, kunci yang dilakukan memberitahu anda sama ada fungsi itu telah menyelesaikan tugasnya. Dalam kes kita, fungsi kita tidak pernah berakhir, yang secara teorinya memberi kita semua nombor perdana sehingga tak terhingga (jika kita mempunyai memori komputer yang banyak).

Ia sejuk, jadi bolehkah saya menggunakan penjana dan iterators sekarang?

Walaupun ECMAScript 2015 telah selesai dan telah bertahun -tahun, sokongan penyemak imbas untuk ciri -cirinya (terutamanya penjana) jauh dari sempurna. Jika anda benar -benar mahu menggunakan ciri -ciri moden ini dan lain -lain, anda boleh melihat penterjemah seperti Babel dan Traceur yang akan menukar kod ECMAScript 2015 anda ke dalam kod ECMASCRIPT 5.

Terdapat juga banyak editor dalam talian yang menyokong ECMAScript 2015, atau memberi tumpuan khusus kepadanya, terutamanya Regenerator Facebook dan JS Bin. Jika anda hanya mahu bermain dan belajar bagaimana JavaScript ditulis sekarang, ini patut dilihat.

Kesimpulan

Generator dan Iterator menyediakan banyak fleksibiliti baru untuk pendekatan kami terhadap masalah JavaScript. Iterator membolehkan kami menulis untuk gelung dengan cara yang lebih python, yang bermaksud kod kami kelihatan lebih bersih dan mudah dibaca.

fungsi penjana membolehkan kita menulis fungsi yang ingat di mana mereka terakhir dilihat, dan boleh meneruskan pelaksanaan dari gangguan. Mereka juga boleh menjadi tak terhingga dari segi apa yang sebenarnya mereka ingat, yang sangat mudah dalam beberapa kes.

Sokongan untuk penjana dan iterator ini baik. Mereka disokong dalam nod dan dalam semua pelayar moden, kecuali untuk Internet Explorer. Jika anda perlu menyokong penyemak imbas yang lebih tua, cara terbaik ialah menggunakan penterjemah seperti Babel.

Soalan Lazim Mengenai ECMAScript 2015 Generators and Iterators (FAQ)

Apakah perbezaan antara pengaliran dan penjana dalam ECMAScript 2015?

Iterator dan penjana adalah kedua -dua ciri ECMAScript 2015 dan digunakan untuk memproses aliran data. Iterator adalah objek yang membolehkan pengaturcara meleleh melalui semua elemen dalam koleksi. Ia mempunyai kaedah seterusnya () yang mengembalikan item seterusnya dalam urutan. Sebaliknya, penjana adalah fungsi yang boleh berhenti separuh dan kemudian terus dari perhentian. Dalam erti kata lain, penjana kelihatan seperti fungsi, tetapi ia bertindak seperti iterator.

Bagaimana menggunakan kata kunci hasil dalam ECMAScript 2015?

Kata kunci hasil digunakan untuk ECMAScript 2015 Jeda dan memulihkan fungsi penjana (fungsi* atau fungsi penjana warisan). Hasil boleh mengembalikan nilai dari fungsi penjana. Nilai pulangan ini biasanya merupakan objek dengan dua sifat: nilai dan dilakukan. Atribut nilai adalah hasil mengira ungkapan hasil, dan dilakukan adalah nilai boolean yang menunjukkan sama ada penjana telah menghasilkan nilai terakhirnya.

Apakah tujuan kaedah seterusnya () dalam ECMAScript 2015?

Kaedah seterusnya () adalah bahagian utama protokol Iterator dalam ECMAScript 2015. Ia mengembalikan objek dengan dua sifat: nilai dan dilakukan. Atribut nilai adalah nilai seterusnya dalam urutan lelaran, dan dilakukan adalah nilai boolean yang menunjukkan sama ada lelaran selesai. Sekiranya dilakukan adalah benar, pengarah telah melebihi urutan urutan lelaran.

Bagaimana menggunakan penjana untuk pengaturcaraan tak segerak dalam ECMAScript 2015?

Penjana dalam ECMAScript 2015 boleh digunakan untuk memudahkan pengaturcaraan asynchronous. Mereka boleh digunakan untuk menyekat pelaksanaan untuk menunggu operasi tak segerak untuk disiapkan tanpa menyekat keseluruhan program. Ini boleh menjadikan kod asynchronous kelihatan dan berkelakuan lebih seperti kod segerak, yang lebih mudah difahami dan alasan.

Apakah perbezaan antara untuk ... gelung dan untuk ... dalam gelung dalam ECMAScript 2015?

untuk ... gelung dalam Ecmascript 2015 digunakan untuk gelung melalui objek yang boleh dimakan seperti array, rentetan, peta, koleksi, dll. Ia memanggil cangkuk berulang adat menggunakan kenyataan yang akan dilaksanakan untuk nilai setiap atribut yang berbeza. Sebaliknya, untuk ... dalam gelung digunakan untuk gelung melalui sifat objek. Ia mengembalikan senarai kekunci untuk objek yang diulang.

Bagaimana untuk membuat iterator tersuai dalam ECMAScript 2015?

Dalam ECMAScript 2015, anda boleh membuat Iterator tersuai dengan menentukan objek dengan kaedah seterusnya (). Kaedah ini harus mengembalikan objek dengan dua sifat: nilai dan dilakukan. Atribut nilai adalah nilai seterusnya dalam urutan lelaran, dan dilakukan adalah nilai boolean yang menunjukkan sama ada lelaran selesai.

Apakah peranan simbol.iterator dalam ECMAScript 2015?

simbol.iterator adalah simbol terbina dalam khas dalam ECMAScript 2015. Ia digunakan untuk menentukan iterator lalai untuk objek tersebut. Apabila objek perlu diulang (contohnya pada permulaan untuk ... gelung), kaedah @@ iteratornya akan dipanggil tanpa sebarang argumen, dan pemula yang dikembalikan akan digunakan untuk mendapatkan nilai untuk berulang.

Bolehkah anda memberikan contoh fungsi penjana dalam ECMAScript 2015?

Sudah tentu, ini adalah contoh mudah fungsi penjana dalam ECMAScript 2015:

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

Dalam contoh ini, fungsi idmaker adalah penjana yang menghasilkan urutan nombor.

Bagaimana menggunakan kaedah dan penjana lempar () dalam ECMAScript 2015?

Kaedah lemparan () dalam ECMAScript 2015 boleh digunakan dalam penjana untuk memulihkan pelaksanaan fungsi penjana dan membuang kesilapan dari ekspresi hasil. Kaedah lemparan () boleh digunakan untuk mengendalikan kesilapan yang berlaku semasa pelaksanaan fungsi penjana.

Apakah kepentingan atribut yang dilakukan dalam Iterator ECMAScript 2015?

Hartanah yang dilakukan

adalah nilai boolean yang dikembalikan oleh pengarah dalam ECMAScript 2015. Ia menunjukkan sama ada pengarah mempunyai lebih banyak nilai untuk kembali. Sekiranya dilakukan adalah benar, pengarah telah melebihi urutan urutan lelaran. Jika dilakukan adalah palsu, pemalar masih boleh menghasilkan lebih banyak nilai.

Atas ialah kandungan terperinci Penjana dan Iterator ES6: Panduan Pemaju. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!