เมธอด array.keys() ใน JavaScript: ดึง Iterator ของดัชนีอาร์เรย์

เมธอด keys() ใช้สำหรับ คืนค่า Array Iterator object ที่มีดัชนี (keys/index) ของอาร์เรย์ทั้งหมด

ไวยากรณ์ (Syntax)

array.keys()

ตัวอย่างการใช้งาน

ตัวอย่างที่ 1: วนลูปดัชนีด้วย for...of

<!DOCTYPE html>
<html>
<body>
  <h2>รูปแบบรถยนต์ - ดัชนี</h2>
  <p id="demo"></p>
  <script>
    const arrStud = ["Crossover", "Convertible", "Hatchback", "SUV"];
    const iterator = arrStud.keys();
    
    for (const key of iterator) {
      document.getElementById("demo").innerHTML += key + "<br>";
    }
    // ผลลัพธ์: 0, 1, 2, 3 (แต่ละค่าเว้นบรรทัด)
  </script>
</body>
</html>

ตัวอย่างที่ 2: ใช้กับปุ่มกดแสดงดัชนี

<!DOCTYPE html>
<html>
<body>
  <h2>คะแนนอันดับ</h2>
  <p>คลิกเพื่อแสดงดัชนีเท่านั้น</p>
  <button onclick="display()">แสดงดัชนี</button>
  <p id="demo"></p>
  <script>
    const pointsArr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 1000];
    document.getElementById("demo").innerHTML = "ค่า: " + pointsArr;
    
    function display() {
      const iterator = pointsArr.keys();
      let output = "ดัชนี:<br>";
      for (const key of iterator) {
        output += key + "<br>";
      }
      document.getElementById("demo").innerHTML = output;
    }
  </script>
</body>
</html>

คุณสมบัติของ Iterator

• เป็น Iterable - ใช้กับ for...of, spread operator, Array.from()
• ใช้งานได้ครั้งเดียว (single-use) - หลังวนจบแล้วจะหมด
• ไม่สร้างอาร์เรย์จริงในหน่วยความจำ (Lazy evaluation)
• รองรับ next() method สำหรับการควบคุมแบบ manual

การใช้งานขั้นสูง

const arr = ['a', 'b', 'c'];

// แปลงเป็นอาร์เรย์ดัชนี
const keysArray = [...arr.keys()]; // [0, 1, 2]
// หรือ
const keysArray2 = Array.from(arr.keys()); // [0, 1, 2]

// ใช้กับ next() แบบ manual
const iterator = arr.keys();
console.log(iterator.next()); // {value: 0, done: false}
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

เปรียบเทียบ keys(), values(), entries()