02Mar, 2021
Language blog :
Thai
Share blog : 
02 March, 2021
Thai

Array Method in JavaScript

By

4 mins read
Array Method in JavaScript

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

1. Method ForEach

Method ForEach

มาเริ่มกันที่ method ตัวแรกของเราเลยดีกว่า นั่นคือ ForEach method ใช้สำหรับวนลูปเพื่อนำค่าใน Array แต่ละตัวมากระทำใน Function ที่เรากำหนดไว้ และจะไม่ return ค่าออกมา

ากตัวอย่างการเขียนโค้ดด้านบนเราได้ประกาศค่า peoples array แล้วนำไปใช้กับ Method ForEach และได้ทำการใช้ console.log() เพื่อแสดงผลลัพธ์ตามลำดับใน peoples array 

2. Method Map

Method Map

สำหรับ Method Map นั้นจะคล้ายกับ ForEach คือใช้สำหรับวนลูปใน Array เพื่อนำค่าแต่ละตัวไปผ่าน Function ที่เรากำหนดไว้ แต่ Method แบบนั้น  สามารถ return ค่าออกมาได้

จากตัวอย่างการเขียนโค้ดด้านบนเราได้ประกาศค่า numbers array แล้วนำไปใช้กับ Method map และได้ใส่เงื่อนไขในการวนลูปแต่ครั้ง number*2 ซึ่งจะทำให้ได้ผลลัพธ์ตามภาพตัวอย่างด้านบน

3. Filter method

Filter Method

สำหรับ Method Filter จะมีหน้าที่ไว้คัดกรอง ถ้าค่าใน Array ตามเงื่อนไขที่เรากำหนดไว้ใน Function ค่าที่ return ออกมาจะได้ค่า Array ที่เป็นผลลัพธ์ใหม่

จากตัวอย่างการเขียนโค้ดด้านบน เราได้ประกาศค่า peoples array แล้วนำไปใช้กับ Method Filter และได้ใสเงื่อนไขในการวนลูปแต่ครั้ง people.age >= 45 หากค่าของ array แต่ละตัวตรงตามเงื่อนไขจะ return true และเก็บค่านั้นไว้ในผลลัพธ์ ซึ่งจะทำให้ได้ผลลัพธ์ตามภาพตัวอย่างด้านบน

4. Find method

Find method

สำหรับ Method Find นั้นจะคล้ายกับ Method Filter แต่ต่างกันตรงที่ Method Find นั้น return เฉพาะผลลัพธ์ตัวแรกที่ตรงตามเงื่อนไขที่เราได้กำหนดไว้

จากตัวอย่างการเขียนโค้ดด้านบน เราได้ประกาศค่า peoples array นำไปใช้กับ Method find และได้ใส่เงื่อนไขในการวนลูปแต่ละครั้งว่า people.age <= 18 หากพบค่าของ array ตัวใดตัวหนึ่งตรงตามเงื่อนไขจะ return ค่านั้นออกมาทันที

5. Every method

Every method

สำหรับ Method Every จะเป็นการวนลูปเพื่อนำค่าที่ได้มากระทำกับ function ที่เรากำหนดไว้ โดยจะ return ค่าออกมาเป็น True หรือ False ซึ่ง Method Every จะนำค่าที่ได้นั้นมาต่อกันผ่าน Logical Operator And (&&)

จากตัวอย่างการเขียนโค้ดด้านบน เราได้ประกาศค่า peoples array นำไปใช้กับ Method every และได้ใส่เงื่อนไขในการวนลูปแต่ละครั้งว่า  people.age >= 45  หากมีค่าใน array ตัวใดที่ตรงตามเงื่อนไขจะ return true ถ้าไม่ตรงจะ return false และทำผลลัพธ์ที่ได้มา && And กัน

6. Some method 

Some method

สำหรับ Method some จะทำงานคล้ายกับ method every ซึ่งจะ return True หรือ False เช่นกัน แต่จะเปลี่ยน Logical Operator จาก And(&&) เป็น Or (||)

จากตัวอย่างการเขียนโค้ดด้านบนเราได้ประกาศค่า peoples array นำไปใช้กับ Method some และได้ใส่เงื่อนไขในการลบลูปแต่ละครั้งว่า  people.age >= 45  หากมีค่าใน array ตัวใดที่ตรงตามเงื่อนไขจะ return true ถ้าไม่ตรงจะ return false และทำผลลัพธ์ที่ได้มา || Or กัน

7. Reduce method 

Reduce method

และสำหรับ method ตัวสุดท้าย นั่นก็คือ Reduce method สำหรับ Method Reduce นั้นจะทำหน้าที่รวมผลลัพธ์ โดยที่เราสามารถกำหนดค่าเริ่มต้นที่ใช้ในการรวมผลลัพธ์

เป็นอย่างไรกันบ้าง จากตัวอย่าง method array ด้านบนที่เราได้ยกตัวอย่างมา หวังว่าจะเป็นประโยชน์กับทุก ๆ คนได้ไม่มากก็น้อย และเราเชื่อว่าต่อจากนี้ทุกคนจะเขียนโค้ดได้ดีขึ้นอย่างแน่นอน เจอกันบล็อกหน้า

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

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

By

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

By

4 mins read
Thai
24
June, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
24 June, 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.