SOFTWARE DEVELOPMENT | 5 mins read

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

By Nan Chonthicha on 17 Mar 2021
sennalabs-blog-banner

สวัสดีชาว 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(animal2);
                // ผลลัพธ์ที่ได้  Object { lion: 🦁  , tiger: 🐱 ,  pig:🐷   }
                
                

 

สำหรับ method Object จะทำหน้าที่เพิ่มข้อมูลลงใน 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
ฉันเป็นผู้พัฒนา ชอบในการเรียนรู้สิ่งใหม่ๆ และรักในความสงบ
ฉันเป็นผู้พัฒนา ชอบในการเรียนรู้สิ่งใหม่ๆ และรักในความสงบ