ในปี 2558 ตัวดำเนินการสเปรดเปิดตัวครั้งแรกใน JavaScript เวอร์ชัน ES6 แสดงโดย (…) เราสามารถใช้ตัวดำเนินการแพร่กระจายเพื่อขยายการทำซ้ำได้ (อาร์เรย์ สตริง แมป ชุด) ลงในองค์ประกอบทั้งหมด หรือแยกองค์ประกอบที่สามารถทำซ้ำได้ทั้งหมดในครั้งเดียว
ให้เราดูตัวอย่างต่อไปนี้สำหรับ ตัวอย่าง:
การใช้อาร์เรย์ arrด้านบน ให้เราสมมติว่าเราต้องการสร้างอาร์เรย์ใหม่โดยมีองค์ประกอบบางอย่างอยู่ที่จุดเริ่มต้นของอาร์เรย์ หากไม่มีตัวดำเนินการสเปรด เราสามารถทำได้โดยการวนซ้ำบนอาร์เรย์ หรือแย่กว่านั้นคือดำเนินการด้วยตนเอง ตัวอย่างเช่น ข้อมูลต่อไปนี้แสดงให้เห็นว่าเราจะบรรลุเป้าหมายนี้ได้อย่างไรหากไม่มีตัวดำเนินการสเปรด:
ผลลัพธ์ของ badNewArr ที่สร้างขึ้นด้านบนจะมีลักษณะดังนี้: [1,2,7,8,9] เมื่อใช้ตัวดำเนินการสเปรด เราสามารถทำได้อย่างมีประสิทธิภาพมากขึ้นดังนี้:
ผลลัพธ์ของอาร์เรย์ใหม่ที่สร้างขึ้นด้านบนจะมีลักษณะดังนี้: [1,2,7,8,9] หากคุณสังเกตเห็น ผลลัพธ์ของ badNewArrและnewArrจะเหมือนกัน ใน newArrสิ่งที่ตัวดำเนินการสเปรดทำคือนำองค์ประกอบแต่ละส่วนของอาร์เรย์ arr ออกและใส่องค์ประกอบแต่ละรายการ หนึ่งในองค์ประกอบใน newArr ตามแผนภาพ ตัวดำเนินการสเปรดจะดำเนินการดังต่อไปนี้:
เรามาดูกันว่าอาร์เรย์จะมีลักษณะอย่างไรหากเราไม่ได้ใช้ตัวดำเนินการสเปรด พิจารณาโค้ดต่อไปนี้:
การรันคำสั่ง console.log(newArr)จะให้ผลลัพธ์: [1, 2, [7, 8, 9]] สิ่งนี้เกิดขึ้นเนื่องจากเรารวมอาร์เรย์ arr ไว้ด้วย แต่ด้วยตัวดำเนินการสเปรด มันเหมือนกับว่าเรากำลังนำแต่ละองค์ประกอบออกจากอาร์เรย์และเพิ่มลงในอาร์เรย์ newArr ด้วยตนเอง
นอกจากอาร์เรย์แล้ว ให้เราพิจารณาตัวอย่างต่อไปนี้:
ที่นี่เราได้สร้างวัตถุที่เรียกว่าร้านอาหารด้วยคีย์ของ mainMenuพร้อมค่าอาร์เรย์
สมมติว่าเราต้องการสร้างรายการอาหารอีกหนึ่งรายการในอาร์เรย์ mainMenu เราต้องการอาร์เรย์ใหม่บวกกับองค์ประกอบอาหารอีกหนึ่งรายการ ดังนั้นเราจึงสามารถใช้ตัวดำเนินการสเปรดเพื่อดำเนินการดังต่อไปนี้:
เมื่อคุณรันคำสั่ง console.log(newMenu) ผลลัพธ์จะเป็นองค์ประกอบดั้งเดิม 4 รายการบวกกับปลาดังต่อไปนี้:
[“ข้าว”, “ถั่ว”, “มันฝรั่งทอด”, “ไก่”, “ปลา”]
สิ่งสำคัญคือต้องทราบว่าเรากำลังสร้างอาร์เรย์ newMenu ใหม่ทั้งหมด เราไม่ได้ปรับแต่งอาร์เรย์ restaurant.mainMenu
คุณอาจสังเกตเห็นว่าตัวดำเนินการสเปรดนั้นคล้ายกับการทำลายล้าง ซึ่งช่วยให้เราดึงองค์ประกอบออกจากอาร์เรย์ ข้อแตกต่างที่สำคัญคือตัวดำเนินการกระจายนำองค์ประกอบทั้งหมดจากอาร์เรย์และไม่สร้างตัวแปรใหม่ ดังนั้นตัวดำเนินการสเปรดสามารถใช้ได้เฉพาะในตำแหน่งที่เราสามารถเขียนค่าโดยคั่นด้วยเครื่องหมายจุลภาคเท่านั้น
นอกจากนี้ ตัวดำเนินการสเปรดยังสามารถใช้ในฟังก์ชันต่างๆ ได้อีกด้วย ลองมาดูตัวอย่างต่อไปนี้:
เมื่อเรียกใช้ฟังก์ชัน test สตริง a1 จะถูกกำหนดให้กับพารามิเตอร์ a ก่อน ถัดไป arr จะถูกกระจาย มีสองรายการในอาร์เรย์ดังนั้นb2 และc3 จะถูกกำหนดให้กับพารามิเตอร์ ข และ ค เมื่อการแพร่กระจายเสร็จสมบูรณ์ ค่าสตริงที่เหลือ d4 จะถูกมอบให้กับพารามิเตอร์ d ของฟังก์ชัน
โดยสรุป สิ่งสำคัญคือต้องทราบว่าเบราว์เซอร์ที่ไม่รองรับ JavaScript เวอร์ชัน ES6 อาจไม่รองรับการใช้ไวยากรณ์การแพร่กระจาย ไปที่ ตัวดำเนินการสเปรด JavaScript เพื่อเรียนรู้เพิ่มเติม
