ตัวดำเนินการ spread ใน JavaScript

ใน ES6 มีตัวดำเนินการพิเศษ ... ปรากฏขึ้นมา เรียกว่า spread

เมื่อตัวดำเนินการ spread อยู่หน้าอาร์เรย์ มันจะแยกรายการในอาร์เรย์ออกเป็นค่าแต่ละค่า เปลี่ยนอาร์เรย์ให้เป็นชุดของพารามิเตอร์ที่จำเป็น สำหรับการเรียกใช้ฟังก์ชัน

แน่นอนว่าฟังดูไม่เข้าใจ ดังนั้นเรามา ดูตัวอย่างง่ายๆ กัน สมมติว่าเรามี ฟังก์ชันที่รับพารามิเตอร์ 3 ตัว และคืนค่าผลรวมของพารามิเตอร์เหล่านั้น:

javascriptfunction func(num1, num2, num3) {
  return num1 + num2 + num3;
}

สมมติว่าเรามีอาร์เรย์ที่มีสามองค์ประกอบด้วย:

javascriptlet arr = [1, 2, 3];

เห็นได้ชัดว่าเราไม่สามารถแค่ ส่งอาร์เรย์นี้เป็นพารามิเตอร์ของฟังก์ชันได้ แบบนี้:

javascriptlet arr = [1, 2, 3];
func(arr);

เพราะในกรณีนี้ อาร์เรย์ทั้งหมดจะเข้าไปอยู่ใน พารามิเตอร์แรกของฟังก์ชัน และในพารามิเตอร์นี้ จำเป็นต้องส่งตัวเลข (และในพารามิเตอร์อื่นๆ ก็ต้องส่งตัวเลขเช่นกัน)

แน่นอนว่าสามารถทำได้ดังต่อไปนี้:

javascriptlet arr = [1, 2, 3];
func(arr[0], arr[1], arr[2]);

แต่มีทางที่ง่ายกว่า - นั่นคือการใช้ ตัวดำเนินการ spread:

javascriptlet arr = [1, 2, 3];
func(...arr);

การมีตัวแปรไม่ใช่ข้อบังคับ - สามารถใช้ spread กับอาร์เรย์โดยตรงได้:

javascriptfunc(...[1, 2, 3]);

javascriptlet arr = [1, 2, 3, 4, 5];

javascriptfunction func(num1, num2, num3, num4, num5) {
  return num1 + num2 + num3 + num4 + num5;
}