เมธอด copyWithin() ใน JavaScript ใช้ทำอะไร?

บทนำ

Array.prototype.copyWithin() เป็นเมธอดของอาร์เรย์ ใช้ **คัดลอกลำดับสมาชิกภายในอาร์เรย์เดียวกัน** โดยเขียนทับตำแหน่งปลายทาง (Mutates the original array) เมธอดนี้ไม่เปลี่ยนขนาดของอาร์เรย์

ไวยากรณ์ (Syntax)

array.copyWithin(target[, start[, end]])

พารามิเตอร์

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<body>
  <script>
    // ตัวอย่างพื้นฐาน
    var fruits = ["Apple", "Banana", "Cherry", "Durian", "Elderberry", "Fig", "Grape"];
    document.write("ก่อน: " + fruits + "<br>");
    
    // คัดลอก index 0-3 (Apple, Banana, Cherry, Durian) ไปวางที่ index 3
    fruits.copyWithin(3, 0, 4);
    document.write("หลัง copyWithin(3, 0, 4): " + fruits + "<br>");
    // ผล: ["Apple", "Banana", "Cherry", "Apple", "Banana", "Cherry", "Durian"]
    
    // ตัวอย่างเพิ่มเติม
    var nums = [1, 2, 3, 4, 5];
    document.write("<br>ต้นฉบับ: " + nums);
    
    // คัดลอก 2 ตัวแรก ไปวางทับ 2 ตัวสุดท้าย (ใช้ index ลบ)
    nums.copyWithin(-2, 0, 2);
    document.write("<br>copyWithin(-2, 0, 2): " + nums); // [1, 2, 3, 1, 2]
    
    // คัดลอกทั้งอาร์เรย์ไปวางที่ต้นทาง (ไม่เปลี่ยนแปลงอะไร)
    var arr = [10, 20, 30];
    arr.copyWithin(0, 0);
    document.write("<br>copyWithin(0, 0): " + arr); // [10, 20, 30]
  </script>
</body>
</html>

ภาพประกอบการทำงาน

Index:     0       1       2       3       4       5       6
Before:  [Apple] [Banana] [Cherry] [Durian] [Elderberry] [Fig] [Grape]
                              ↑target=3
Copy from start=0 to end=4 (exclusive) → [Apple, Banana, Cherry, Durian]

After:   [Apple] [Banana] [Cherry] [Apple] [Banana] [Cherry] [Durian]
                              ↑target  ↑copied 4 items

คุณสมบัติสำคัญ

• Mutates original array - เปลี่ยนอาร์เรย์ต้นฉบับโดยตรง
• ไม่เปลี่ยนขนาดอาร์เรย์ - length คงเดิม
• รองรับ Negative Index - นับจากท้ายอาร์เรย์ (-1 = ตัวสุดท้าย)
• High Performance - ใช้ระดับหน่วยความจำต่ำ เหมาะกับการจัดการข้อมูลขนาดใหญ่ (TypedArrays เช่น Int32Array, Float64Array)
• ECMAScript 2015 (ES6) - ต้องมี Polyfill สำหรับ IE

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

• Circular Buffer / Ring Buffer - เลื่อนข้อมูลในบัฟเฟอร์ขนาดคงที่
• Game Development - อัปเดตตำแหน่งเอนทิตี้ในอาร์เรย์ขนาดคงที่
• Signal Processing - เลื่อนข้อมูลสัญญาณ (DSP)
• Memory Efficient Operations - หลีกเลี่ยงการสร้างอาร์เรย์ใหม่

ตัวอย่าง Circular Buffer

// บัฟเฟอร์ขนาด 5 เก็บค่าล่าสุด 5 ค่า
var buffer = new Array(5).fill(0);
var index = 0;

function pushValue(val) {
  buffer.copyWithin(0, 1); // เลื่อนซ้าย 1 ช่อง
  buffer[4] = val;         // ใส่ค่าใหม่ที่ท้าย
  // หรือ: buffer.copyWithin(1, 0, 4); buffer[0] = val; // เลื่อนขวา ใส่หน้า
}

pushValue(10); // [0,0,0,0,10]
pushValue(20); // [0,0,0,10,20]
pushValue(30); // [0,0,10,20,30]