Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

เมธอด Array.isArray() ใน JavaScript: ตรวจสอบว่าตัวแปรเป็นอาร์เรย์หรือไม่

เมธอด Array.isArray() ใช้สำหรับ ตรวจสอบว่าตัวแปรที่ส่งเข้าเป็นอาร์เรย์หรือไม่ คืนค่า true หรือ false เป็นวิธีที่น่าเชื่อถือที่สุด

ไวยากรณ์ (Syntax)

Array.isArray(value)

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

ตัวอย่างที่ 1: ตรวจสอบอาร์เรย์ตัวเลข

<!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];
    
    // แสดง entries ก่อน (สำหรับ demo)
    const entries = pointsArr.entries();
    for (const val of entries) {
      document.getElementById("demo").innerHTML += val + "<br>";
    }
    
    function display() {
      const result = Array.isArray(pointsArr);
      document.getElementById("demo").innerHTML = "เป็นอาร์เรย์: " + result;
      // ผลลัพธ์: true
    }
  </script>
</body>
</html>

ตัวอย่างที่ 2: ตรวจสอบอาร์เรย์สตริง

<!DOCTYPE html>
<html>
<body>
  <h2>ตรวจสอบ Array.isArray()</h2>
  <p>นี่เป็นอาร์เรย์หรือไม่?</p>
  <p id="demo"></p>
  <script>
    const arr = ["Accessories", "Electronics", "Books", "Pet Supplies"];
    const result = Array.isArray(arr);
    document.getElementById("demo").innerHTML = "เป็นอาร์เรย์: " + result;
    // ผลลัพธ์: true
  </script>
</body>
</html>

ทำไมต้องใช้ Array.isArray() แทน instanceof?

const arr = [1, 2, 3];

// ✅ Array.isArray() - ทำงานถูกต้องทุกกรณี (รวม cross-frame/iframe)
Array.isArray(arr); // true
Array.isArray([]);  // true
Array.isArray({});  // false
Array.isArray(null); // false

// ⚠️ instanceof Array - ล้มเหลวใน cross-frame/iframe
arr instanceof Array; // true (ใน frame เดียว)
// แต่ถ้า arr มาจาก iframe อื่น: arr instanceof Array → false ❌

// ❌ constructor - ไม่เชื่อถือได้
arr.constructor === Array; // true แต่เปลี่ยนได้

ตารางเปรียบเทียบวิธีตรวจสอบ

วิธีCross-frameArray-like (arguments, NodeList)แนะนำ
Array.isArray()✅ ทำงานได้❌ false (ถูกต้อง)✅ มาตรฐาน
instanceof Array❌ ล้มเหลว❌ false⚠️ ไม่แนะนำ
obj.constructor === Array❌ ไม่เชื่อถือ❌ false❌ ไม่แนะนำ
Object.prototype.toString.call(obj) === '[object Array]'✅ ทำงานได้❌ false✅ ES5 fallback

กรณีที่คืนค่า false

Array.isArray([]);           // true
Array.isArray([1,2,3]);      // true
Array.isArray(new Array());  // true
Array.isArray('string');     // false
Array.isArray({0: 'a', length: 1}); // false (array-like)
Array.isArray(arguments);    // false (array-like)
Array.isArray(null);         // false
Array.isArray(undefined);    // false
Array.isArray(123);          // false