เมธอด Array.slice() ใน JavaScript: ดึงส่วนของอาร์เรย์ (ไม่เปลี่ยนต้นฉบับ)

เมธอด slice() ใช้สำหรับ คืนค่าส่วน (shallow copy) ของอาร์เรย์ ตั้งแต่ดัชนีเริ่มต้นจนถึงดัชนีสิ้นสุด (ไม่รวม) อาร์เรย์ต้นฉบับไม่ถูกเปลี่ยนแปลง

ไวยากรณ์ (Syntax)

array.slice(start[, end])

• start - ดัชนีเริ่มต้น (รวม) ค่าเริ่มต้น: 0 ค่าลบ = นับจากท้าย
• end (ตัวเลือก) - ดัชนีสิ้นสุด (ไม่รวม) ค่าเริ่มต้น: array.length ค่าลบ = นับจากท้าย

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

ตัวอย่างที่ 1: ตัดส่วนกลางของอาร์เรย์

<!DOCTYPE html>
<html>
<body>
  <h2>Array.slice() พื้นฐาน</h2>
  <p id="demo"></p>
  <script>
    const arr = ["Accessories", "Electronics", "Books", "Pet Supplies"];
    document.getElementById("demo").innerHTML = 
      "อาร์เรย์เริ่มต้น = " + arr + "<br>" +
      "Slice(2, 4) = " + arr.slice(2, 4);
    // ผลลัพธ์: Books,Pet Supplies (ดัชนี 2, 3)
    // อาร์เรย์ต้นฉบับไม่เปลี่ยน
  </script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<body>
  <h2>รูปแบบรถยนต์</h2>
  <button onclick="display()">Slice(1, 4)</button>
  <p id="demo"></p>
  <script>
    const car = ["Hatchback", "Convertible", "SUV", "AUV", "MUV"];
    document.getElementById("demo").innerHTML = "อาร์เรย์เริ่มต้น = " + car;
    
    function display() {
      const sliced = car.slice(1, 4);
      document.getElementById("demo").innerHTML = 
        "อาร์เรย์เริ่มต้น = " + car + "<br>" +
        "Slice(1, 4) = " + sliced;
      // ผลลัพธ์: Convertible,SUV,AUV
    }
  </script>
</body>
</html>

รูปแบบการใช้งานต่างๆ

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

arr.slice(2);       // ['c', 'd', 'e'] - ตั้งแต่ดัชนี 2 ถึงสุด
arr.slice(2, 4);    // ['c', 'd'] - ดัชนี 2, 3 (ไม่รวม 4)
arr.slice(-2);      // ['d', 'e'] - 2 ตัวสุดท้าย
arr.slice(-3, -1);  // ['c', 'd'] - นับจากท้าย
arr.slice(0, -1);   // ['a', 'b', 'c', 'd'] - ตัวแรกถึงตัวก่อนสุดท้าย
arr.slice();        // ['a', 'b', 'c', 'd', 'e'] - คัดลอกทั้งอาร์เรย์ (shallow copy)

slice() vs splice() - จุดสำคัญที่สับสนง่าย

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

1. Pagination (แบ่งหน้า)

const itemsPerPage = 10;
const page = 2; // หน้าที่ 2 (0-indexed = 1)
const paginated = allItems.slice(page * itemsPerPage, (page + 1) * itemsPerPage);

2. คัดลอกอาร์เรย์ (Shallow Copy)

const copy = original.slice(); // ทั้งอาร์เรย์
const copy = [...original];      // ทางเลือก ES6+

3. เอาตัวแรก/ตัวสุดท้าย n ตัว

const first3 = arr.slice(0, 3);
const last3 = arr.slice(-3);

4. ลบองค์ประกอบโดยไม่ mutate (Immutable Pattern)

// ลบดัชนี 2
const withoutIndex2 = [...arr.slice(0, 2), ...arr.slice(3)];
// หรือ
const withoutIndex2 = arr.filter((_, i) => i !== 2);