วิธีการ Object.assign

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

ไวยากรณ์

javascriptObject.assign(คัดลอกไปที่ไหน, ออบเจ็กต์ต่างๆ);

ตัวอย่าง

มาดูการได้ออบเจ็กต์ใหม่จากออบเจ็กต์ต้นทาง:

javascriptlet obj = {'a': 1, 'b': 2, 'c': 3};
let newObj = Object.assign({}, obj);
console.log(newObj);

ผลลัพธ์จากการรันโค้ด:

javascript{a: 1, b: 2, c: 3}

ตัวอย่าง

คราวนี้มาดูการได้ออบเจ็กต์ใหม่จากหลายๆ ออบเจ็กต์ต้นทาง โดยระบุพวกมันในพารามิเตอร์คั่นด้วยเครื่องหมายจุลภาค:

javascriptlet obj1 = {'a': 1, 'b': 2};
let obj2 = {'c': 3, 'd': 4};

let newObj = Object.assign({}, obj1, obj2);
console.log(newObj);

หลังจากรันโค้ด เราจะเห็นว่าออบเจ็กต์ต้นทางสองอันถูกผสานเข้าด้วยกันเป็นออบเจ็กต์ใหม่หนึ่งอัน:

javascript{a: 1, b: 2, c: 3, d: 4}

ตัวอย่าง

นอกจากนี้ วิธีการ Object.assign ยังสามารถนำมาใช้เพื่อให้ได้อาร์เรย์ใหม่ได้ เนื่องจากอาร์เรย์ตามประเภทของมันก็จัดเป็นออบเจ็กต์เช่นกัน ลองมาสร้างอาร์เรย์ใหม่โดยการคัดลอกสมาชิกจากอาร์เรย์ต้นทาง:

javascriptlet arr = [1, 2, 3, 4];
let newArr = Object.assign([], arr);

console.log(newArr);

ผลลัพธ์จากการรันโค้ด:

javascript[1, 2, 3, 4]

ตัวอย่าง

เมื่อใช้วิธีการ Object.assign ต้องระมัดระวังในการยึดตามไวยากรณ์อย่างเคร่งครัด ตัวอย่างเช่น หากไม่เพิ่มออบเจ็กต์เป้าหมายในพารามิเตอร์แรก แต่ปล่อยให้มีแค่ออบเจ็กต์ที่ต้องการคัดลอก มันก็จะถูกส่งคืนกลับมาเช่นเดิม:

javascriptlet obj = {1:'a', 2: 'b', 3: 'c'};
let newObj = Object.assign(obj);

console.log(newObj === obj);

ผลลัพธ์จากการรันโค้ด:

javascripttrue

ดูเพิ่มเติม