JavaScript Spread Operator:A Guide

ตัวดำเนินการสเปรดของ avaScript จะขยายอาร์เรย์ในไวยากรณ์ที่ยอมรับอาร์กิวเมนต์ ตัวดำเนินการสเปรดมักใช้เพื่อทำซ้ำวัตถุ ผสานอาร์เรย์ หรือส่งเนื้อหาของรายการไปยังฟังก์ชัน

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

ในคู่มือนี้ เราจะพูดถึงโอเปอเรเตอร์การแพร่กระจาย JavaScript และวิธีการทำงาน เราจะอธิบายตัวอย่างกรณีการใช้งานทั่วไปบางส่วนเพื่อช่วยคุณในการเริ่มต้น

ตัวดำเนินการกระจาย JavaScript คืออะไร

ตัวดำเนินการกระจาย JavaScript ช่วยให้คุณเข้าถึงเนื้อหาของวัตถุที่ทำซ้ำได้ ตัวดำเนินการการแพร่กระจายคือชุดของจุดสามจุด (จุดไข่ปลา) ตามด้วยชื่อของ iterable ที่คุณต้องการเข้าถึง โอเปอเรเตอร์นี้ถูกนำมาใช้ใน JavaScript ES6

ออบเจ็กต์ที่ทำซ้ำได้สามประเภท ได้แก่ อาร์เรย์ อ็อบเจ็กต์ตามตัวอักษร และสตริง เมื่อใช้ for loop คุณสามารถวนซ้ำข้อมูลทุกประเภทเหล่านี้และเรียกใช้กระบวนการทั่วไปกับข้อมูลเหล่านี้ได้

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

ไวยากรณ์สำหรับตัวดำเนินการสเปรดคือ:

var names = ["John", "Lisa", "Harry"];
var new_names = [...names, "Leslie"];
console.log(new_names);

ในไวยากรณ์นี้ เราใช้ ...names เพื่อส่งต่อเนื้อหาของรายการ "ชื่อ" ของเราไปยังรายการที่เรียกว่า "new_names" รายการ "new_names" ประกอบด้วยรายการทั้งหมดในรายการ "ชื่อ" รวมถึงชื่อใหม่:เลสลี่

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

กรณีใช้งานทั่วไปสามกรณีสำหรับตัวดำเนินการการแพร่กระจายคือ:

• สร้างสำเนาของการทำซ้ำได้
• เพิ่มรายการใน iterable ใหม่
• ส่งรายการอาร์กิวเมนต์ไปยังฟังก์ชัน

ไวยากรณ์การแพร่กระจายแสดงถึงองค์ประกอบแต่ละรายการในรายการ

Sread Operator JavaScript:สร้างสำเนาของ Iterable

ตัวดำเนินการสเปรดเป็นวิธีที่มีประสิทธิภาพในการทำซ้ำ iterable แม้ว่าจะมีวิธีอื่นๆ ในการแก้ไขปัญหานี้ แต่ตัวดำเนินการสเปรดก็ใช้งานง่ายมาก ในการสร้างสำเนาของ iterable ให้ระบุจุดสามจุดและชื่อของอาร์เรย์ที่คุณต้องการสร้าง

ในตัวอย่างที่แล้ว เราแสดงให้เห็นว่าสิ่งนี้ทำงานอย่างไรกับอาร์เรย์ เรายังสามารถใช้ตัวดำเนินการกระจายเพื่อทำซ้ำวัตถุ JavaScript:

const lemon_drizzle = {
	name: "Lemon Drizzle",
	price: 1.95,
	vegan: true
}

const new_lemon_drizzle = {...lemon_drizzle};
console.log(new_lemon_drizzle);

รหัสของเราพิมพ์สิ่งต่อไปนี้ไปยังคอนโซล JavaScript:

{ name: "Lemon Drizzle", price: 1.95, vegan: true }

มีความแตกต่างที่สำคัญสองสามประการที่เราต้องทำในตัวอย่างนี้ เรากำลังสร้างสำเนาของวัตถุ JavaScript ซึ่งหมายความว่าเราจำเป็นต้องใช้วงเล็บปีกกา ({}) แทนวงเล็บเหลี่ยม ([])

