การทำลายล้างใน JavaScript คืออะไร?

การทำลายโครงสร้างใน JavaScript หมายถึงการคัดลอกค่าของอาร์เรย์หรือคุณสมบัติของวัตถุไปยังตัวแปร

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

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

การทำลายโครงสร้างขั้นพื้นฐานในอาร์เรย์

การทำลายล้างทำให้เข้าถึงค่าของอาร์เรย์ได้ง่ายขึ้น
ตัวอย่างเช่น
หากคุณต้องการเข้าถึงค่าในอาร์เรย์โดยไม่ทำลายโครงสร้าง

const array = ["deer","greet","heyy"];

const arr = array[0];
const arr1 = array[1];

console.log(arr);                //deer
console.log(arr1);              //greet

ในตัวอย่างนี้ คุณกำหนดค่าโดยใช้ดัชนี แต่ด้วยการทำลายล้าง มันจะเป็นเช่นนี้

const array = ["deer","greet","heyy"];

const [arr,arr1,arr2] = array;

console.log(arr);                 //deer
console.log(arr1);               //greet

ดังนั้นคุณจึงสามารถกำหนดค่าของตัวแปร array ให้กับตัวแปรใหม่ทั้งหมดพร้อมกันได้

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

นี่คือตัวอย่าง:

let arr = "deer";
let arr1 = "greet";

console.log(arr);               //deer
console.log(arr1);             //greet

let newArr = arr1;   //assigning the value
"greet" to a new variable "newArr" 

console.log(newArr);          //greet

arr1 = arr;           //assigning the value "deer" to the variable "arr1"

arr = newArr;        //assigning the value "greet" to the variable "arr"

console.log(arr1);           //deer
console.log(arr);            //greet

แต่ด้วยการทำลายล้าง คุณสามารถทำได้โดยไม่ต้องมีตัวแปรตัวที่สาม

const array = ["deer","greet","heyy"];

let [arr,arr1,arr2] = array;

console.log(arr);                //deer
console.log(arr1);             //greet

[arr,arr1] = [arr1,arr];        //using destructuring to swap the values 

console.log(arr);               //greet
console.log(arr1);             //deer

การข้ามค่า

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

ในตัวอย่างนี้ เครื่องหมายจุลภาคที่จุดเริ่มต้นของการกำหนดจะระบุค่าแรกของอาร์เรย์

const array = ["deer","greet","heyy"];

const [,arr1,arr2] = array;             //skipping the first value and using only the second and third

console.log(arr1);              //greet
console.log(arr2);              //heyy

การใช้การทำลายโครงสร้างอาร์เรย์กับตัววนซ้ำ

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

ตัวอย่างเช่น การใช้การทำลายโครงสร้างอาร์เรย์บนสตริง

const [a,b] = "abc";

console.log(a);         //a
console.log(b);        //b

ตัวอย่างการใช้การทำลายอาเรย์กับเซต

const array = ["deer","greet","heyy"];

const exampleSet = new Set(array);

const [arr,arr1,arr2] = exampleSet;

console.log(arr);         //deer
console.log(arr1);        //greet
console.log(arr2);        //heyyy

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

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

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

const [arr,arr1] = [];

console.log(arr);          //undefined

console.log(arr1);         //undefined

นี่เป็นอีกสถานการณ์หนึ่ง:

const array = [];

const [arr,arr1] = array;

console.log(arr);          //undefined

console.log(arr1);         //undefined

ค่าเริ่มต้นในอาร์เรย์

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

ดูตัวอย่างนี้:

const array = ["deer","greet","heyy"];

const [arr,arr1,arr2,arr3] = array;

console.log(arr);              //word
console.log(arr1);            //fang
console.log(arr2);           //grey
console.log(arr3);           //undefined

เพื่อกำหนดค่าเริ่มต้นให้กับ arr3

const array = ["deer","greet","heyy"];

//To assign a default value to arr3
const [arr,arr1,arr2,arr3="mirrors"] = array;

console.log(arr3);          //mirrors

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

การใช้ไวยากรณ์ที่เหลือ

