Cover image

for...in และ for...of ใน Javascript

23 May 2022

Share to:

สวัสดีครับ ในบทความนี้เราจะมาเรียนรู้การใช้งาน Loop อีกแบบนึงนะครับ หลายๆท่านอาจจะยังไม่ค่อยคุ้นกันสักเท่าไรครับ นั้นก็คือ for…in และ for…of ครับ

สําหรับ for…in และ for…of เป็น Loop อีกรูปแบบนึงในภาษา Javascript นะครับ ซึ่งจะช่วยให้เราสามารถเขียนโปรแกรมที่ใช้ Loop ได้ Advance และสะดวกมาขึ้นครับ เริ่มเรียนรู้ไปตามหัวข้อได้เลยครับ

for…in

for…in เป็นการวน Loop เพื่อหา Key ออกมาทีละตัว ส่วนใหญ่จะใช้ในการวน Loop เพื่อดึงเอา Key ของ Object ออกมา ลองดูตามตัวอย่างนี้ครับ

const data = { a: 1, b: 2, c: 3, d: 4 }; // ใช้กับข้อมูลชนิด Object

const newArray = [];

for (const a in data) {
  newArray.push(a);
}

console.log(newArray.toString());

// Output: a,b,c,d

*สําหรับ for…of จะใช้ได้กับข้อมูลที่เป็น Object, Array และ string ได้ครับ ซึ่งกรณีที่เป็น Array, string จะได้ Key ออกมาเป็น index ครับ

for…of

for…of เป็นการวน Loop เพื่อหา Value ออกมาทีละคัวครับ เช่น ถ้าเราต้องการจะวน Loop หยิบข้อมูลใน Array ออกมา เราก็สามารถใช้ for…of ได้ตามตัวอย่างนี้ครับ

const data = ['Hello1', 'Hello2', 'Hello3', 'Hello4']; // ใช้กับข้อมูลชนิด Array ได้

const newArray = [];

for (const a of data) {
  newArray.push(a);
}

console.log(newArray.toString());

// Output: Hello1,Hello2,Hello3,Hello4

*สําหรับ for…of จะใช้ได้กับข้อมูลที่เป็น Array และ string เท่านั้นนะครับ

สําหรับบทความนี้ก็มีประมาณนี้ครับ แล้วเจอกันใหม่บทความหน้าครับ ขอบคุณครับ

Suggestion blogs

Conditional types ใน TypeScript

สวัสดีครับ ในบทความนี้เราจะมาเรียนรู้เรื่อง Conditional types ใน TypeScript ว่าคืออะไร นำไปใช้ประโยชน์ได้อย่างไร

Go EP.3 Go packages คืออะไร

สวัสดีครับ ในบทความนี้ก็เป็น EP.3 แล้วนะครับ โดยเนื้อหาจะเป็นเรื่องเกี่ยวกับ Go packages ว่าคืออะไร ใช้ทําอะไร และมีประโยชน์อย่างไรสําหรับท่านใดที่ยังไม่ได้อ่าน EP.2 ท่านสามารถกลับไปอ่านก่อนได้นะครับที่นี่ Go EP.2 ทําความรู้จักกับ Go module

รีวิว ShopBack ช้อปแล้วได้เงินคืน

สวัสดีครับ บทความนี้ผมจะรีวิว App นึงที่ชื่อว่า ShopBack เป็น App ที่ช้อปแล้วได้เงินคืน!! ก่อนอื่นมาดูกันก่อนว่า ShopBack เป็นใครมาจากไหน และนี้มีการทํางานเป็นอย่างไร?


Copyright © 2019 - 2024 thiti.dev |  v1.19.0 |  Privacy policy |  status | 

            วงแหวนเว็บ