วงเล็บปีกกาภายในรายการพารามิเตอร์ฟังก์ชันทำอะไรใน es6

ฉันมักจะเห็นฟังก์ชันที่มีลักษณะเช่นนี้ใน codebase ที่ฉันกำลังทำงานอยู่:

const func = ({ param1, param2 }) => {
  //do stuff
}

นี่มันทำอะไรกันแน่? ฉันมีปัญหาในการค้นหาใน Google เพราะฉันไม่แน่ใจด้วยซ้ำว่าสิ่งนี้เรียกว่าอะไรหรือจะอธิบายอย่างไรในการค้นหาของ Google

เป็นการทำลายโครงสร้างแต่มีอยู่ในพารามิเตอร์ สิ่งที่เทียบเท่าโดยไม่มีการทำลายล้างจะเป็น:

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}

นี่คือการส่งผ่านวัตถุเป็นคุณสมบัติ

โดยทั่วไปเป็นชวเลขสำหรับ

let param1 = someObject.param1
let param2 = someObject.param2

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

let {param1, param2} = someObject;

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

สนับสนุนรูปแบบสั้น ๆ ที่คุณพบตลอดจนการเปลี่ยนชื่อฟิลด์และอาร์กิวเมนต์เริ่มต้น:

โดยพื้นฐานแล้วมันคือ {oldkeyname: newkeyname = defaultvalue, ... } ':' ไม่ใช่ตัวคั่นคีย์ / ค่า '=' คือ

ผลเสียบางประการของการตัดสินใจออกแบบภาษานี้คือคุณอาจต้องทำสิ่งต่างๆเช่น

({A, B =} some_object);

parens เสริมป้องกันไม่ให้วงเล็บปีกกาด้านซ้ายแยกวิเคราะห์เป็นบล็อกและอัฒภาคชั้นนำจะป้องกันไม่ให้ parens แยกวิเคราะห์เป็นการเรียกฟังก์ชันไปยังฟังก์ชันในบรรทัดก่อนหน้า

ดูข้อมูลเพิ่มเติมได้ที่: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

ระวังข้อผิดพลาดที่สำคัญระหว่างการกำหนดการทำลายวัตถุอย่าโยน; คุณเพียงแค่ลงท้ายด้วยค่า "ไม่ได้กำหนด" ไม่ว่าจะเป็นข้อผิดพลาดที่สำคัญหรือข้อผิดพลาดอื่น ๆ ที่แพร่กระจายแบบเงียบ ๆ เป็น "ไม่ได้กำหนด"

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>