JavaScript 可迭代对象

สิ่งที่สามารถวนเลือกได้คือสิ่งที่สามารถวนเลือก (เช่น แถว)

สิ่งที่สามารถวนเลือกได้สามารถเข้าถึงด้วยรหัสที่เรียบร้อยและรวดเร็ว

สิ่งที่สามารถวนเลือกได้สามารถใช้ for..of วนเลือกทำการวนเลือก

วนเลือก for..of

for..of ใช้สำหรับวนเลือกองค์ประกอบของสิ่งที่สามารถวนเลือกได้

การ์ทูบ

for (variable of iterable) {
  // รหัสที่ต้องทำงาน
}

วนเลือก

การวนเลือกง่ายๆ ที่เข้าใจได้ง่าย

มันมีความหมายว่าวนเลือกตัวเลือกขององค์ประกอบ

ตัวอย่างง่ายๆ บางตัวนี้

• วนเลือกตัวอักษร
• วนเลือกแถว

วนเลือกตัวอักษร

สามารถ for..of ลองวนเลือกอุปกรณ์ในตัวอักษร

ตัวอย่าง

const name = "W3Schools";
for (const x of name) {
  // รหัสที่ต้องทำงาน
}

ทดสอบด้วยตัวเอง

วนเลือกแถว

สามารถ for..of ลองวนเลือกอุปกรณ์ในแถว

ตัวอย่าง 1

const letters = ["a","b","c"];
for (const x of letters) {
  // รหัสที่ต้องทำงาน
}

ทดสอบด้วยตัวเอง

ตัวอย่าง 2

const numbers = [2,4,6,8];
for (const x of numbers) {
  // รหัสที่ต้องทำงาน
}

ทดสอบด้วยตัวเอง

วนเลือก Set

สามารถ for..of ลองวนเลือกอุปกรณ์ใน Set

ตัวอย่าง

const letters = new Set(["a","b","c"]);
for (const x of letters) {
  // รหัสที่ต้องทำงาน
}

ทดสอบด้วยตัวเอง

หมายเหตุ:เราจะเรียนรู้เพิ่มเติมเกี่ยวกับ Set และ Map ในบทต่อไป

วนลูป Map

สามารถ for..of วนลูปส่วนที่มีค่าของ Map:

ตัวอย่าง

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  
]
for (const x of fruits) {
  // รหัสที่ต้องทำงาน
}

ทดสอบด้วยตัวเอง

อิเทอร์เรเตอร์ JavaScript

อุปกรณ์อิเทอร์เรเตอร์กำหนดวิธีการสร้างชุดของค่า

เมื่อวัตถุทำการปฏิบัติตาม next() เมื่อวัตถุทำการปฏิบัติตามขอบเขตของอิเทอร์เรเตอร์

next() ฟังก์ชันต้องส่งกลับตัวแปลที่มีคุณสมบัติสองรายการ:

• value (ค่าต่อไป)
• done (true หรือ false)

สิ่งที่สามารถวนลูปได้ที่ทำเอง

ตัวอย่างดังต่อไปนี้แสดงสิ่งที่สามารถวนลูปได้ที่ทำเอง next() จะส่งกลับ 10, 20, 30, 40, ... ตลอดเวลา:

ตัวอย่าง

// สิ่งที่สามารถวนลูปได้ที่ทำเอง
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return { value: n, done: false };
    }
  };
}
// สร้างสิ่งที่สามารถวนลูปได้
const n = myNumbers();
n.next(); // ส่งกลับ 10
n.next(); // ส่งกลับ 20
n.next(); // ส่งกลับ 30

ทดสอบด้วยตัวเอง

สนับสนุนคำสั่ง for..of ที่สามารถวนลูปได้

JavaScript สิ่งที่สามารถวนลูปได้เป็นสิ่งที่มี Symbol.iterator ของตัวเลือกตัวนี้。

Symbol.iterator คือสิ่งที่ส่งกลับ next() ฟังก์ชันของความหมายนี้。

สามารถใช้รหัสดังต่อเพื่อวนลูปสิ่งที่สามารถวนลูปได้:

for (const x of iterable}) { }

ตัวอย่าง

// สร้างวัตถุ
myNumbers = {};
// ทำให้เป็นอนุทึก
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) { done = true; }
      return { value: n, done: done };
    }
  };
};
// ตอนนี้สามารถใช้ for..of
for (const num of myNumbers) {
  // รหัสอื่นๆ
}

ทดสอบด้วยตัวเอง

วิธี Symbol.iterator จะถูก for..of เรียกใช้โดยอัตโนมัติ

แต่เราก็สามารถเรียกใช้มันด้วยมือต่อไป

ตัวอย่าง

let iterator = myNumbers[Symbol.iterator]();
while (true) {
  const result = iterator.next();
  if (result.done) break;
  // รหัสอื่นๆ
}

ทดสอบด้วยตัวเอง