วิธีกลับลำดับ Array ใน JavaScript (reverse)

เมธอด reverse()

Array.reverse() กลับลำดับ Element ใน Array Mutate Original Array Element ตัวแรกกลายเป็นตัวสุดท้าย ตัวสุดท้ายกลายเป็นตัวแรก

Syntax

array.reverse();

ตัวอย่างโค้ด (แก้ไขจากต้นฉบับที่มี Error)

<html>
<head>
  <title>JavaScript Array reverse Method</title>
</head>
<body>
  <script>
    var arr = [1, 2, 3, 4, 5];
    var reversed = arr.reverse(); // ต้องมี Array ก่อน reverse
    document.write("Reversed array is : " + reversed);
  </script>
</body>
</html>

ผลลัพธ์

Reversed array is : 5,4,3,2,1

รายละเอียด

• Mutate Original: Array ต้นฉบับจะถูกกลับลำดับด้วย
• คืนค่า: Reference ของ Array เดียวกัน (ที่ถูก Mutate แล้ว)
• ทำงาน In-place (ไม่สร้าง Array ใหม่)

ตัวอย่างแสดง Mutate Behavior

const original = [1, 2, 3];
const reversed = original.reverse();

console.log(original); // [3, 2, 1] - เปลี่ยนไปแล้ว!
console.log(reversed); // [3, 2, 1] - Reference เดียวกัน
console.log(original === reversed); // true

วิธีที่ไม่ Mutate (Immutable)

1. Spread + reverse() (ES6+)

const original = [1, 2, 3];
const reversed = [...original].reverse(); // [3, 2, 1]
console.log(original); // [1, 2, 3] - คงเดิม

2. ใช้ toReversed() (ES2023+) - แนะนำล่าสุด

const original = [1, 2, 3];
const reversed = original.toReversed(); // [3, 2, 1] - ไม่ Mutate
console.log(original); // [1, 2, 3]

3. ใช้ reduceRight

const reversed = original.reduceRight((acc, val) => [...acc, val], []);

ตารางเปรียบเทียบ

สรุป

reverse() กลับลำดับ Array Mutate ต้นฉบับ ต้องการไม่ Mutate ใช้ [...arr].reverse() หรือ toReversed() (ES2023) ตัวอย่างต้นฉบับมี Error: var arr = c.reverse() ต้องประกาศ Array ก่อน