JavaScript Methods: Object.assign()

JavaScript มี Object class ที่มี methods หลากหลายสำหรับจัดการ objects ในบทความนี้ เราจะดู Object.assign() method และสาธิตการใช้งาน

พื้นฐานเบื้องต้น

เตือนใจว่า object เป็น data type ใน JavaScript คล้าย dictionaries ใน Python ที่มี key:value pairs สมมติเรามี object เรียกว่า Harry อาจมี key:value pairs แบบนี้:

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

กฎพื้นฐานคือ property name ซ้าย colon คือ key ส่วนขวาคือ value คุ้มค่าส่วนใหญ่ตรงไปตรงมา – ตัวเดียวที่อาจ tricky คือ property สุดท้าย: pet Pet ยังคงเป็น key ในกรณีนี้ แต่ value เป็น object ที่มี key:value pairs อีกสองคู่ เรียกว่า nested object

Object.assign(target, …sourceObjs);

มี Object method ชื่อ assign() ใช้รับ one หรือ more source objects และ copy ไปที่ target object มาดูโค้ดเลย:

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)

มาเดินทางผ่านโค้ดด้วยกัน เริ่มจาก object literal hpChar hpChar นี้มี firstName, lastName, age, house, และ pet property pet property นี้เป็น object เอง มี keys และ values ของมันเอง

ต่อมา instance แรกของ method ที่เราพูดถึง Object.assign รับสองหรือมากกว่า parameters ตัวแรก เสมอ คือ target object ที่คุณอยาก assign values ไป ใน instance นี้คือ empty object

Parameter ที่สองคือ object ที่กำหนดด้านบน นี่คือ source material ที่เราจะเอาไป assign ให้ target object (parameter แรก)

บรรทัดต่อมาลงผลลัพธ์ใน console:

81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.

The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.

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

ไม่ต่างอะไรมากใช่ไหม? เพราะเรา assign hpChar ให้ empty object – เรา clone object แบบพื้นฐาน ถ้าเราทำอีกครั้งแต่เปลี่ยนค่าบ้าง? แทน empty object คราวนี้ ใช้ hpChar object – นี่คือ target ตอนนี้ ลองเปลี่ยนค่าบ้างใน parameter ที่สอง เล่นกับ values ได้ตราบใดที่ keys เหมือนเดิม

นี่คือค่าที่ผมจะแทน ถ้า value ใน target object ไม่ต้องเปลี่ยน ไม่ต้องระบุ value ใน source object โดยเฉพาะ

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

ครั้งที่สองที่เรา log ผลลัพธ์ใน console มันคืนค่า target object 上書き properties ด้วยค่าใหม่ ตอนนี้ console ของเราเป็น:

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

นี่คือการ merge สอง objects ที่มี properties เหมือนกัน ตอนนี้ถ้าเรา merge สาม objects ที่มี properties ต่างกัน? คุณคาดการณ์ว่าจะเกิดอะไร?

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

Obj1 คือ target obj Obj2 และ obj3 คือ source objects พวกมันจะ merge เข้า target object เพราะไม่มี properties overlap ทุก properties จะ merge เข้า obj1 พร้อม respective values

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

นี่คือการ implement Object.assign() ที่ทำงาน! เมื่อคุณเข้าใจ concepts ที่นี่ คุณใกล้จะเรียน JavaScript framework แล้ว!

Ready for more?

ดู tutorials เหล่านี้เพื่อต่อยอดการเรียนรู้…

JavaScript Object.keys()

A Step-By-Step Guide to JavaScript Let

JavaScript typeof

JavaScript String Contains: Step-By-Step Guide

JavaScript Variables