เมธอด array.entries() ใน JavaScript: ดึง Iterator ของคู่ Key/Value

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

ไวยากรณ์ (Syntax)

array.entries()

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

ตัวอย่างที่ 1: วนลูปคู่ Key/Value

<!DOCTYPE html>
<html>
<body>
  <h2>คะแนนอันดับ - Entries</h2>
  <p>คู่ Key/Value จาก entries()</p>
  <button onclick="display()">ตรวจสอบคะแนน 550</button>
  <p id="demo"></p>
  <script>
    const pointsArr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 1000];
    
    // แสดง entries ทั้งหมด
    const entries = pointsArr.entries();
    for (const val of entries) {
      document.getElementById("demo").innerHTML += val + "<br>";
      // ผลลัพธ์: [0,10], [1,20], [2,30]...
    }
    
    function pointsFunc(points) {
      return points == 550;
    }
    
    function display() {
      document.getElementById("demo").innerHTML = 
        "มีคะแนน 550 หรือไม่? " + pointsArr.some(pointsFunc);
    }
  </script>
</body>
</html>

ตัวอย่างที่ 2: รูปแบบรถยนต์

<!DOCTYPE html>
<html>
<body>
  <h2>รูปแบบรถยนต์ - Entries</h2>
  <button onclick="display()">แสดงผล</button>
  <p id="demo"></p>
  <script>
    const car = ["Hatchback", "Convertible", "SUV", "AUV", "MUV"];
    
    // แสดง entries ทั้งหมด
    const entries = car.entries();
    for (const val of entries) {
      document.getElementById("demo").innerHTML += val + "<br>";
    }
    
    function display() {
      document.getElementById("demo").innerHTML = 
        "อาร์เรย์หลัง slice(1,4) = " + car.slice(1, 4);
    }
  </script>
</body>
</html>

รูปแบบของค่าใน Iterator

แต่ละค่าที่ได้จาก entries() เป็นอาร์เรย์ขนาด 2: [index, value]

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();

for (const pair of iterator) {
  console.log(pair);     // [0, 'a'] → [1, 'b'] → [2, 'c']
  console.log(pair[0]);  // index: 0, 1, 2
  console.log(pair[1]);  // value: 'a', 'b', 'c'
}

// Destructuring (แนะนำ)
for (const [index, value] of arr.entries()) {
  console.log(`${index}: ${value}`);
}
// 0: a
// 1: b
// 2: c

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

แปลงเป็น Object (Key-Value Map)

const arr = ['apple', 'banana', 'cherry'];
const obj = Object.fromEntries(arr.entries());
// {0: "apple", 1: "banana", 2: "cherry"}

แปลงเป็น Map

const arr = ['apple', 'banana', 'cherry'];
const map = new Map(arr.entries());
// Map(3) {0 => "apple", 1 => "banana", 2 => "cherry"}

ใช้กับ next() แบบ Manual

const iterator = ['x', 'y', 'z'].entries();
console.log(iterator.next()); // {value: [0, 'x'], done: false}
console.log(iterator.next()); // {value: [1, 'y'], done: false}
console.log(iterator.next()); // {value: [2, 'z'], done: false}
console.log(iterator.next()); // {value: undefined, done: true}

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

กรณีใช้งานจริง

// 1. วนลูปพร้อมดัชนี (แทน for loop แบบเก่า)
for (const [i, item] of items.entries()) {
  console.log(`${i + 1}. ${item}`);
}

// 2. สร้าง object lookup
const categories = ['fruit', 'vegetable', 'meat'];
const categoryMap = Object.fromEntries(categories.entries());
// {0: "fruit", 1: "vegetable", 2: "meat"}

// 3. Debugging - ดู index และ value พร้อมกัน
console.log([...arr.entries()]);