การทำซ้ำสมาชิกในอาร์เรย์ (Duplicate Array Elements) ใน JavaScript

การ Duplicate อาร์เรย์ (คัดลอกสมาชิกทั้งหมดต่อท้ายตัวเอง) สามารถทำได้หลายวิธี แต่ต้องระวังเรื่อง Reference และ Performance

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Duplicate Array</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result, .sample { font-size: 18px; font-weight: 500; color: rebeccapurple; }
    .result { color: red; }
  </style>
</head>
<body>
  <h1>Duplicate สมาชิกในอาร์เรย์เดียวกัน</h1>
  <div class="sample">[1,2,3,4,'A']</div>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อ Duplicate สมาชิกของอาร์เรย์ข้างต้น</h3>
  <script>
    const resEle = document.querySelector(".result");
    const BtnEle = document.querySelector(".Btn");
    let arr = [1, 2, 3, 4, "A"];
    
    BtnEle.addEventListener("click", () => {
      // concat + sort (โค้ดต้นฉบับ)
      arr = arr.concat(arr).sort();
      resEle.innerHTML = arr.join(", ");
    });
  </script>
</body>
</html>

วิธีต่างๆ และข้อควรระวัง

วิธี	Code	Mutates?	หมายเหตุ
concat	`arr.concat(arr)`	❌ ไม่	สร้าง Array ใหม่ ปลอดภัย
Spread	`[...arr, ...arr]`	❌ ไม่	ES6+ สั้น กระชับ
push + spread	`arr.push(...arr)`	✅ ใช่	เปลี่ยน Array เดิม
forEach + push	`arr.forEach(x => arr.push(x))`	✅ ใช่	⚠️ Infinite Loop! length เพิ่มตลอด

⚠️ ข้อสังเกตของโค้ดต้นฉบับ

ใช้ .sort() ทำให้ลำดับเปลี่ยน (1,1,2,2,3,3,4,4,A,A) - อาจไม่ใช่เจตนา
ถ้าต้องการคงลำดับ: arr = [...arr, ...arr] หรือ arr.concat(arr) โดยไม่ sort
สำหรับ Objects: การ Duplicate แบบนี้เป็น Shallow Copy (Reference เดียวกัน)

Deep Duplicate สำหรับ Objects

const arr = [{id:1}, {id:2}];
// Shallow - reference เหมือนกัน
const shallow = [...arr, ...arr];

// Deep - ใช้ JSON (ไม่รองรับ Function, Date, Circular)
const deep = JSON.parse(JSON.stringify([...arr, ...arr]));

// Deep - structuredClone (Modern)
const deep2 = structuredClone([...arr, ...arr]);

ผลลัพธ์

[1, 1, 2, 2, 3, 3, 4, 4, A, A] (เรียงแล้วเพราะ .sort())