เมธอด JavaScript:Object.assign()

จาวาสคริปต์มีคลาสอ็อบเจ็กต์ที่มีเมธอดทุกประเภทที่เราสามารถใช้จัดการอ็อบเจ็กต์เหล่านั้นได้ ในบทความนี้ เราจะมาดูเมธอด Object.assign() และสาธิตวิธีใช้งาน

เบื้องหลังเล็กน้อย

เพื่อเป็นการเตือนความจำ วัตถุเป็นชนิดข้อมูลใน JavaScript ซึ่งคล้ายกับพจนานุกรมใน Python ที่มีสิ่งที่เราเรียกว่าคู่ของคีย์:ค่า สมมุติว่าเรามีวัตถุ เรียกมันว่าแฮร์รี่ อาจมีคู่คีย์:ค่าที่มีลักษณะดังนี้:

let Harry = {
 	firstName: 'Harry',
 	lastName: 'Potter',
 	age: 11,
 	house: 'Gryffindor',
 	pet: {
   	  name: 'Hedwig',
        animal: 'owl'
 	}
};

กฎพื้นฐานของธีมในสถานการณ์นี้คือชื่อคุณสมบัติทางด้านซ้ายของโคลอนเป็นกุญแจสำคัญ และสิ่งที่อยู่ทางขวาคือค่า คีย์และค่าส่วนใหญ่ค่อนข้างตรงไปตรงมา – สิ่งเดียวที่อาจดูน่าเบื่อคือคุณสมบัติสุดท้าย:สัตว์เลี้ยง สัตว์เลี้ยงยังคงเป็นกุญแจสำคัญในกรณีนี้ อย่างไรก็ตาม ค่านั้นเป็นอ็อบเจ็กต์ที่มีคู่คีย์:ค่าอีกสองคู่ นี่คือสิ่งที่เราเรียกว่าวัตถุที่ซ้อนกัน

Object.assign(target, …sourceObjs);

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

let hpChar = {
 firstName: 'Harry',
 lastName: 'Potter',
 age: 11,
 house: 'Gryffindor',
 pet: {
   name: 'Hedwig',
   animal: 'owl'
 }
}
 
Object.assign({}, hpChar);
console.log(hpChar, '\n');
Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);
 
console.log(hpChar)

มาดูโค้ดกัน เราเริ่มต้นด้วยวัตถุที่เรียกว่า hpChar hpChar นี้มีชื่อ นามสกุล อายุ บ้าน และทรัพย์สินของสัตว์เลี้ยง ทรัพย์สินสัตว์เลี้ยงนั้นเป็นวัตถุและมีคีย์และค่าบางอย่างในตัวเอง

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

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

บรรทัดต่อไปนี้บันทึกผลลัพธ์ลงในคอนโซล:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

{ firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Hedwig', animal: 'owl' } }

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

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

Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);

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

{ firstName: 'Hermione',
  lastName: 'Grainger',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Crookshanks', animal: 'cat' } }

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

var obj1 = {
 foo: 1
}
 
var obj2 = {
 bar: 2
}
 
var obj3 = {
 baz: 3
}
 
Object.assign(obj1, obj2, obj3)
 
console.log(obj1);

Obj1 เป็น obj เป้าหมายของเรา Obj2 และ obj3 เป็นวัตถุต้นทางของเรา สิ่งเหล่านี้จะรวมเข้ากับวัตถุเป้าหมายของเรา เนื่องจากไม่มีคุณสมบัติทับซ้อนกัน คุณสมบัติทั้งหมดจะถูกรวมเป็น obj1 ด้วยค่าที่เกี่ยวข้อง

{ foo: 1, bar: 2, baz: 3 }

ที่นั่นคุณมีมัน! การนำไปใช้งานของ Object.assign() เมื่อคุณเข้าใจแนวคิดที่นี่แล้ว คุณก็เข้าใกล้การเรียนรู้กรอบงาน JavaScript เข้าไปอีกขั้นแล้ว!

พร้อมเพิ่มเติมไหม

ดูบทแนะนำเหล่านี้เพื่อศึกษาต่อ…

JavaScript Object.keys()

คำแนะนำทีละขั้นตอนสำหรับ JavaScript ให้

ประเภทของจาวาสคริปต์

JavaScript String ประกอบด้วย:คำแนะนำทีละขั้นตอน

ตัวแปร JavaScript