การสอนการเรียนรู้ JavaScript
ES6 มีโหมดการกำหนดงานที่กระชับมากขึ้นเพื่อแยกค่าจากอาร์เรย์และอ็อบเจ็กต์ ซึ่งเรียกว่าการทำลายโครงสร้าง
ตัวอย่าง:
[a, b] = [50, 100]; console.log(ก); // ผลลัพธ์ที่คาดหวัง: 50 console.log(ข); // ผลลัพธ์ที่คาดหวัง: 100 [ก, ข, ...พัก] = [10, 20, 30, 40, 50]; console.log (ส่วนที่เหลือ); // เอาต์พุตที่คาดหวัง: [30, 40, 50]
ทำลายโครงสร้างอาร์เรย์นั้นง่ายและกระชับมาก ใช้อาร์เรย์ตามตัวอักษรทางด้านซ้ายของนิพจน์การกำหนดโครงสร้าง อาร์เรย์ รายการ
หมายถึงอะไร เช่นเดียวกับตัวอย่างด้านล่าง รายการในอาร์เรย์ทางด้านซ้ายจะได้รับค่าของดัชนีที่สอดคล้องกันของอาร์เรย์ที่ทำลายล้างทางด้านขวา
ให้ [a, b, c] = [1, 2, 3]; // ก = 1 // ข = 2 // c = 3
คุณสามารถแยกโครงสร้างการมอบหมายแยกกันผ่านการประกาศตัวแปร
ตัวอย่าง: ประกาศตัวแปร กำหนดค่าแยกกัน
// ประกาศตัวแปร ให้ a, b; // จากนั้นกำหนดค่า [a, b] = [1, 2]; console.log(ก); // 1 console.log(b); // 2
หากค่าที่นำออกไปโดยการทำลายโครงสร้าง undefined คุณสามารถตั้งค่าเริ่มต้นได้:
ให้ a, b; // ตั้งค่าเริ่มต้น [a = 5, b = 7] = [1]; console.log(ก); // 1 console.log(b); // 7
ในตัวอย่างข้างต้น เราตั้งค่าเริ่มต้นสำหรับทั้ง a และ b ในกรณีนี้ หากค่าของ a หรือ b undefined มันจะกำหนดค่าเริ่มต้นที่ตั้งไว้ให้กับค่าที่เกี่ยวข้อง ตัวแปร (5 ถูกกำหนดให้กับ a, 7 ถูกกำหนดให้กับ b)
ในอดีตเมื่อเราแลกเปลี่ยนตัวแปรสองตัว เราจะใช้
//exchange abc = a;a = b;b = c
;
อย่างไรก็ตาม ในการถอดรหัส ในการมอบหมาย เราสามารถแลกเปลี่ยนค่าของตัวแปรสองตัวในนิพจน์การทำลายล้าง
ให้ a = 1; ให้ b = 3;//แลกเปลี่ยนค่าของ a และ b [a, b] = [b, a]; console.log(a); // 3console.log(b); // 1
แยก
ได้โดยตรง
return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20
ในตัวอย่างข้างต้น ** ค่าส่งคืน [10, 20] ของ c()** สามารถนำมาใช้ในบรรทัดแยกต่างหากของโค้ด
คุณสามารถเลือกข้าม
ฟังก์ชันค่าส่งคืนที่ไม่ต้องการ c ( ) {
return [1, 2, 3];} ให้ [a, , b] = c();console.log(a); // 1console.log(b); // 3 เมื่อคุณใช้การทำลายอาร์เรย์ คุณสามารถกำหนดส่วนที่เหลือทั้งหมดของอาร์เรย์ที่กำหนดให้กับตัวแปร
ให้ [a, ...b] = [1, 2, 3];console.log(a); .log(b ); // [2, 3]
ในกรณีนี้ b จะกลายเป็นอาร์เรย์ด้วย และรายการในอาร์เรย์จะเป็นรายการที่เหลือทั้งหมด
หมายเหตุ:
ระวังตรงนี้ด้วยว่าคุณไม่สามารถเขียนเครื่องหมายจุลภาคต่อท้ายได้ หากมีเครื่องหมายจุลภาคเกินมา ระบบจะรายงานข้อผิดพลาด
ให้ [a, ...b,] = [1, 2, 3];// SyntaxError: องค์ประกอบส่วนที่เหลือ อาจไม่มีเครื่องหมายจุลภาคต่อท้าย
เช่นเดียวกับวัตถุ อาร์เรย์ก็สามารถซ้อนกันได้
ตัวอย่าง:
const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)']; // ใช้การทำลายโครงสร้างแบบซ้อนเพื่อกำหนดสีแดง เขียว และน้ำเงิน // ใช้การทำลายโครงสร้างแบบซ้อนเพื่อกำหนดสีแดง เขียว น้ำเงิน const [hex, [red, green, blue]] = สี; console.log(hex, red, green, blue); // #FF00FF 255 0 255
ในอาร์เรย์ destructuring ถ้าเป้าหมายของ destructuring เป็นวัตถุที่สามารถผ่านได้ การทำลายล้างและการกำหนดสามารถดำเนินการได้ traversable object จะใช้อินเทอร์เฟซ Iterator ข้อมูล
ให้ [a, b, c, d, e] = 'hello';/* ก = 'h' ข = 'อี' ค = 'ล' ง = 'ล' อี = 'โอ' */
ให้ x = { y: 22, z: true };
ให้ { y, z } = x; // ให้ {y:y,z:z} = ตัวย่อของ x; console.log(y);
console.log(z); // true สามารถเปลี่ยนแปลงได้เมื่อใช้การทำลายโครงสร้างวัตถุ
ให้ o = { p: 22, q: true };
ให้ { p: foo, q: bar } = o;
console.log(foo); // 22
console.log(bar); // รหัสจริง ตามด้านบน var {p: =
var {p: foo} = o รับชื่อคุณสมบัติ p ของวัตถุ o จากนั้นกำหนดให้กับตัวแปรชื่อ foo
ออกโดยการทำลายโครงสร้าง undefined เราสามารถตั้งค่าเริ่มต้น
ให้ { a = 10, b = 5 } = { a: 3 };
console.log(ก); // 3
console.log(b); // 5 ดังที่กล่าวไว้ข้างต้น เรากำหนดค่าให้กับชื่ออ็อบเจ็กต์ใหม่ได้ หากไม่ได้แยกส่วน ค่าเริ่มต้นจะถูกใช้โดยอัตโนมัติ
ให้ { a: aa = 10, b: bb = 5 } = { a: 3 };
console.log(aa); // 3
console.log(bb); // 5 ใช้
กัน
{ id: 1 ชื่อ: 'ฟอง' },
{ รหัส: 2 ชื่อ: 'บัซ' },
{ รหัส: 3 ชื่อ: 'FizzBuzz' },
-
const [, , { ชื่อ }] = อุปกรณ์ประกอบฉาก;
console.log(name); // "FizzBuzz" ให้ obj = {p: [{y: 'world'}] };
ให้ {p: [{ y }, x ] } = obj;//อย่าแยกโครงสร้าง x
// x = ไม่ได้กำหนด
// y = 'world' ให้ {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// ก = 10
// ข = 20
// ส่วนที่เหลือ = {c: 30, d: 40} ให้ obj = {p: ['hello', {y: 'world'}] };
ให้ {p: [x, { y }] } = obj;
// x = 'สวัสดี'
// y = 'โลก'
ให้ obj = {p: ['สวัสดี', {y: 'โลก'}] };
ให้ {p: [x, { }] } = obj;//ละเว้น y
// x = 'hello' การสาธิตข้อผิดพลาดในการทำลายโครงสร้าง:
ให้ x;{x} = {x: 1}; โปรแกรม JavaScript จะเข้าใจว่า {x} เป็นบล็อกโค้ด ทำให้เกิดไวยากรณ์ ข้อผิดพลาด เราต้องการหลีกเลี่ยงการเขียนเครื่องหมายปีกกาที่จุดเริ่มต้นของบรรทัดเพื่อป้องกันไม่ให้ JavaScript ตีความว่าเป็นบล็อคโค้ด
วิธี
การเขียน
:
ให้
ฟังก์ชัน add([x, y]) {
return x + y;}add([1, 2]); ในโค้ดข้างต้น พารามิเตอร์ของฟังก์ชัน add คืออาร์เรย์บนพื้นผิว แต่เมื่อส่งผ่านพารามิเตอร์ พารามิเตอร์อาร์เรย์จะถูกแยกส่วนเป็นตัวแปร x และ y ฟังก์ชั่นภายในก็เหมือนกับการส่งผ่าน x และ y โดยตรง
การใช้การทำลายล้างคือใช้การกำหนดการทำลายล้าง มีหลายวิธี
ให้ x = 1; ให้ y = 2; [x, y] = [y, x];
โค้ดข้างต้นแลกเปลี่ยนค่าของ x และ y วิธีการเขียนนี้ไม่เพียงแต่กระชับเท่านั้น แต่ยังอ่านง่ายอีกด้วย และความหมาย
สามารถคืนค่าได้เพียงค่าเดียวเท่านั้น หากคุณต้องการคืนค่าหลายค่า เราสามารถใส่ค่าเหล่านี้ลงในอาร์เรย์หรือวัตถุแล้วส่งคืนค่าเหล่านี้ได้ จากอ็อบเจกต์หรืออาเรย์ก็เหมือนกับการค้นหาอะไรบางอย่าง
// ส่งกลับฟังก์ชันอาเรย์ example() {
กลับ [1, 2, 3];} ให้ [a, b, c] = ตัวอย่าง ();
// คืนค่าฟังก์ชันอ็อบเจ็กต์ ตัวอย่าง() {
กลับ {
ฟู: 1,
บาร์: 2
-
}let { foo, bar } = example(); การ มีประโยชน์อย่างยิ่งสำหรับการแยกข้อมูลในวัตถุ JSON
ตัวอย่าง:
ให้ jsonData = {
รหัส: 42,
สถานะ: "ตกลง",
ข้อมูล: [867, 5309]
-
ให้ { id, สถานะ, ข้อมูล: หมายเลข } = jsonData;
console.log(id, สถานะ, หมายเลข);
// 42, "OK", [867, 5309] การใช้โค้ดข้างต้นทำให้เราสามารถดึงค่าในข้อมูล JSON ได้อย่างรวดเร็ว
คำแนะนำที่เกี่ยวข้อง: บทช่วยสอน JavaScript
ข้างต้นจะพาคุณไปทำความเข้าใจรายละเอียดของการกำหนดโครงสร้าง JavaScript สำหรับ ข้อมูลเพิ่มเติมโปรดใส่ใจกับ php บทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์จีน!