ประการที่สอง แทนที่จะระบุอาร์เรย์เดียว เราได้ระบุวัตถุ ออบเจ็กต์นี้มีคีย์และค่าสามรายการ ซึ่งแต่ละคีย์เกี่ยวข้องกับคัพเค้ก “Lemon Drizzle” ของเรา

กระจาย JavaScript:เพิ่มรายการไปยัง Iterable ใหม่

กรณีการใช้งานของตัวดำเนินการสเปรดไม่ได้หยุดอยู่แค่การคัดลอกแบบทำซ้ำได้! มีอะไรให้สำรวจมากกว่านี้ โดยทั่วไปแล้วตัวดำเนินการสเปรดจะใช้เพื่อเพิ่มรายการจากรายการหนึ่งไปยังรายการถัดไป ลองพิจารณาตัวอย่างต่อไปนี้:

const cupcakes = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_cupcakes = [...cupcakes, 'Red Velvet', 'Raspberry Dark Chocolate'];
console.log(new_cupcakes);

รหัสของเราส่งคืน:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

เราได้สร้างสำเนาอาร์เรย์ JavaScript ดั้งเดิมของเราที่ชื่อว่า “new_cupcakes” ซึ่งรวมถึงค่าเพิ่มเติมบางส่วนที่เราสร้างขึ้นด้วย

คุณสามารถใช้ไวยากรณ์เดียวกันเพื่อรวมสอง iterables เข้าด้วยกันได้เช่นกัน สิ่งที่คุณต้องทำคือระบุสอง iterables ในวงเล็บเหลี่ยมโดยใช้ตัวดำเนินการ spread:

const old_menu = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_menu = [
	'Red Velvet',
	'Raspberry Dark Chocolate'
]

const final_menu = [...old_menu, ...new_menu];
console.log(final_menu);

รหัสของเราส่งคืน:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

ผลลัพธ์เหมือนเดิมถูกส่งกลับจากก่อนหน้านี้ แต่คราวนี้เราได้รวมสองอาร์เรย์เข้าด้วยกัน

กระจาย JavaScript:ส่งผ่านอาร์กิวเมนต์ไปยังฟังก์ชัน

เมื่อคุณส่งผ่านหลายอาร์กิวเมนต์ไปยังฟังก์ชัน JavaScript การใช้ตัวดำเนินการการแพร่กระจายอาจเป็นประโยชน์ ลองพิจารณาตัวอย่างนี้:

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

placeOrder('Geoff', 'Red Velvet', 1.85);

รหัสของเราส่งคืน:

Name: Geoff
Order: Red Velvet
Price 1.85

เราได้ประกาศฟังก์ชันชื่อ placeOrder () ที่รับสามอาร์กิวเมนต์และพิมพ์ไปยังคอนโซล แต่ละค่านำหน้าด้วยป้ายกำกับที่อธิบายว่าแต่ละอาร์กิวเมนต์มีอะไรบ้าง

ในขณะที่โค้ดนี้ใช้งานได้ เราสามารถระบุอาร์กิวเมนต์ในอาร์เรย์และใช้ตัวดำเนินการสเปรดเพื่อส่งผ่านไปยังฟังก์ชันของเรา:

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

const order = ['Geoff', 'Red Velvet', 1.85];

placeOrder(...order);

รหัสของเราส่งคืน:

Name: Geoff
Order: Red Velvet
Price 1.85

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

บทสรุป

ตัวดำเนินการสเปรดใช้กันอย่างแพร่หลายใน JavaScript ทำให้ง่ายต่อการคัดลอกอ็อบเจ็กต์ที่ทำซ้ำได้ เพิ่มรายการไปยัง iterable ใหม่ และส่งผ่านอาร์กิวเมนต์ไปยังฟังก์ชัน ไวยากรณ์สำหรับตัวดำเนินการสเปรดคือจุดสามจุด ตามด้วยอ็อบเจ็กต์ที่ทำซ้ำได้ซึ่งคุณต้องการเข้าถึง

ตอนนี้คุณพร้อมที่จะเริ่มใช้โอเปอเรเตอร์การแพร่กระจาย JavaScript อย่างมืออาชีพแล้ว!

สำหรับคำแนะนำเกี่ยวกับแหล่งข้อมูล หนังสือ และหลักสูตรการเรียนรู้ JavaScript ยอดนิยม โปรดดูบทความ How to Learn JavaScript