20 เคล็ดลับ JavaScript ที่คุณสามารถนำไปประยุกต์ใช้ได้
08-พ.ย.-23
คัมภีร์เทพ IT
JavaScript ซึ่งเป็นสิ่งที่ทำให้ Website สามารถโต้ตอบได้มากขึ้น มีเคล็ดลับที่ช่วยให้การเขียน Code ของคุณราบรื่นและสนุกสนานยิ่งขึ้น และบทความนี้ก็เป็น 20 เคล็ดลับ JavaScript ที่คุณสามารถนำไปประยุกต์ใช้ได้ ดังนั้น เรามาเจาะลึกและยกระดับทักษะ JavaScript กันเถอะ
1. Destructuring: แยกค่าต่าง ๆ ได้อย่างง่ายดาย
การ Destructuring จะช่วยทำให้คุณสามารถ Unpack ค่าจาก Arrays หรือ Objects ได้อย่างง่ายดาย และนี่คือตัวอย่าง:
2. Spread: Clone Arrays และ Merge Objects
Spread Operator (`...`) ช่วยให้คุณสร้างสำเนาของ Arrays และ Merge Objects ได้อย่างง่ายดาย:
การ Merge Objects:
3. `map()`: สามารถ Transform ได้อย่างง่ายดาย
`map()` Method เป็นอาวุธลับของคุณในการช่วย Transform Data:
4. Short-circuit ด้วย `&&` และ `||`: Conditionals ที่ยอดเยี่ยม
ใช้ `&&` และ `||` เพื่อสร้าง Condition กระชับและชัดเจนมากขึ้น:
5. `setTimeout()`: สร้างลำดับของ Delayed Actions ได้
Chaining `setTimeout()` จะช่วยสร้างลำดับของ Delayed Actions ได้:
6. Arrow Functions: มีความกระชับและทรงพลัง
Arrow functions (`() => {}`) ไม่เพียงแต่มีความกระชับเท่านั้น แต่ยังช่วยรักษาค่าของ `this` ไว้ด้วย:
7. `Promise.all()`: จัดการกับหลาย ๆ Promises
คุณสามารถ Combine หลาย ๆ Promises และจัดการพวกมันโดยใช้ `Promise.all()` ได้:
8. Dynamic Property Names: Object Keys ที่เอนกประสงค์
คุณสามารถใช้ตัวแปรเป็น Object Property Names ได้ โดยใช้ Square Brackets:
9. Template Literals: การจัด Format ของ String
Template Literals (`${}`) ช่วยให้คุณสามารถ Embed Expressions ใน Strings ได้:
10. การตรวจสอบ NaN: ทางเลือกที่ปลอดภัยยิ่งขึ้น
คุณสามารถใช้ `Number.isNaN()` เพื่อตรวจสอบว่า ค่านั้นเป็น NaN หรือไม่:
11. Optional Chaining (`?.`): จัดการกับ Undefined Values
คุณสามารถหลีกเลี่ยงการเกิด Errors ด้วย Optional Chaining เมื่อต้องจัดการกับ Nested Properties:
12. Regex Revival: Mastering Patterns
Regular Expressions (`RegExp`) เป็นเครื่องมือที่มีประสิทธิภาพสำหรับ Pattern Matching:
13. JSON.parse() Reviver: Transform Parsed Data
`reviver` Parameter `JSON.parse()`ช่วยให้คุณ Transform Parsed Data ได้:
14. เคล็ดลับการใช้ Console Tricks: ทำให้ง่ายต่อการ Debug
คุณสามารถทำอะไรที่มากกว่า `console.log()` ด้วย `console.table()` และ `console.groupCollapsed()`:
15. ทำการ Fetch ด้วย `async`/`await`
การใช้ `async`/`await` กับ `fetch()` จะช่วยลดความยุ่งยากในการจัดการกับ Asynchronous Requests ได้:
16. Closures ช่วยให้สร้าง Private Variables: Data Privacy
Closures จะช่วยให้คุณสามารถสร้าง Private Variables ใน Functions ได้:
17. Memoization ช่วยเพิ่มความเร็ว: เพิ่มประสิทธิภาพในเรื่อง Recalculation
Memoization จะสามารถเก็บ Function Results เพื่อช่วยปรับปรุงในเรื่อง Performance ได้:
18. Intersection Observer: ช่วยให้ Scroll Effects ทำได้ง่ายขึ้น
คุณสามารถใช้ Intersection Observer API สำหรับ Lazy Loading และ Scroll Animations ได้:
19. ES6 Modules เพื่อ Clean Code: Organized และ Modular
ใช้ ES6 Modules เพื่อ Code ที่ Clean และแยกเป็น Module:
20. Proxies: Beyond Objects
Proxies จะช่วยให้คุณสามารถห่อหุ้ม Object ไว้และสามารถใช้มันเพื่อตรวจสอบข้อมูลได้:
และทั้งหมดนี้ก็เป็น 20 เคล็ดลับ JavaScript ที่คุณสามารถนำไปประยุกต์ใช้ได้ ซึ่งเชื่อว่าหากคุณได้ลองนำเทคนิคเหล่านี้ไปใช้งาน จะช่วยให้คุณทำงานสะดวกและสนุกยิ่งขึ้น
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
บทความล่าสุด