งานทำลายล้าง

โครงสร้างข้อมูลที่ใช้มากที่สุดสองโครงสร้างใน JavaScript คือ Object และ Array

• ออบเจ็กต์ช่วยให้เราสามารถสร้างเอนทิตีเดียวที่จัดเก็บรายการข้อมูลตามคีย์

• อาร์เรย์ช่วยให้เรารวบรวมข้อมูลลงในรายการที่เรียงลำดับได้

อย่างไรก็ตาม เมื่อเราส่งต่อสิ่งเหล่านี้ไปยังฟังก์ชัน เราอาจไม่ต้องการมันทั้งหมด ฟังก์ชันอาจต้องการองค์ประกอบหรือคุณสมบัติบางอย่างเท่านั้น

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

การทำลายโครงสร้างยังทำงานได้ดีกับฟังก์ชันที่ซับซ้อนซึ่งมีพารามิเตอร์ ค่าเริ่มต้น และอื่นๆ จำนวนมาก อีกไม่นานเราจะได้เห็นสิ่งนั้น

การทำลายล้างอาร์เรย์

ต่อไปนี้เป็นตัวอย่างวิธีการลดโครงสร้างอาร์เรย์ให้เป็นตัวแปร:

 // เรามีอาร์เรย์ที่มีชื่อและนามสกุล
ให้ arr = ["จอห์น", "สมิธ"]

// ทำลายการมอบหมายงาน
// ตั้งชื่อแรก = arr[0]
// และนามสกุล = arr[1]
ให้ [ชื่อ, นามสกุล] = arr;

การแจ้งเตือน (ชื่อ); // จอห์น
การแจ้งเตือน(นามสกุล);  // สมิธ

ตอนนี้เราสามารถทำงานกับตัวแปรแทนสมาชิกอาเรย์ได้

มันดูดีเมื่อรวมกับวิธี split หรือส่งคืนอาร์เรย์อื่น ๆ :

 ให้ [ชื่อ, นามสกุล] = "John Smith".split(' ');
การแจ้งเตือน (ชื่อ); // จอห์น
การแจ้งเตือน(นามสกุล);  // สมิธ

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

“การทำลายล้าง” ไม่ได้หมายถึง “การทำลายล้าง”

เรียกว่า "การกำหนดการทำลายล้าง" เนื่องจากเป็นการ "ทำลายล้าง" โดยการคัดลอกรายการต่างๆ ลงในตัวแปร อย่างไรก็ตาม ตัวอาร์เรย์เองไม่ได้ถูกแก้ไข

มันเป็นเพียงวิธีที่สั้นกว่าในการเขียน:

 // ให้ [ชื่อ, นามสกุล] = arr;
ให้ firstName = arr[0];
ให้นามสกุล = arr[1];

ละเว้นองค์ประกอบโดยใช้เครื่องหมายจุลภาค

องค์ประกอบที่ไม่ต้องการของอาเรย์สามารถถูกโยนทิ้งไปโดยใช้เครื่องหมายจุลภาคพิเศษ:

 // ไม่จำเป็นต้องใช้องค์ประกอบที่สอง
ให้ [ชื่อ, , ตำแหน่ง] = ["จูเลียส", "ซีซาร์", "กงสุล", "ของสาธารณรัฐโรมัน"];

การแจ้งเตือน (หัวเรื่อง); //กงสุล

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

ใช้งานได้กับสิ่งที่ทำซ้ำได้ทางด้านขวา

…จริงๆ แล้ว เราสามารถใช้กับมันที่สามารถทำซ้ำได้ ไม่ใช่แค่อาร์เรย์เท่านั้น:

 ให้ [a, b, c] = "abc"; // ["ก", "ข", "ค"]
ให้ [หนึ่ง สอง สาม] = ชุดใหม่ ([1, 2, 3]);

นั่นได้ผล เพราะภายในงานการทำลายโครงสร้างทำงานโดยการวนซ้ำค่าที่ถูกต้อง มันเป็นไวยากรณ์ชนิดหนึ่งสำหรับการเรียก for..of เหนือค่าทางด้านขวาของ = และการกำหนดค่า

