Cara menggunakan objek traverse javascript

Sebuah loop dalam komputasi adalah instruksi yang mengulangi atau mengulang atau mengeksekusi satu atau lebih pernyataan berulang-ulang

Beberapa loop mengeksekusi pernyataan selama kondisi yang ditentukan benar, sementara yang lain mengeksekusi pernyataan hingga beberapa kali

Saya yakin ada fungsi loop di pemutar musik Anda, di mana Anda dapat memilih lagu tertentu untuk diulangi berulang kali. Ini berarti bahwa sebuah loop pada dasarnya mengulang sesuatu

Hari ini, saya akan berbicara tentang cara mengulang objek. Namun sebelum kita melanjutkan, saya ingin Anda memahami apa itu Objek dan bagaimana cara membuatnya

Apa itu Objek?

Objek adalah jenis larik khusus yang menyimpan data sebagai pasangan {key-value}. Sepasang tunggal dari data ini disebut properti dari objek itu

Di bawah ini adalah beberapa cara untuk membuat objek di JavaScript;

• Menggunakan sintaks literal objek {}

• Menggunakan fungsi konstruktor

• Menggunakan fungsi pabrik

Setelah menyegarkan ingatan Anda, saya akan menunjukkan kepada Anda berbagai pendekatan untuk mengulang melalui sebuah Objek

Sebelum kita melanjutkan dengan pendekatan apa pun, saya ingin Anda memahami kedua metode Objek ini

• Object.keys()

Metode ini membantu mengambil semua kunci milik Object sebagai Array

• Object.values()

Metode ini membantu mengambil semua nilai milik Objek sebagai Array

Dengan pengetahuan tentang metode objek di atas, kita dapat menulis sebuah loop yang akan melewati sebuah objek

Sekarang, ingatlah bahwa properti Object hanyalah kombinasi dari kunci dan nilai yaitu { key : value }. Jadi dengan menggunakan metode Object.keys() , kita dapat mengambil semua kunci milik Object, mengulang kunci menggunakan while-loop, dan kemudian dengan kunci tertentu sebagai indeks numerik, kita akan mengambil nilai yang diberikan padanya

Pada kode di atas, objek memiliki 3 properti dan untuk mengulangi kunci objek, kita harus melakukannya

• Menanyakan panjang kunci
• Akses semua kunci objek dan periksa kunci yang ada di index yang ditentukan
• Akses semua nilai objek dan periksa nilai yang ada pada index yang ditentukan

Anda dapat melihatnya beraksi di

Kita sekarang telah melihat cara melakukan iterasi melalui kunci objek menggunakan x-for dan

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

Selanjutnya kita akan melihat cara iterasi melalui pasangan kunci-nilai objek dengan x-for dan

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

Iterasi melalui pasangan nilai kunci objek dengan x-for dan const todos = [ { id: 1, text: 'todo-1' }, { id: 2, text: 'todo-2' } ] 4

Ketika id/key dan nilainya diperlukan, kita dapat melakukan iterasi melalui objek JavaScript dengan Alpine. js' x-for dan

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Only need the keys/ids - use <code>Object.keys</code></h3>
  <ul>
    <template x-for="id in Object.keys(todos)" :key="id">
      <li>id: <span x-text="id"></span></li>
    </template>
  </ul>
</div>

Contoh lengkap yang mengisi opsi

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Only need the keys/ids - use <code>Object.keys</code></h3>
  <ul>
    <template x-for="id in Object.keys(todos)" :key="id">
      <li>id: <span x-text="id"></span></li>
    </template>
  </ul>
</div>

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="[id, value] in Object.entries(todos)"
      :key="id"
    >
      <option :value="id" x-text="value.text"></option>
    </template>
  </select>
</div>

Perhatikan ini menggunakan penghancuran Array, sintaks alternatif untuk itu yang tidak memerlukan dukungan lingkungan untuk penghancuran array adalah

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Only need the keys/ids - use <code>Object.keys</code></h3>
  <ul>
    <template x-for="id in Object.keys(todos)" :key="id">
      <li>id: <span x-text="id"></span></li>
    </template>
  </ul>
</div>

6 dan menggunakan

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Only need the keys/ids - use <code>Object.keys</code></h3>
  <ul>
    <template x-for="id in Object.keys(todos)" :key="id">
      <li>id: <span x-text="id"></span></li>
    </template>
  </ul>
</div>

7 dan

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Only need the keys/ids - use <code>Object.keys</code></h3>
  <ul>
    <template x-for="id in Object.keys(todos)" :key="id">
      <li>id: <span x-text="id"></span></li>
    </template>
  </ul>
</div>

8 untuk merujuk ke

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Only need the keys/ids - use <code>Object.keys</code></h3>
  <ul>
    <template x-for="id in Object.keys(todos)" :key="id">
      <li>id: <span x-text="id"></span></li>
    </template>
  </ul>
