การใช้ Rest Parameter และ Spread Operator ใน JavaScript

Rest Parameter

ด้วย rest parameter คุณสามารถแทน arguments หลายค่าเป็น array ได้ ES6 นำ rest parameter มาเพื่ออำนวยความสะดวก สำหรับ arguments objects rest parameters แสดงด้วยสามจุด ... นำหน้าพารามิเตอร์

โค้ดกำหนด rest parameter:

<html> 
  <body> 
    <script> 
      function addition(...numbers) { 
        var res = 0; 
        numbers.forEach(function(number) { 
          res += number; 
        }); 
        return res; 
      } 
      document.write(addition(3)); 
      document.write(addition(9,10,11,12,13)); 
    </script> 
  </body> 
</html>

Spread Operator

Spread operator อนุญาตให้แยก array เป็น arguments เดี่ยวๆ ซึ่งเป็นฟังก์ชันของ arguments แยกกัน

Syntax

function myfunction(...iterableObj);

ตัวอย่าง Spread Syntax กับ arguments:

function multiply(x, y) { 
  return x * y; 
} 
var myArgs = [50, 100]; 
console.log(multiply(...myArgs));

ตัวอย่างเพิ่มเติม

<html> 
  <body> 
    <script> 
      var a = [10, 20]; 
      var b = "rank"; 
      var c = [30, "points"]; 
      var d = "run"; 
      // concat method
      var e = a.concat(b, c, d); 
      // spread operator
      var f = [...a, b, ...c, d]; 
      document.write(e); 
      document.write("<br>" + f); 
    </script> 
  </body> 
</html>

การใช้งาน Spread Operator ทั่วไป

// 1. Copy array (shallow copy)
const arr2 = [...arr1];

// 2. Merge arrays
const merged = [...arr1, ...arr2, ...arr3];

// 3. Insert elements
const withExtra = [1, 2, ...arr, 3, 4];

// 4. Convert iterable to array
const nodeList = document.querySelectorAll('div');
const arr = [...nodeList];

// 5. Object spread (ES2018)
const obj2 = { ...obj1, newProp: 'value' };
const mergedObj = { ...obj1, ...obj2 };

Rest vs Spread

• Rest (...params ใน parameter) — เก็บ หลายค่าเป็น array
• Spread (...arr ใน argument/object) — กระจาย array/object เป็นค่าเดี่ยวๆ