ในบทความนี้เราจะมารู้จัก function ใน JavaScript ที่ใช้กันบ่อยๆ ใน React.js ใครที่กำลังศึกษา React.js อยู่ ควรที่จะรู้ function เหล่านี้
map()
map
ใช้ในการสร้าง array ใหม่ จะเห็นใช้บ่อยๆ สำหรับใช้สำหรับ loop เพื่อแสดงข้อมูล
filter()
filter
ใช้สำหรับการกรองข้อมูลตามเงื่อนไขที่เราต้องการ
slice()
slice()
method ใช้ในการตัดข้อมูลจาก array แล้วสำหรับ array ใหม่โดยไม่มีการแก้ไขข้อมูลเดิม จะรับ parameters 2 ตัวสำหรับเริ่มต้นและสิ้นสุด
splice()
splice ใช้สำหรับ ลบค่าเดิมแล้วแทนที่ด้วยค่าใหม่ตาม index ที่เราต้องการ แต่ splice จะไม่มีการสร้าง array ใหม่ ก็คือจะเปลี่ยนแปลง array เดิมเลย และยังสามารถทำการลบ index เริ่มต้นได้ เหมือนกับ slice เลย
มาลองดูรูปแบบกันหน่อย
มาลองดูตัวอย่างกัน
อย่างเช่นผมมี array fruits
แล้วอยากเพิ่มข้อมูลลงไปในค่าลงไปใน index ที่ 1 ด้วยค่า MyValue
และ ไม่ทำการลบข้อมูลถัดจาก index ที่ 1 ก็จะได้เป็นแบบนี้
เราสามารถนำ splice มาลบ element ตามที่ index ที่เราอยากได้ก็ได้เหมือนกันนะ
ผลลัพธ์ก็จะเป็น
เพราะ April
ถูกลบ วิธีการอ่านของผมก็คือ
concat()
concat ใช้สำหรับต่อ array 2 ตัวเข้าด้วยกัน แล้ว return เป็น array ใหม่
find()
find ใช้สำหรับหาค่าตามเงื่อนไขที่เราต้องการ เช่นในตัวอย่างนี้ ผมอยากจะหา banana
ใน array fruits
findIndex()
findIndex จะเหมือนกับ find แต่จะ return เป็น index ของค่านั้นๆ
destructuring
เอาแบบเข้าใจง่ายๆ คือการแกะค่าออกมาจาก array หรือ object มาเป็นตัวแปรนั้นๆ อย่างเช่นถ้าเราอยากได้ ค่า title
ที่อยู่ใน array post
แทนที่เราจะใช้วิธีการแบบ post.title
เราก็ใช้วิธีการ destructuring แทนนั่นเอง
วิธีการก็ตามด้านล่างเลย
rest operator
เวลา function มี parameters เยอะๆ เราสามารถนำ rest operator มาใช้เพื่อรับ parameters ทั้งหมดได้ โดยใช้เครื่องหมาย ...
spread operator
ใช้เพื่อแยกข้อมูลใน array หรือ object เพื่อนำไปใช้ต่อที่อื่น โดยใช้เครื่องหมาย ...
ทั้ง rest operator และ spread operator ต่างก็มีการใช้เครื่องหมายเหมือนกัน อาจจะสับสันได้ ขอให้เข้าใจว่า
- rest operator ใช้ใน function เพื่อรับ parameters ทั้งหมดเข้าไปทำงานใน function
- spread operator เป็นการแยกข้อมูลใน array หรือ object เพื่อนำไปใช้ต่อที่อื่น อย่างเช่นในตัวอย่างข้างบนที่มีการรวม array และ object 2 ตัวเข้าด้วยกัน
promises
อ่านที่นี่แทนนะ เขียนไว้แล้ว 😅 มาลองใช้ Promise และ Async/Await ใน React กัน
async/await
อ่านที่นี่แทนนะ เขียนไว้แล้ว 😅 มาลองใช้ Promise และ Async/Await ใน React กัน