</div>

9 (kunci) dan

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="[id, value] in Object.entries(todos)"
      :key="id"
    >
      <option :value="id" x-text="value.text"></option>
    </template>
  </select>
</div>

0 masing-masing

Sintaks alternatif (tanpa penghancuran array)

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="entry in Object.entries(todos)"
      :key="entry[0]"
    >
      <option :value="entry[0]" x-text="entry[1].text"></option>
    </template>
  </select>
</div>

Keduanya secara fungsional setara meskipun dengan tradeoff singkat/dukungan dan menghasilkan output berikut

Anda dapat melihatnya beraksi di

Kami sekarang telah melihat bagaimana menggunakan

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

Selanjutnya kita akan melihat cara alternatif untuk mencapai hasil yang sama menggunakan x-for,

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

Ulangi melalui kunci objek dan cari nilai objek yang sesuai dengan x-for dan const todos = [ { id: 1, text: 'todo-1' }, { id: 2, text: 'todo-2' } ] 2

Kita telah melihat cara melakukan iterasi melalui kunci objek menggunakan

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="[id, value] in Object.entries(todos)"
      :key="id"
    >
      <option :value="id" x-text="value.text"></option>
    </template>
  </select>
</div>

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

Kami menggunakan

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="entry in Object.entries(todos)"
      :key="entry[0]"
    >
      <option :value="entry[0]" x-text="entry[1].text"></option>
    </template>
  </select>
</div>

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="entry in Object.entries(todos)"
      :key="entry[0]"
    >
      <option :value="entry[0]" x-text="entry[1].text"></option>
    </template>
  </select>
</div>

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <h3>Need keys/ids and values - use <code>Object.keys</code> + lookup</h3>
  <select>
    <template x-for="id in Object.keys(todos)" :key="id">
      <option :value="id" x-text="todos[id].text"></option>
    </template>
  </select>
</div>

Yang menghasilkan pilihan berikut dengan opsi "todo-1" dan "todo-2", di mana

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="[id, value] in Object.entries(todos)"
      :key="id"
    >
      <option :value="id" x-text="value.text"></option>
    </template>
  </select>
</div>

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="entry in Object.entries(todos)"
      :key="entry[0]"
    >
      <option :value="entry[0]" x-text="entry[1].text"></option>
    </template>
  </select>
</div>

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="entry in Object.entries(todos)"
      :key="entry[0]"
    >
      <option :value="entry[0]" x-text="entry[1].text"></option>
    </template>
  </select>
</div>

Anda dapat melihatnya beraksi di

Tidak ada yang memaksa Anda untuk menggunakan

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Only need the keys/ids - use <code>Object.keys</code></h3>
  <ul>
    <template x-for="id in Object.keys(todos)" :key="id">
      <li>id: <span x-text="id"></span></li>
    </template>
  </ul>
</div>

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

Di sini kita

<div
  x-data="{
    todos: {
      1: {
        id: 1,
        text: 'todo-1'
      },
      2: {
        id: 2,
        text: 'todo-2'
      }
    }
  }"
>
</div>

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <!-- rest of template -->
  <h3>Need keys/ids and values - use <code>Object.entries</code></h3>
  <select>
    <template
      x-for="entry in Object.entries(todos)"
      :key="entry[0]"
    >
      <option :value="entry[0]" x-text="entry[1].text"></option>
    </template>
  </select>
</div>

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <h3>Need keys/ids and values - use <code>Object.keys</code> + lookup</h3>
  <select>
    <template x-for="id in Object.keys(todos)" :key="id">
      <option :value="id" x-text="todos[id].text"></option>
    </template>
  </select>
</div>

<div
  x-data="{
    todos: {
      1: { id: 1, text: 'todo-1' },
      2: { id: 2, text: 'todo-2' }
    }
  }"
>
  <h3>Need values - use <code>Object.keys</code> + lookup</h3>
  <ul>
    <template x-for="id in Object.keys(todos)" :key="id">
      <li x-text="todos[id].text"></li>
    </template>
  </ul>

</div>

Ini menghasilkan daftar berikut, yang terlihat sangat mirip dengan daftar yang akan kita buat menggunakan

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

Anda dapat melihatnya beraksi di

Kita sekarang telah melihat cara melakukan iterasi melalui kunci objek menggunakan x-for dan

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

Selanjutnya kita akan melihat iterasi melalui nilai objek menggunakan x-for dan

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]

Ulangi melalui nilai objek dengan const todos = [ { id: 1, text: 'todo-1' }, { id: 2, text: 'todo-2' } ] 3

Agar panduan ini lengkap, kami akan menutup dengan melihat cara iterasi melalui nilai objek di Alpine. js menggunakan x-for dan

const todos = [
  { id: 1, text: 'todo-1' },
  { id: 2, text: 'todo-2' }
]