กำหนดให้กับอะไรก็ได้ทางด้านซ้าย

เราสามารถใช้ "มอบหมาย" ใดก็ได้ทางด้านซ้าย

ตัวอย่างเช่น คุณสมบัติวัตถุ:

 ให้ผู้ใช้ = {};
[user.name, user.surname] = "จอห์น สมิธ".split(' ');

การแจ้งเตือน (ชื่อผู้ใช้); // จอห์น
การแจ้งเตือน(user.surname); // สมิธ

วนซ้ำด้วย .entries()

ในบทที่แล้ว เราเห็นเมธอด Object.entries(obj)

เราสามารถใช้มันกับการทำลายล้างเพื่อวนซ้ำคีย์และค่าของวัตถุ:

 ให้ผู้ใช้ = {
  ชื่อ: "จอห์น"
  อายุ: 30
-

// วนซ้ำคีย์และค่า
สำหรับ (ให้ [คีย์, ค่า] ของ Object.entries (ผู้ใช้)) {
  alert(`${key}:${value}`); // ชื่อ:จอห์น อายุ:30
-

โค้ดที่คล้ายกันสำหรับ Map นั้นง่ายกว่า เนื่องจากสามารถทำซ้ำได้:

 ให้ผู้ใช้ = แผนที่ใหม่ ();
user.set("ชื่อ", "จอห์น");
user.set("อายุ", "30");

// แมปวนซ้ำเป็นคู่ [คีย์, ค่า] ซึ่งสะดวกมากสำหรับการทำลายโครงสร้าง
สำหรับ (ให้ [คีย์, ค่า] ของผู้ใช้) {
  alert(`${key}:${value}`); // ชื่อ:จอห์น อายุ:30
-

เคล็ดลับการสลับตัวแปร

มีเคล็ดลับที่รู้จักกันดีในการสลับค่าของตัวแปรสองตัวโดยใช้การกำหนดการทำลายล้าง:

 ให้แขก = "เจน";
ให้ admin = "พีท";

// มาสลับค่ากัน: make guest=Pete, admin=Jane
[แขก ผู้ดูแลระบบ] = [ผู้ดูแลระบบ แขก];

alert(`${guest} ${admin}`); // พีท เจน (สลับสำเร็จ!)

ที่นี่เราสร้างอาร์เรย์ชั่วคราวของตัวแปรสองตัวและทำลายโครงสร้างทันทีตามลำดับที่สลับกัน

เราสามารถสลับตัวแปรได้มากกว่าสองตัวด้วยวิธีนี้

ที่เหลือ '...'

โดยปกติ หากอาร์เรย์ยาวกว่ารายการทางด้านซ้าย รายการ “พิเศษ” จะถูกละเว้น

ตัวอย่างเช่น ที่นี่มีเพียงสองรายการเท่านั้นที่ถูกนำไปใช้ และส่วนที่เหลือจะถูกละเว้น:

 ให้ [name1, name2] = ["จูเลียส", "ซีซาร์", "กงสุล", "แห่งสาธารณรัฐโรมัน"];

การแจ้งเตือน (name1); //จูเลียส
การแจ้งเตือน (name2); //ซีซาร์
// รายการเพิ่มเติมไม่ได้ถูกกำหนดไว้ที่ใดเลย

หากเราต้องการรวบรวมสิ่งที่ตามมาทั้งหมดด้วย เราสามารถเพิ่มพารามิเตอร์อีกหนึ่งตัวที่จะรับ "ส่วนที่เหลือ" โดยใช้จุดสามจุด "..." :

 ให้ [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

//rest คืออาร์เรย์ของไอเท็ม โดยเริ่มจากอันที่ 3
การแจ้งเตือน (พักผ่อน[0]); //กงสุล
การแจ้งเตือน (พักผ่อน[1]); // แห่งสาธารณรัฐโรมัน
การแจ้งเตือน (ส่วนที่เหลือความยาว); // 2

ค่า rest คืออาร์เรย์ขององค์ประกอบอาร์เรย์ที่เหลือ

เราสามารถใช้ชื่อตัวแปรอื่นแทนส่วน rest เพียงตรวจสอบให้แน่ใจว่ามีจุดสามจุดอยู่ข้างหน้าและไปสุดท้ายในการกำหนดการทำลายล้าง

 ให้ [name1, name2, ...titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// ตอนนี้ชื่อ = ["กงสุล", "ของสาธารณรัฐโรมัน"]

ค่าเริ่มต้น

หากอาร์เรย์สั้นกว่ารายการตัวแปรทางด้านซ้าย ก็จะไม่มีข้อผิดพลาด ค่าที่ขาดไปถือว่าไม่ได้กำหนด:

 ให้ [ชื่อ, นามสกุล] = [];

การแจ้งเตือน (ชื่อ); // ไม่ได้กำหนด
การแจ้งเตือน(นามสกุล); // ไม่ได้กำหนด

หากเราต้องการให้ค่า “default” มาแทนที่ค่าที่หายไป เราสามารถระบุได้โดยใช้ = :

 // ค่าเริ่มต้น
ให้ [name = "Guest", นามสกุล = "Anonymous"] = ["Julius"];

การแจ้งเตือน (ชื่อ);    // Julius (จากอาร์เรย์)
การแจ้งเตือน(นามสกุล); // ไม่ระบุชื่อ (ใช้ค่าเริ่มต้น)

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

ตัวอย่างเช่น เราใช้ฟังก์ชัน prompt สำหรับค่าเริ่มต้นสองค่า:

 // เรียกใช้เฉพาะพร้อมท์สำหรับนามสกุล
ให้ [name = prompt('name?'), surname = prompt('surname?')] = ["จูเลียส"];

การแจ้งเตือน (ชื่อ);    // Julius (จากอาร์เรย์)
การแจ้งเตือน(นามสกุล); // ได้รับพร้อมท์อะไรก็ตาม

โปรดทราบ: prompt จะทำงานเฉพาะกับค่าที่หายไป ( surname )

การทำลายล้างวัตถุ

การมอบหมายการทำลายล้างยังใช้ได้กับวัตถุอีกด้วย

ไวยากรณ์พื้นฐานคือ:

 ให้ {var1, var2} = {var1:…, var2:…}

เราควรมีวัตถุที่มีอยู่ทางด้านขวาซึ่งเราต้องการแบ่งออกเป็นตัวแปร ด้านซ้ายมี "รูปแบบ" เหมือนวัตถุสำหรับคุณสมบัติที่เกี่ยวข้อง ในกรณีที่ง่ายที่สุด นั่นคือรายการชื่อตัวแปรใน {...}

ตัวอย่างเช่น:

 ให้ตัวเลือก = {
  หัวเรื่อง: "เมนู",
  ความกว้าง: 100,
  ส่วนสูง: 200
-

ให้ {ชื่อ, ความกว้าง, ความสูง} = ตัวเลือก;

การแจ้งเตือน (ชื่อเรื่อง);  // เมนู
การแจ้งเตือน (กว้าง);  // 100
การแจ้งเตือน (ส่วนสูง); // 200

คุณสมบัติ options.title , options.width และ options.height ถูกกำหนดให้กับตัวแปรที่เกี่ยวข้อง

คำสั่งซื้อไม่สำคัญ วิธีนี้ใช้ได้ผลเช่นกัน:

 // เปลี่ยนลำดับใน la {...}
ให้ {ความสูง ความกว้าง ชื่อ} = { ชื่อ: "เมนู" ความสูง: 200 ความกว้าง: 100 }

รูปแบบทางด้านซ้ายอาจซับซ้อนกว่าและระบุการจับคู่ระหว่างคุณสมบัติและตัวแปร

หากเราต้องการกำหนดคุณสมบัติให้กับตัวแปรด้วยชื่ออื่น เช่น ให้ options.width เข้าไปในตัวแปรชื่อ w จากนั้นเราสามารถตั้งชื่อตัวแปรโดยใช้โคลอน:

 ให้ตัวเลือก = {
  หัวเรื่อง: "เมนู",
  ความกว้าง: 100,
  ส่วนสูง: 200
-

// { sourceProperty: targetVariable }
ให้ {width: w, height: h, title} = ตัวเลือก;

// ความกว้าง -> W
// ความสูง -> ชม
// หัวเรื่อง -> หัวเรื่อง

การแจ้งเตือน (ชื่อเรื่อง);  // เมนู
การแจ้งเตือน(w);      // 100
การแจ้งเตือน(ซ);      // 200

เครื่องหมายทวิภาคจะแสดงคำว่า “อะไร : ไปที่ไหน” ในตัวอย่างด้านบน width ของคุณสมบัติไปที่ w height ของคุณสมบัติไปที่ h และ title ถูกกำหนดให้เป็นชื่อเดียวกัน

สำหรับคุณสมบัติที่อาจหายไป เราสามารถตั้งค่าเริ่มต้นโดยใช้ "=" เช่นนี้

 ให้ตัวเลือก = {
  หัวเรื่อง: "เมนู"
-

ให้ {width = 100, height = 200, title} = ตัวเลือก;

การแจ้งเตือน (ชื่อเรื่อง);  // เมนู
การแจ้งเตือน (กว้าง);  // 100
การแจ้งเตือน (ส่วนสูง); // 200

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

ในโค้ดด้านล่าง prompt จะถาม width แต่ไม่ใช่สำหรับ title :

 ให้ตัวเลือก = {
  หัวเรื่อง: "เมนู"
-

ให้ {width = prompt("width?"), title = prompt("title?")} = ตัวเลือก;

การแจ้งเตือน (ชื่อเรื่อง);  // เมนู
การแจ้งเตือน (กว้าง);  // (ไม่ว่าผลลัพธ์ของ prompt จะเป็นอย่างไร)

นอกจากนี้เรายังสามารถรวมทั้งเครื่องหมายทวิภาคและความเท่าเทียมกันได้:

 ให้ตัวเลือก = {
  หัวเรื่อง: "เมนู"
-

ให้ {ความกว้าง: w = 100, ความสูง: h = 200, ชื่อ} = ตัวเลือก;

การแจ้งเตือน (ชื่อเรื่อง);  // เมนู
การแจ้งเตือน(w);      // 100
การแจ้งเตือน(ซ);      // 200

หากเรามีวัตถุที่ซับซ้อนซึ่งมีคุณสมบัติมากมาย เราสามารถแยกเฉพาะสิ่งที่เราต้องการได้:

 ให้ตัวเลือก = {
  หัวเรื่อง: "เมนู",
  ความกว้าง: 100,
  ส่วนสูง: 200
-

// แยกเฉพาะชื่อเป็นตัวแปร
ให้ { title } = ตัวเลือก;

การแจ้งเตือน (ชื่อเรื่อง); // เมนู

รูปแบบที่เหลือ “…”

จะเกิดอะไรขึ้นถ้าวัตถุมีคุณสมบัติมากกว่าที่เรามีตัวแปร? เราเอาบางส่วนแล้วกำหนด "ส่วนที่เหลือ" ที่ไหนสักแห่งได้ไหม?

เราสามารถใช้รูปแบบที่เหลือได้ เช่นเดียวกับที่เราทำกับอาร์เรย์ เบราว์เซอร์รุ่นเก่าบางรุ่นไม่รองรับ (IE ใช้ Babel เพื่อเติมโพลี) แต่ใช้งานได้ในเบราว์เซอร์สมัยใหม่

ดูเหมือนว่านี้:

 ให้ตัวเลือก = {
  หัวเรื่อง: "เมนู",
  ส่วนสูง: 200,
  ความกว้าง: 100
-

// title = คุณสมบัติที่มีชื่อ title
//rest = object ที่มีคุณสมบัติที่เหลือ
ให้ {title, ...rest} = ตัวเลือก;

// ตอนนี้ชื่อ = "เมนู", ส่วนที่เหลือ = {ความสูง: 200, ความกว้าง: 100}
การแจ้งเตือน (rest.height);  // 200
การแจ้งเตือน (rest.width);   // 100

Gotcha หากไม่มี let

ในตัวอย่างข้างต้น มีการประกาศตัวแปรอย่างถูกต้องในงาน: let {…} = {…} แน่นอนว่าเราสามารถใช้ตัวแปรที่มีอยู่ได้เช่นกัน โดยไม่ต้อง let แต่ก็มีสิ่งที่จับได้

สิ่งนี้จะไม่ทำงาน:

 ให้ชื่อ, ความกว้าง, ความสูง;

// เกิดข้อผิดพลาดในบรรทัดนี้
{ชื่อ ความกว้าง ความสูง} = {ชื่อ: "เมนู" ความกว้าง: 200 ความสูง: 100};

ปัญหาคือ JavaScript ถือว่า {...} ในโฟลว์โค้ดหลัก (ไม่ใช่ในนิพจน์อื่น) เสมือนเป็นบล็อกโค้ด บล็อกโค้ดดังกล่าวสามารถใช้เพื่อจัดกลุ่มคำสั่งได้ เช่นนี้

 -
  // บล็อกโค้ด
  ให้ข้อความ = "สวัสดี";
  -
  แจ้งเตือน( ข้อความ );
-

ตรงนี้ JavaScript จะถือว่าเรามีบล็อกโค้ด นั่นคือสาเหตุที่ทำให้เกิดข้อผิดพลาด เราต้องการทำลายล้างแทน

หากต้องการแสดง JavaScript ว่าไม่ใช่บล็อกโค้ด เราสามารถใส่นิพจน์ไว้ในวงเล็บ (...) :

 ให้ชื่อ, ความกว้าง, ความสูง;

// เอาล่ะตอนนี้
({ชื่อ ความกว้าง ความสูง} = {ชื่อ: "เมนู" ความกว้าง: 200 ความสูง: 100});

การแจ้งเตือน (หัวเรื่อง); // เมนู

การทำลายล้างที่ซ้อนกัน

หากวัตถุหรืออาร์เรย์มีวัตถุและอาร์เรย์ที่ซ้อนกันอยู่ เราสามารถใช้รูปแบบด้านซ้ายที่ซับซ้อนมากขึ้นเพื่อแยกส่วนที่ลึกลงไปได้

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

 ให้ตัวเลือก = {
  ขนาด: {
    ความกว้าง: 100,
    ส่วนสูง: 200
  -
  รายการ: ["เค้ก", "โดนัท"],
  พิเศษ: จริง
-

// การทำลายการกำหนดโครงสร้างแบ่งออกเป็นหลายบรรทัดเพื่อความชัดเจน
อนุญาต {
  ขนาด: { // ใส่ขนาดที่นี่
    ความกว้าง,
    ความสูง
  -
  รายการ: [item1, item2], // กำหนดรายการที่นี่
  title = "เมนู" // ไม่มีอยู่ในวัตถุ (ใช้ค่าเริ่มต้น)
} = ตัวเลือก;

การแจ้งเตือน (ชื่อเรื่อง);  // เมนู
การแจ้งเตือน (กว้าง);  // 100
การแจ้งเตือน (ส่วนสูง); // 200
การแจ้งเตือน (รายการที่ 1);  // เค้ก
การแจ้งเตือน (รายการที่ 2);  //โดนัท

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

สุดท้ายนี้ เรามี width , height , item1 , item2 และ title จากค่าเริ่มต้น

โปรดทราบว่าไม่มีตัวแปรสำหรับ size และ items เนื่องจากเราใช้เนื้อหาแทน

พารามิเตอร์ฟังก์ชั่นอัจฉริยะ

มีหลายครั้งที่ฟังก์ชันมีพารามิเตอร์หลายตัว ซึ่งส่วนใหญ่เป็นทางเลือก โดยเฉพาะอย่างยิ่งสำหรับอินเทอร์เฟซผู้ใช้ ลองนึกภาพฟังก์ชั่นที่สร้างเมนู อาจมีความกว้าง ความสูง ชื่อเรื่อง รายการสินค้า และอื่นๆ

นี่เป็นวิธีที่ไม่ดีในการเขียนฟังก์ชันดังกล่าว:

 ฟังก์ชั่น showMenu (ชื่อ = "ไม่มีชื่อ", ความกว้าง = 200, ความสูง = 100, รายการ = []) {
  -
-

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

แบบนี้?

 // ไม่ได้กำหนดโดยที่ค่าเริ่มต้นนั้นใช้ได้
showMenu("เมนูของฉัน", ไม่ได้กำหนด, ไม่ได้กำหนด, ["Item1", "Item2"])

นั่นน่าเกลียด และไม่สามารถอ่านได้เมื่อเราจัดการกับพารามิเตอร์เพิ่มเติม

การทำลายล้างมาช่วยแล้ว!

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

 // เราส่งวัตถุไปยังฟังก์ชัน
ให้ตัวเลือก = {
  title: "เมนูของฉัน",
  รายการ: ["รายการ 1", "รายการ 2"]
-

// ...และมันจะขยายเป็นตัวแปรทันที
ฟังก์ชั่น showMenu ({title = "ไม่มีชื่อ", ความกว้าง = 200, ความสูง = 100, รายการ = []}) {
  // ชื่อ, รายการ – นำมาจากตัวเลือก,
  // ความกว้าง ความสูง – เป็นค่าเริ่มต้นที่ใช้
  alert( `${title} ${width} ${height}` ); // เมนูของฉัน 200 100
  การแจ้งเตือน (รายการ); // รายการที่ 1, รายการที่ 2
-

showMenu(ตัวเลือก);

นอกจากนี้เรายังสามารถใช้การทำลายล้างที่ซับซ้อนมากขึ้นกับวัตถุที่ซ้อนกันและการแมปโคลอน:

 ให้ตัวเลือก = {
  title: "เมนูของฉัน",
  รายการ: ["รายการ 1", "รายการ 2"]
-

ฟังก์ชั่น showMenu({
  title = "ไม่มีชื่อ",
  ความกว้าง: w = 100, // ความกว้างไปที่ w
  ความสูง: h = 200, // ความสูงไปที่ h
  รายการ: [item1, item2] // องค์ประกอบแรกของรายการไปที่ item1 รองจาก item2
-
  การแจ้งเตือน ( `${title} ${w} ${h}` ); // เมนูของฉัน 100 200
  การแจ้งเตือน( item1 ); // รายการที่ 1
  การแจ้งเตือน (รายการที่ 2 ); // รายการที่ 2
-

showMenu(ตัวเลือก);

ไวยากรณ์แบบเต็มเหมือนกับการกำหนดการทำลายล้าง:

 การทำงาน({
  คุณสมบัติขาเข้า: varName = defaultValue
  -
-

จากนั้น สำหรับออบเจ็กต์ของพารามิเตอร์ จะมีตัวแปร varName สำหรับคุณสมบัติ incomingProperty โดยมี defaultValue เป็นค่าเริ่มต้น

โปรดทราบว่าการทำลายโครงสร้างดังกล่าวถือว่า showMenu() มีข้อโต้แย้ง หากเราต้องการค่าทั้งหมดเป็นค่าเริ่มต้น เราควรระบุวัตถุว่าง:

 แสดงเมนู({}); // ตกลง ค่าทั้งหมดเป็นค่าเริ่มต้น

แสดงเมนู(); // นี่จะทำให้เกิดข้อผิดพลาด

เราสามารถแก้ไขได้โดยทำให้ {} เป็นค่าเริ่มต้นสำหรับวัตถุทั้งหมดของพารามิเตอร์:

 ฟังก์ชั่น showMenu ({ title = "เมนู", ความกว้าง = 100, ความสูง = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
-

แสดงเมนู(); // เมนู 100 200

ในโค้ดด้านบน ออบเจ็กต์อาร์กิวเมนต์ทั้งหมดจะเป็น {} ตามค่าเริ่มต้น ดังนั้นจึงมีบางสิ่งที่ต้องทำลายล้างอยู่เสมอ

สรุป

• การกำหนดการทำลายโครงสร้างช่วยให้สามารถแมปวัตถุหรืออาเรย์กับตัวแปรจำนวนมากได้ทันที

• ไวยากรณ์ของวัตถุแบบเต็ม:

   ให้ {prop : varName = defaultValue, ...rest} = object

  ซึ่งหมายความว่าคุณสมบัติ prop ควรเข้าไปในตัวแปร varName และหากไม่มีคุณสมบัติดังกล่าว ก็ควรใช้ค่า default

  คุณสมบัติวัตถุที่ไม่มีการแมปจะถูกคัดลอกไปยังวัตถุ rest

• ไวยากรณ์อาร์เรย์แบบเต็ม:

   ให้ [item1 = defaultValue, item2, ...rest] = array

  รายการแรกไปที่ item1 ; ส่วนที่สองจะเข้าสู่ item2 และส่วนที่เหลือทั้งหมดจะทำให้อาร์เรย์ rest

• เป็นไปได้ที่จะแยกข้อมูลจากอาร์เรย์/อ็อบเจ็กต์ที่ซ้อนกัน โดยด้านซ้ายจะต้องมีโครงสร้างเดียวกันกับด้านขวา

งาน

งานทำลายล้าง

ความสำคัญ: 5

เรามีวัตถุ:

 ให้ผู้ใช้ = {
  ชื่อ: "จอห์น"
  ปี: 30
-

เขียนงานทำลายล้างว่า:

• name คุณสมบัติเข้าไปใน name ตัวแปร

• years ทรัพย์สินเป็น age ตัวแปร

• คุณสมบัติ isAdmin ลงในตัวแปร isAdmin (false หากไม่มีคุณสมบัติดังกล่าว)

นี่คือตัวอย่างค่าหลังจากการมอบหมายงานของคุณ:

 ให้ผู้ใช้ = { ชื่อ: "จอห์น", ปี: 30 };

// รหัสของคุณทางด้านซ้าย:
// ... = ผู้ใช้

การแจ้งเตือน (ชื่อ); // จอห์น
การแจ้งเตือน (อายุ); // 30
การแจ้งเตือน ( isAdmin ); // เท็จ

สารละลาย

 ให้ผู้ใช้ = {
  ชื่อ: "จอห์น"
  ปี: 30
-

ให้ {ชื่อ, ปี: อายุ, isAdmin = false} = ผู้ใช้;

การแจ้งเตือน (ชื่อ); // จอห์น
การแจ้งเตือน (อายุ); // 30
การแจ้งเตือน ( isAdmin ); // เท็จ

เงินเดือนสูงสุด

ความสำคัญ: 5

มีวัตถุ salaries :

 ให้เงินเดือน = {
  "จอห์น": 100,
  "พีท": 300,
  "แมรี่": 250
-

สร้างฟังก์ชัน topSalary(salaries) ที่ส่งคืนชื่อของบุคคลที่มีรายได้สูงสุด

• หาก salaries ว่างเปล่า ก็ควรส่งคืน null

• หากมีผู้จ่ายเงินสูงสุดหลายราย ให้คืนคนใดคนหนึ่ง

PS ใช้ Object.entries และการทำลายโครงสร้างเพื่อวนซ้ำคู่คีย์/ค่า

เปิดแซนด์บ็อกซ์พร้อมการทดสอบ

สารละลาย

 ฟังก์ชั่น topSalary(เงินเดือน) {

  ให้ maxSalary = 0;
  ให้ maxName = null;

  สำหรับ (const [ชื่อ, เงินเดือน] ของ Object.entries (เงินเดือน)) {
    ถ้า (maxSalary < เงินเดือน) {
      maxSalary = เงินเดือน;
      maxName = ชื่อ;
    -
  -

  กลับชื่อสูงสุด;
-

เปิดโซลูชันพร้อมการทดสอบในแซนด์บ็อกซ์