Kawal gelung dengan Symbol.iterator

Pernahkah anda menggunakan Object.entry dan tertanya-tanya bagaimana ia berfungsi? Ia jauh lebih mudah daripada yang anda fikirkan!

Berikut ialah pelaksanaan asas:

function objectEntries(obj) {
  const entries = [];

  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      entries.push([key, obj[key]]);
    }
  }

  return entries;
}

Walau bagaimanapun, kod ini tidak cukup baik - bagaimana jika objek itu besar? Prestasi pendekatan berasaskan tatasusunan perlu disimpan dalam ingatan untuk keseluruhan proses melaksanakan fungsi ini. Dan jika anda menggunakannya lagi? Ia perlu membina dan menyimpan tatasusunan baharu dalam ingatan yang sama. Dalam dunia nyata, ini boleh membawa kepada isu prestasi yang serius dan pada satu ketika kita perlu menampung prestasi. Walau bagaimanapun, terdapat penyelesaian yang elegan yang akan menyelesaikan semua masalah ini, di mana Symbol.iterator datang untuk menyelamatkan!

Berikut ialah coretan yang dikemas kini:

function objectEntries(obj) {
  return {
    [Symbol.iterator]() {
      const keys = Object.keys(obj);
      let index = 0;

      return {
        next() {
          if (index 



<p><strong>Mengapa Gunakan Symbol.iterator untuk Lelaran?</strong></p>

<p>Dalam pelaksanaan awal kami, fungsi objectEntries membina tatasusunan semua entri (pasangan [kunci, nilai]) dalam ingatan, yang boleh menjadi masalah jika objek mempunyai sejumlah besar sifat. Menyimpan semua entri dalam tatasusunan bermakna kita perlu memperuntukkan memori untuk setiap pasangan lebih awal. Pendekatan ini agak OK untuk objek yang lebih kecil, tetapi ia cepat menjadi tidak cekap dan hanya perlahan apabila saiz objek membesar.</p>

<p>Dalam kod yang dikemas kini, kami mentakrifkan [Symbol.iterator] pada objek yang memegang logik lelaran. Mari kita pecahkan langkah demi langkah:</p>

• Kekunci Mulakan: Object.keys(obj) mengambil tatasusunan kunci daripada obj objek. Senarai kunci ini membolehkan kami mengetahui dengan tepat sifat yang perlu kami akses tanpa menyimpan setiap entri.
• Gunakan Penunjuk Indeks: Indeks pembolehubah menjejaki kedudukan semasa kami dalam tatasusunan kunci. Ini adalah satu-satunya keadaan yang akan kita ada dalam gelung.
• Tentukan Kaedah seterusnya: Fungsi next() menggunakan indeks untuk mendapatkan semula kunci semasa dan menambahnya. Ia mengembalikan setiap pasangan [kunci, obj[key]] sebagai nilai dan set selesai: benar apabila kami telah mengulangi semua kunci.
• Dengan melakukan ini, kami membolehkan objectEntries serasi dengan mana-mana for...of loop tanpa kos memori untuk mencipta keseluruhan tatasusunan entri di muka.

Memohon Symbol.iterator pada gelung tersuai

Mari kita mendalami cara kaedah ini boleh memberikan lebih kawalan ke atas tingkah laku gelung. Setiap contoh yang disediakan menunjukkan cara unik untuk berinteraksi dengan data tatasusunan, menambahkan banyak fleksibiliti pada kod anda. Kami akan meneroka implikasi setiap kaedah dan cara ia boleh dimanfaatkan dalam senario yang berbeza.

Dalam contoh ini saya akan melanjutkan prototaip Array (maklumat lanjut tentang prototaip di sini) dengan kaedah contoh untuk menjadikan kod saya lebih mudah dibaca. Jom terjun terus!

Sebagai contoh, kaedah reverseIterator ini boleh menjadi berguna dalam sesuatu seperti aplikasi sembang yang anda mungkin mahu memaparkan mesej terbaharu dahulu. Aplikasi sembang terkenal kerana mempunyai BANYAK data (mesej dalam kes ini). Menggunakan reverseIterator, anda boleh lelaran melalui senarai mesej dan memaparkannya dalam susunan yang diingini tanpa perlu mencipta tatasusunan terbalik baharu.

function objectEntries(obj) {
  const entries = [];

  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      entries.push([key, obj[key]]);
    }
  }

  return entries;
}

Kaedah unik ini membolehkan anda mengulangi tatasusunan sambil memastikan bahawa hanya nilai unik yang dihasilkan. Ini sangat berguna untuk menghapuskan pendua dengan cepat, tanpa menapisnya terlebih dahulu dan menggunakan lebih banyak memori.

function objectEntries(obj) {
  return {
    [Symbol.iterator]() {
      const keys = Object.keys(obj);
      let index = 0;

      return {
        next() {
          if (index 



<p>Kaedah potongan di bawah boleh berguna apabila berurusan dengan set data yang besar, anda boleh memprosesnya dalam bahagian yang lebih kecil untuk mengurangkan penggunaan memori dan meningkatkan prestasi. Katakan anda mengimport data daripada sesuatu seperti fail CSV, anda boleh membaca dan memprosesnya dalam segmen yang lebih berskala. Selain itu, dalam antara muka pengguna web, chunking boleh digunakan untuk penomboran, membolehkan anda memaparkan bilangan item tertentu setiap halaman atau membantu anda mengurus pemuat tak terhingga dengan lebih baik.<br>
</p>

<pre class="brush:php;toolbar:false">Array.prototype.reverseIterator = function() {
  let index = this.length - 1;
  return {
    [Symbol.iterator]: () => ({
      next: () => {
        if (index >= 0) {
          return { value: this[index--], done: false };
        }
        return { done: true };
      }
    })
  };
};

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers.reverseIterator()) {
  console.log(num); // 5, 4, 3, 2, 1
}

Kesimpulan

Dalam artikel ini, kami meneroka cara Symbol.iterator menyesuaikan logik dan meningkatkan kecekapan gelung kami. Dengan melaksanakan kaedah lelaran tersuai pada Array.prototype (atau mana-mana lelaran lain untuk kesan itu), kami boleh mengurus penggunaan memori dengan berkesan dan mengawal cara gelung kami berjalan.

Contoh awal objectEntries menunjukkan cara pendekatan berasaskan tatasusunan boleh membawa kepada isu prestasi apabila mengendalikan objek besar. Walau bagaimanapun, dengan menggunakan SYmbol.iterator, kami mencipta penyelesaian yang cekap yang membolehkan kami mengulangi entri objek tanpa overhed peruntukan memori yang tidak perlu.

Kami juga melihat beberapa contoh praktikal tentang cara memanjangkan Array.prototaip boleh memudahkan pelbagai senario dunia sebenar yang perlu dihadapi oleh pembangun setiap hari.

Dengan alatan berkuasa ini yang boleh anda gunakan, anda lebih bersedia untuk menyelesaikan senario pengendalian data yang kompleks dalam JavaScript dengan implikasi prestasi yang hampir kepada sifar pada apl anda.

Atas ialah kandungan terperinci Kawal gelung dengan Symbol.iterator. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!