การทำลายโครงสร้างใน Javascript ยังใช้ไวยากรณ์ที่เหลือด้วย มันถูกเรียกว่าไวยากรณ์ "ส่วนที่เหลือ" เนื่องจากครอบคลุมรายการที่เหลือในอาร์เรย์ ไวยากรณ์คือ ... ตามด้วยชื่อของอาร์เรย์ที่สร้างขึ้น ชื่อ “rest” ที่ปรากฏหลังจุดสามจุดเป็นทางเลือกหรือไม่ คุณสามารถใช้ชื่ออื่นหลังจุดสามจุดได้

ไวยากรณ์:
(...rest)

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

นี่คือตัวอย่างการพักในอาเรย์:

โดยใช้ตัวอย่างก่อนหน้านี้

const array = ["deer","greet","heyy"];

const [arr, …newArr] = array;

console.log(arr);               //deer
console.log(newArr);          //[ greet, heyy]

อย่างที่คุณเห็น อาร์เรย์ newArr ถูกสร้างขึ้นจากอาร์เรย์เก่า

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

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

ในการกำหนดค่าโดยไม่ทำลายโครงสร้างจะเป็นดังนี้:

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};             //example of the object

//To access the object property

const words = obj.word;              

const boolean = obj.bool;                     

console.log(words)             //dataTypes
console.log(boolean)          //true

นี่คือวิธีการกำหนดค่าให้กับวัตถุโดยใช้การทำลายล้าง

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};            //example of the object//To access the object property
const { word, bool } = obj;                   

console.log(word)       //dataTypes
console.log(bool)      //true

ทำให้การมอบหมายคุณค่าง่ายขึ้น

หมายเหตุ: ลำดับไม่สำคัญในออบเจ็กต์ และคุณควรใช้ชื่อเดียวกัน

ซึ่งจะส่งผลให้เกิดข้อผิดพลาดดังต่อไปนี้:

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};

const { words, boolean } = obj;

console.log(words)           
console.log(boolean)       

//ReferenceError: obj is not defined

เนื่องจาก JavaScript ไม่ได้เก็บตัวแปร words และ boolean ไว้เป็นข้อมูลอ้างอิงสำหรับออบเจ็กต์ ดังนั้นจึงเกิดข้อผิดพลาด

อย่างไรก็ตาม คุณสามารถตั้งชื่อที่แตกต่างกันให้กับค่าต่างๆ ได้ในขณะที่กำลังทำลายโครงสร้าง

การกำหนดชื่อที่แตกต่างกันให้กับคุณสมบัติของวัตถุ

คุณสามารถกำหนดชื่อที่แตกต่างกันให้กับคุณสมบัติของวัตถุเพื่อเข้าถึงได้

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};

const { word: words, bool: boolean } = obj;

console.log(words)               //dataTypes
console.log(boolean)           //true

การใช้การทำลายโครงสร้างวัตถุบนอาร์เรย์
คุณสามารถใช้ดัชนีของอาร์เรย์เป็น “คุณสมบัติ” เมื่อคุณใช้การทำลายโครงสร้างวัตถุกับอาร์เรย์

const {0:arr, 1:arr1, 2:arr2} = ["deer","greet","heyy"];

console.log(arr);          //deer
console.log(arr2);         //heyy

การประกาศตัวแปรเบื้องต้น

ในออบเจ็กต์ คุณสามารถประกาศตัวแปรตั้งแต่แรกก่อนที่คุณจะกำหนดค่าให้กับตัวแปรนั้น

let word;

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999 };

({ word } = obj);

console.log(word);   //dataTypes

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

การใช้ไวยากรณ์ส่วนที่เหลือในวัตถุ

คุณสามารถใช้ไวยากรณ์ส่วนที่เหลือในวัตถุได้ เช่นเดียวกับในอาร์เรย์ ไวยากรณ์ที่เหลือจะมาที่ส่วนท้ายและครอบคลุมคุณสมบัติที่เหลืออยู่ในวัตถุ

นี่คือตัวอย่าง:

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};            //example of the object//To access the object property

const { word: words, ...others } = obj;                   

console.log(words);              //dataTypes
console.log(others);            //{ num:0001, bool:true, bigInt:2.99999999 }

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

ค่าเริ่มต้นในวัตถุ

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