ตัวแปรชนิดObject

ตัวแปรชนิด Object Initializers คือ ตัวแปรที่เก็บข้อมูลที่หลากลายทั้งตัวเลข ข้อความ ข้อมูลแบบ array ฟังก์ชัน โดยการกำหนดค่าเริ่มต้นให้กับสมาชิกไว้ก่อน ซึ่งใช้ไวยากรณ์คือ เครื่องหมายปีกกา { } และสมาชิกภายในประกอบด้วยคู่อันดับ คีย์กับข้อมูล(ค่า)

รูปแบบการใช้งาน

var identifier= {

Key1:value, //แบบทั่วไป

Key2: function () { // แบบฟังก์ชัน

//functions

},

Key3: [“content1”,” content2”], //แบบ array

Key4:{ //แบบ object

key: value

}

}

โดยข้อมูลที่อยู่ในเครื่องหมายปีกกาเปิดปิด { } เรียกว่า พร็อพเพอร์ตี้ (properties หรือสามาชิก) และพร็อพเพอร์ตี้ประกอบไปด้วย คีย์ (key) และค่าข้อมูล (value) ชื่อพร็อพเพอร์ตี้ (key) ต้องเป็นข้อความ(string) ส่วนค่าของข้อมูลจะเป็นอะไรก็ได้

ในการเข้าถึงค่าสมาชิกของตัวแปรชนิด object นั้นมีวิธีการดังนี้

objectName.propertyName

objectName คือ ชื่อของตัวแปรชนิด object

propertyName คือ ชื่อของคีย์ (key) ที่ต้องการอ้างถึงใน object

ตัวอย่าง: การประการตัวแปรชนิด object

var person={

// key: value

firstname:"Tom",

lastname:"Hanks",

func:function(){return "Hello!!"},//สมาชิกของ object เป็นแบบชนิดฟังก์ชันไม่มีชื่อ

};

//การอ้างถึงข้อมูลใน object

console.log(person.firstname)

console.log(person.lastname)

console.log(person.func())

ผลลัพธ์

Tom

Hanks

Hello!!

จากตัวอย่างเราประกาศตัวแปรชื่อว่า person มีชนิดเป็น object กำหนดสมาชิกทั้งหมด 3 ตัว เป็นสมาชิกชนิดข้อความ 2 ตัว และเป็นสมาชิกชนิดฟังก์ชัน 1 ตัว จากนั้นเราก็สามารถเข้าถึงสมาชิกแต่ละตัวด้วยการ อ้างชื่อตัวแปรชนิด object ตามด้วยจุดและอ้างชื่อสมาชิก เช่น person.firstname

ตัวแปรชนิด Object() Constructor คือ ตัวแปรที่เก็บข้อมูลที่หลากลายทั้งตัวเลข ข้อความ ข้อมูลแบบ array ฟังก์ชัน โดยใช้ตัวดำเนินการ new Object() ในการสร้างตัวแปร Object

รูปแบบการใช้งาน

var obj_name = new Object();

//การกำหนดค่าให้กับตัวแปร

obj_name.property_key = value;

OR

obj_name["property_key"]=value

รูปแบบการเข้าถึงข้อมูล

Object_name.property_key

OR

Object_name["property_key"]

ตัวอย่าง

var myCar = new Object();

myCar.make = "Ford"; //define an object

myCar.model = "Mustang";

myCar.year = 1987;

//การอ้างถึงค่าของข้อมูล

console.log(myCar["make"])

console.log(myCar["model"])

console.log(myCar["year"])

//หรืออ้างถึงแบบใช้ . แทน

console.log(myCar.make)

console.log(myCar.model)

console.log(myCar.year)

ผลลัพธ์

Ford

Mustang

1987

เราสามารถกำหนดคีย์ (key) ของตัวแปรชนิด object จากตัวแปรชนิดข้อความ ได้ เช่น

ตัวอย่าง

var myCar= new Object()

var propertyName = "make";

myCar[propertyName] = "Ford";

console.log(myCar.make)

ผลลัพธ์

Ford

จากตัวอย่างเราประกาศตัวแปรชื่อ myCar เป็นชนิด object ประกาศตัวแปร propertyName ชนิดข้อความ พร้อมกำหนดค่าเริ่มต้น make จากนั้น จากนั้นทำการกำหนดค่าให้กับตัวแปร myCar ที่อ้างคีย์ (key) จากตัวแปร propertyName แล้วกนดค่า Ford ให้ และนำมาแสดงผล

Constructor Function เป็นการใช้งานฟังก์ชันเป็นตัวช่วยสร้าง object ประกอบไปด้วย 2 ขั้นตอน โดยขั้นตอนที่ 1 สร้างฟังก์ชัน

function function_name()

{

this.property_name=value

}

ใช้ตัวดำเนินการ this ในการอ้างถึงคุณสมบัตรของ object

ขั้นตอนที่ 2 สร้างอินสแตนซ์ของ object

var Object_name= new function_name()

//Access the property value

Object_name.property_name //เข้าถึงค่าของสมาชิก object

ตัวอย่าง

//สร้างฟังก์ชัน

function Car()

{

this.make="Ford"

this.model="F123"

}

//สร้างอินสแตนซ์

var obj=new Car()

console.log(obj.make)

console.log(obj.model)

ผลลัพธ์

Ford

F123

ในแต่ละพร็อพเพอร์ตี้ของ object เราสามารถกำหนดค่าให้กับสมาชิกได้ในภายหลัง เช่น

