hand tlhand crfog b
17Mar, 2021
Language blog :
Thai
Share blog : 
17 March, 2021
Thai

5 วิธีสำหรับจัดการ Object ใน Javascript

By

5 mins read
5 วิธีสำหรับจัดการ Object ใน Javascript

สวัสดีชาว programmer ทุกคน หลังจากที่เราได้เขียนบทความเรื่อง Array Method ไปในบทความก่อนหน้านี้ วันนี้เราจะพูดถึง Methods สำหรับ Object ใน Javascript กันบ้าง ซึ่งทุก ๆ คนคงคุ้นเคยกับตัวแปรชนิด object กันดีอยู่แล้ว ดังนั้น เราจะมาพูดถึง 5 วิธีเด็ด ๆ ที่ใช้สำหรับการจัดการ object ใน Javascript กัน

วิธีจัดการ Object ใน Javascript

1. Method freezes

const obj = {  lion:  🦁 };
Object.freeze(obj);
obj.lion =🐯 ;
console.log(obj.lion);//ผลลัพธ์ที่ได้ 🦁 

 

สำหรับ method freezes นั้น เป็น method ที่ทำให้ Object ที่เราประกาศไว้ไม่สามารถแก้ไขหรือเปลี่ยนแปลงข้อมูลได้ แต่ทุกคน ๆ สงสัยว่าทำไมต้องใช้มันทั้ง ๆ ที่ ถ้าหากเราประกาศ const มันก็จะได้เหมือนกันนะ

แต่การประกาศ const ใน JavaScript นั่นไม่ได้หมายความว่าตัวแปรนั้นจะไม่สามารถแก้ได้เลย (กรณี ตัวแปรชนิด Array เราสามารถใช้ method push เพื่อเปลี่ยนค่าภายในของ Array ได้) ดังนั้น method freezes จึงจะมาทำให้เราใช้ชีวิตง่ายขึ้น เพราะไม่ว่าจะเปลี่ยนแปลงค่ายังไง ข้อมูลไม่ถูกเปลี่ยนแน่นอน 

 

2. Method assign

const animal1 = { lion: 🦁  , tiger: 🐯  };
const animal2 = { tiger:🐱 ,  pig: 🐷  };
const result= Object.assign(animal1, animal2);
console.log(animal1);// ผลลัพธ์ที่ได้ Object { lion: 🦁  , tiger: 🐱 ,  pig:🐷   }
console.log(Result);// ผลลัพธ์ที่ได้  Object { lion: 🦁  , tiger: 🐱 ,  pig:🐷   }

 

สำหรับ method Assign จะทำหน้าที่เพิ่มข้อมูลลงใน Object ซึ่งจากโค้ดด้านบนจะเห็นได้ว่า เราได้ประกาศ animal1 และได้ทำการ assign animal2 เข้าไปใน animal1 ดังนั้น ผลลัพธ์ก็คือ จะทำให้เราได้ { lion: 🦁  , tiger: 🐱 ,  pig:🐷   } นั่นเอง

 

3. Method keys

const animal = {   lion: 🦁  ,   tiger: 🐱 ,    pig:🐷   } ;
console.log(Object.keys(animal));// ผลลัพธ์ที่ได้ Array ["lion", "tiger", "pig"]

 

Method key ใช้สำหรับดึง key ของ Object ออกมาเป็น Array สามารถดูได้ตัวอย่างได้จากโค้ดด้านบน เราได้ประกาศตัวแปร animal ซึ่งประกอบไปด้วย {  lion: 🦁  ,  tiger: 🐱 ,   pig:🐷   }  เมื่อเราใช้ method key ในการดึงเอาข้อมูล key ของ animal ก็จะได้ผลลัพธ์ตามตัวอย่างโค้ดด้านบนเลย

 

4. Method values

const animal = {  fish: 🐟 ,  crab: 🦀 ,  squid: 🐙};
console.log(Object.values(animal));// ผลลัพธ์ที่ได้ Array [ 🐟 , 🦀 ,  🐙 ]

 

หลังจากที่เราได้ ใช้ method key ในการถึง key ออกมาแล้ว ทีนี้ถ้าหากเราอยากได้ values ของ Object บ้างล่ะ ? คำตอบก็คือเราสามารถใช้ Method Values เพื่อดึงค่าของ valuse ออกมาในรูปแบบ array ได้เช่นกัน

 

5. Method entries

const birds = {    owl: '🦉',    eagle: '🦅',    duck: '🦆'};
const entries = Object.entries(birds);
console.log(entries);// ผลลัพธ์ที่ได้ [['owl', '🦉'], ['eagle', '🦅'], ['duck', '🦆']]

 

สำหรับ method ตัวสุดท้าย เราจะใช้ในกรณีที่เราต้องการดึง key และ values ของ Object ซึ่งจากตัวอย่างโค้ดด้านบน เราต้องการดึง key และ value ด้วยการใช้  Object.entries(birds) ทำให้ผลลพธ์ที่ได้เป็น Array ของ key กับ value นั่นเอง

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

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

14
October, 2024
JS class syntax
14 October, 2024
JS class syntax
เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

By

4 mins read
Thai
14
October, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
14 October, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
14
October, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
14 October, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.