JavaScript ES6 (For React)

JavaScript ES6 ECMAScript 6 (ES6 หรอื ES 2015)

พนื้ ฐาน ES2015 (ES6) การเขยี น JavaScript สมยั ใหม่ ● สาํ หรับท่านทมี่ พี น้ื ฐานแลว้ สามารถข้ามหวั ข้อน้ีไปได้เลย ● สาํ หรับท่านที่ยงั ไมม่ พี นื้ ฐาน ตอ้ งเรียนเน้ือหาน้ีกอ่ น (สาํ คัญมาก)

Block Scope (let/constant) ● การประกาศใชง้ าน let แทน var เน่ืองจาก var เปน็ ตวั แแปรทถ่ี ูกมอง global variable สามารถทาํ งานทะลขุ อบเขต (block scope) ได้ ● การใชง้ าน const ในการประกาศตวั แปรท่เี ก็บค่าคงท่ี https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/

Arrow Function เปน็ รูปแบบการเขียน Function ใหม้ คี วามกระชบั มากย่งิ ข้ึน แบบเดมิ function fullname(fname,lname){ return fname+lname } https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/

Arrow Function เปน็ รูปแบบการเขียน Function ใหม้ ีความกระชบั มากยิง่ ข้ึน แบบใหม่ fullname=(fname,lname)=>fname+lname (ไมต่ อ้ งใสป่ กี กาหรือ return ก็ได้ ใชใ้ นกรณีทมี่ คี าํ ส่งั ไม่เยอะ) https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/

Object const user { name , email,address const user { name:name, } email:email, address:address ถ้าชอื่ properties เปน็ ชอื่ เดียว กับตวั แปรที่สง่ เขา้ มาทาํ งาน } https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/

String ● MultiLine String สามารถทํางานกบั ข้อความยาวๆได้ โดยการข้ึน บรรทัดใหม่แล้วไม่มีขอ้ ผดิ พลาดเกนิ ข้ึนโดยใช้ ` ● Interpolation สามารถแทรกตวั แปรลงในพืน้ ที่ String ได้โดยใช้ ${ชอ่ื ตัวแปร} ร่วมกับ ` https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/

Spread Operator ใชใ้ นการกระจายสมาชกิ ใน Array ออกมาใชง้ านโดยเติม เครื่องหมาย … ดา้ นหน้าตัวแปร Array https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/

Rest Parameter ใชใ้ นการสง่ คา่ Parameter เขา้ ไปทํางานใน Function โดย ไม่จํากัดจํานวนโดยใชเ้ คร่ืองหมาย ... https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/

Destructuring (การสลายโครงสร้าง) คือ การกําหนดค่าทีอ่ ย่ภู ายใน Array หรือ Object ใหก้ ับตัวแปร โดยใชว้ ิธีการจับคู่ตัวแปรกบั ค่าใน array หรือ Object เชน่ const colors = [“ขาว”,”แดง”] การใช้งาน const a = colors[0] //a=ขาว const colors = [“ขาว”,”แดง”] const b = colors[1] //b=แดง const [a,b]=colors https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/

Default Parameter การกําหนดค่าเร่ิมต้นใหก้ ับ Parameter ภายในฟงั กช์ ่นั https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/

Array เบอ้ื งตน้ ● join () - แปลง Array ใหก้ ลายเปน็ string และค่ันดว้ ย เครื่องหมาย , (comma) หรือ เครื่องหมายอ่นื ๆที่กําหนดข้ึนมา ● concat () - รวม Array และ return Array ก้อนใหมก่ ลับมา โดยท่ไี ม่ เปลี่ยนแปลงโครงสร้าง Array เดมิ (สง่ Array หรือ Element เข้าไปได้) ● slice() - คัดลอก Array แลว้ return Array ออกไปใชง้ าน https://www.youtube.com/channel/UCQ1r_4x-P-fETLIU4pqf98w https://www.facebook.com/KongRuksiamTutorial/