ฟีเจอร์ที่นักพัฒนา JavaScript ต้องรู้ในปี 2025

 (waspdev.com)
31 คะแนน โดย GN⁺ 2025-04-16 | 4 ความคิดเห็น | แชร์ทาง WhatsApp
  • JavaScript ยังคงพัฒนาอย่างต่อเนื่องในปี 2025 และมีบางฟีเจอร์ที่อาจไม่ค่อยเป็นที่รู้จักแต่มีประโยชน์มาก
  • เมธอดช่วยเหลือของ Iterator ชุดใหม่ทำงานได้อย่าง มีประสิทธิภาพด้านหน่วยความจำ มากกว่ามากเมื่อแปลงข้อมูลขนาดใหญ่
  • การเข้าถึงจากท้ายอาร์เรย์ด้วย at(), การใช้ Promise.withResolvers() ที่เรียบง่าย, และ structuredClone() สำหรับการคัดลอกแบบลึก
  • การดำเนินการเซตสำหรับ Set, ฟังก์ชันแท็กของ template string, และ วิธีใช้ WeakMap/WeakSet ยังคงเป็นสิ่งที่นักพัฒนาจำนวนมากมองข้าม

เมธอดช่วยเหลือของ Iterator

  • การเชนแบบเดิมอย่าง arr.filter().map() นั้น ไม่มีประสิทธิภาพเพราะสร้างอาร์เรย์ใหม่ในทุกขั้นตอน
  • สามารถปรับปรุงได้ด้วย การเชนบนพื้นฐานของ iterator เช่น arr.values().drop(10).take(10).map(...).toArray()
  • เมธอดหลัก:
    • drop(): ข้าม n รายการแรก
    • take(): เอาเฉพาะ n รายการแรก
    • filter(), map(), flatMap(): ทำงานคล้ายเมธอดของอาร์เรย์
    • reduce(), some(), every(), find(): รองรับการทดสอบเงื่อนไขและการคำนวณสะสม
    • toArray(): แปลงเป็นอาร์เรย์สุดท้าย
  • Safari เริ่มรองรับตั้งแต่ 31 มีนาคม 2025 แต่ตอนนี้ยังไม่รองรับทุกเบราว์เซอร์

Array at()

  • arr.at(n) คล้ายกับ arr[n] แต่ เข้าถึงจากท้ายได้ด้วยดัชนีติดลบ
  • ตัวอย่าง: [10, 20, 30].at(-1) → 30
  • จึงเข้าถึงสมาชิกตัวสุดท้ายได้โดยไม่ต้องใช้วิธีที่ยุ่งยากอย่าง arr[arr.length - 1]

Promise.withResolvers()

  • วิธีเดิม: เก็บ resolve/reject จากภายนอกใน new Promise((resolve, reject) => { ... })
  • ตอนนี้สามารถใช้แบบ กระชับและตรงไปตรงมา ได้ด้วย const { promise, resolve, reject } = Promise.withResolvers()

การใช้คอลแบ็กกับ String.replace()

  • อาร์กิวเมนต์ตัวที่สองของ replace() และ replaceAll() รองรับได้ไม่ใช่แค่สตริง แต่รวมถึงฟังก์ชันคอลแบ็กด้วย
  • ตัวอย่าง: "X, X, X".replaceAll("X", (match, i) => match + i) → "X0, X3, X6"
  • ทำการแทนที่ได้หลากหลายภายในครั้งเดียว → มีประสิทธิภาพทั้งด้าน performance และหน่วยความจำ

การสลับตัวแปร (Swap)

  • วิธีเดิม: ใช้ตัวแปร temp
  • วิธีที่กระชับกว่า: [a, b] = [b, a] เพื่อ สลับตัวแปรด้วย array destructuring

structuredClone()

  • รองรับการคัดลอกแบบลึกที่ แม่นยำและมีประสิทธิภาพกว่า JSON.stringify() + JSON.parse()
  • ข้อดี:
    • รองรับ NaN, undefined, bigint เป็นต้น
    • คัดลอก circular reference ได้อย่างปลอดภัย
    • ใช้หน่วยความจำและทำงานได้เร็วกว่า เมื่อจัดการอ็อบเจ็กต์ขนาดใหญ่

Tagged Template Literals

  • สามารถพาร์ส template string ผ่านฟังก์ชันเฉพาะได้
  • มีประโยชน์สำหรับ การประมวลผลสตริงแบบไดนามิกภายหลัง เช่น การ escape HTML
  • ตัวอย่าง:
    ฟังก์ชันแท็ก escapeHtml ทำให้ <br> ${'<br>'} → <br> <br>

WeakMap / WeakSet

  • คล้ายกับ Map, Set ปกติ แต่:
    • อนุญาตให้ใช้เฉพาะอ็อบเจ็กต์เป็นคีย์ (ไม่รองรับ primitive)
    • หากกลายเป็นเป้าหมายของ GC จะถูกลบออกโดยอัตโนมัติ
  • เหมาะสำหรับกรณีที่อาจมี circular reference หรือเมื่อต้องการ เก็บ metadata ของอ็อบเจ็กต์โดยไม่ก่อให้เกิด side effect

รองรับการดำเนินการเซตสำหรับ Set

ใน JavaScript มีการเพิ่ม logical operations หลากหลายแบบให้กับอ็อบเจ็กต์ Set:

  • difference(): ผลต่างเซต (A - B)
  • intersection(): อินเตอร์เซกชัน (A ∩ B)
  • union(): ยูเนียน (A ∪ B)
  • symmetricDifference(): symmetric difference (A △ B)
  • isDisjointFrom(): มีสมาชิกที่ซ้อนทับกันหรือไม่
  • isSubsetOf(): เป็นสับเซตหรือไม่
  • isSupersetOf(): เป็นซูเปอร์เซตหรือไม่

บทความที่เกี่ยวข้อง

4 ความคิดเห็น

 
wfedev 2025-04-23

ดูเหมือนว่าปัญหาที่เมื่อพาร์สลิเทอรัลแล้วแม้แต่ตัวแปรก็ออกมาเป็นสตริงได้รับการแก้ไขแล้ว ขอบคุณที่แชร์ครับ
 
pompapa 2025-04-17

ตัวอย่าง: "X, X, X".replaceAll("X", (match, i) => match + i) → "X0, X1, X2"

ตัวอย่างนี้ไม่ถูกต้อง i มีตำแหน่งที่พบอยู่
ดังนั้นค่าผลลัพธ์จึงเป็น "X0, X3, X6" ครับ
 
xguru 2025-04-17

อ้อ จริงด้วยครับ AI สร้างตัวอย่างผิดไปเอง ผมแก้ไขไว้แล้ว ขอบคุณสำหรับการทักท้วงที่เฉียบคมครับ!
 
click 2025-04-16

values ให้ความรู้สึกคล้าย Java Stream API เลยลองเทียบดู พบว่าถ้าขนาดของ array เล็ก การใช้ filter โดยไม่ผ่าน values จะเร็วกว่านิดหน่อยครับ เพราะเป็นแบบ iterator ยิ่งมีการ chaining มากขึ้น วิธีที่ผ่าน values หนึ่งรอบก็น่าจะยิ่งมีผลให้เร็วขึ้นได้เหมือนกัน ดู benchmark ได้ที่ https://jsperf.app/dixutu