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

บทเรียนนี้เราจะเริ่มต้นด้วยคำอธิบายบางส่วน บทเรียนก่อนหน้าทั้งหมดในส่วนนี้ฉันไม่ได้ บอกความจริงทั้งหมดกับคุณเกี่ยวกับตัวดำเนินการ ...

ในความเป็นจริงตัวดำเนินการนี้ขึ้นอยู่กับ ตำแหน่งในโค้ดสามารถเรียกได้ว่าเป็นตัวดำเนินการ spread หรือตัวดำเนินการ rest

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

ตอนนี้เราจะมาหาคำตอบกัน ว่ามีไว้เพื่ออะไร สมมติ เรามีฟังก์ชันที่รับพารามิเตอร์สองตัว:

javascriptfunction func(a, b) {
  console.log(a);
  console.log(b);
}

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

javascriptfunc(1, 2, 3, 4, 5);

ตัวดำเนินการ rest ช่วยให้ได้รับ พารามิเตอร์ส่วนเกินทั้งหมดในรูปแบบของอาร์เรย์ สำหรับสิ่งนี้ ในฟังก์ชันจะเพิ่มพารามิเตอร์อีกหนึ่งตัว (จำเป็นต้องอยู่ สุดท้าย) โดยเขียน 3 จุดหน้าพารามิเตอร์นั้น:

javascriptfunction func(a, b, ...rest) {
  
}

จุดสามจุดนี้คือตัวดำเนินการ rest และชื่อ ตัวแปรสามารถตั้งชื่ออะไรก็ได้ แต่ ปกติก็มักจะเรียกมันว่า rest เช่นกัน

ลองเรียกฟังก์ชันของเราด้วยจำนวนพารามิเตอร์ที่เกิน และดูสิว่าอะไรจะเข้าไปอยู่ในพารามิเตอร์ a และ b และอะไร - จะเข้าไปในส่วนที่เหลือ rest:

javascriptfunc(1, 2, 3, 4, 5);

function func(a, b, ...rest) {
  console.log(a);    // แสดงผล 1
  console.log(b);    // แสดงผล 2
  console.log(rest); // แสดงผล [3, 4, 5]
}

หากไม่มีพารามิเตอร์ส่วนเกิน ตัวแปร rest จะถูกบันทึกเป็นอาร์เรย์ว่าง:

javascriptfunc(1, 2);

function func(a, b, ...rest) {
  console.log(a);    // แสดงผล 1
  console.log(b);    // แสดงผล 2
  console.log(rest); // แสดงผล []
}

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

javascriptfunction func(...rest) {
  console.log(rest);
}