function Car()

{

this.make="Ford"

}

var obj=new Car()

obj.model="F123" //กำหนดค่าให้กับสมาชิกของ object เพิ่มทีหลัง

console.log(obj.make)

console.log(obj.model)

ผลลัพธ์

Ford

F123

Object.create Method คือ การสร้าง Object ด้วยเมธทอด Object.create () ช่วยให้สร้างต้นแบบสำหรับ Object ที่คุณต้องการโดยไม่ต้องกำหนด Constructor Function

ตัวอย่าง

var roles = {

type: "Admin", // ค่าเริ่มต้นของพร็อพเพอร์ตี้

displayType : function() { // เมธทอด แสดงค่าสิทธิของผู้ใช้

console.log(this.type);

}

}

// กำหนดค่าของ roles ใหม่เป็น super_role

var super_role = Object.create(roles);

super_role.displayType(); // Output:Admin

// หนดค่าของ roles ใหม่เป็น Guest

var guest_role = Object.create(roles);

guest_role.type = "Guest";

guest_role.displayType(); // Output:Guest

ผลลัพธ์

Admin

Guest

ตัวอย่างข้างต้นกำหนด object -roles และกำหนดค่าเริ่มต้นให้กับ properties จากนั้น มีการสร้างอินสแตนซ์ใหม่สองรายการซึ่งจะแทนที่ค่าเริ่มต้นของ Object เดิม

Object.assign() Function คือการสร้าง Object ด้วยการคัดลอกจากอีก object จากหลาย object มาเป็น object ใหม่ ด้วยการใช้เมธทอด Object.assign()

รูปแบบการใช้งาน

Object.assign(target, ...sources)

target คือ ค่าของ object ใหม่ที่ได้ ใช้เครื่องหมาย { } เพื่อรับค่าจาก object ต้นฉบับ(sources)

sources คือ object ต้นฉบับที่ต้องการจัดคัดลอก

ตัวอย่างการใช้งาน

"use strict"

var det = { name:"Tom", ID:"E1001" };

var copy = Object.assign({}, det); //สร้าง object ใหม่ จากต้นฉบับของ object det

console.log(copy);

for (let val in copy)

{

console.log(copy[val])

}

ผลลัพธ์

Tom

E1001

Merging Objects คือ การผสาน object เข้าด้วยกัน

var o1 = { a: 10 };

var o2 = { b: 20 };

var o3 = { c: 30 };

var obj = Object.assign(o1, o2, o3);//การผสาน object o1, o2, o3 เข้าด้วยกันเป็น object ใหม่ ชื่อ obj

console.log(obj);

console.log(o1);

ผลลัพธ์

{ a: 10, b: 20, c: 30 }

{ a: 10, b: 20, c: 30 } //เมื่อผสานแล้วข้อมูลที่ได้ถูกเก็บไว้ในสมาชิกตัวแรกของ object ชื่อ obj (คือ o1 ฉะนั้นเมื่อเราแสดงค่าของ o1 ออกมาจึงได้ค่าของ object ที่ผสานกันแล้ว)

Deleting Properties คือการลบ สมาชิกของ object ออก ด้วยตัวดำเนินการ delete

ตัวอย่าง

// สร้าง object ใหม่ชื่อ myobj แล้วกำหนดสามาชิก (properties) 2 ตัวคื่อ a และ b

var myobj = new Object;

myobj.a = 5;

myobj.b = 12;

// ทำการลบสมาชิกชื่อ a ออก

delete myobj.a;

console.log ("a" in myobj) // ให้แสดงค่าสมาชิกที่ชื่อ a ออกมาแต่สมาชิกได้ถูกลบออกไปแล้ว ผลลัพธ์คือ ค่าเป็นเท็จ

ผลลัพธ์

false

Comparing Objects คือ การเปรียบเทียบ object ในภาษา javascript ไม่สามารถดำเนินการได้จากตัวดำเนินการเปรียบเทียบ เพราะ object ในภาษาจาวาสคริปนั้น แต่ละตัวใช้พื้นที่ในหน่วยความจำคนละตำแหน่งกัน จึงไม่สามารถเปรียบเทียบได้ถึงแม้ว่าค่าสมาชิกจะเหมือนกันก็ตาม ผลการเปรียบเทียบก็จะออกมาเป็นเท็จ ยกเว้นจะใช้ object ร่วมกันก็จะสามารถเปรียบเทียบได้

ตัวอย่าง : เปรียบเทียบ object 2 object ที่ต่างกัน

var val1 = {name: "Tom"};

var val2 = {name: "Tom"};

console.log(val1 == val2) // ได้ค่าเป็นเท็จ

console.log(val1 === val2) // ได้ค่าเป็นเท้จ

จากการเปรียบเทียบจะได้ค่าออกมาเป็น เท็จ เพราะว่า object 2 ตัว คือ val1 และ val2 อยู่ในตำแหน่งของหน่วยความจำต่างกัน เวลาเปรียบเทียบจึงได้ค่าไม่เท่ากัน

ตัวอย่างที่ 2: Object เดียว แต่ใช้วิธีการอ้างอิงถึงกัน

var val1 = {name: "Tom"};

var val2 = val1 //อ้างอิงถึง object val1

console.log(val1 == val2) // ได้ค่าเป็น จริง true

console.log(val1 === val2) // ได้ค่าเป็น จริง true

Object De-structuring คือการค่า