COOL IT IDEAS AND STUFF
10 Powerful JavaScript Code Snippets That You Should Know
21-Jan-22
คัมภีร์เทพ IT
See the original english version Click here!
JavaScript เป็นที่นิยมอย่างมากในปัจจุบัน โดยเฉพาะอย่างยิ่งในการพัฒนา Web ด้วย Version ใหม่ของ ECMAScript ทำให้ JavaScript Syntax ได้รับการปรับปรุงอย่างมาก ด้วยเหตุนี้ JavaScript จึงมี Features ที่มีประสิทธิภาพและน่าสนใจมากมายที่คุณสามารถนำมาใช้ใน Code ได้ และนี่ก็เป็น 10 JavaScript Code Snippets ที่ช่วยเพิ่มประสิทธิภาพใน Code ของคุณ
1. Check if Even or Odd
บางครั้ง อาจมีบางสถานการณ์ที่คุณต้องตรวจสอบว่าตัวเลขนั้นเป็น เลขคู่หรือเลขคี่ อย่างเช่น คุณอาจต้องการ Create หรือ Input Field ที่ User ควรป้อนเฉพาะเลขคี่ได้เท่านั้น
ซึ่ง JavaScript Code Snippet ที่อยู่ด้านล่างนี้ จะช่วยให้เราตรวจสอบว่าตัวเลขนั้นเป็น เลขคู่หรือไม่
อย่างที่คุณเห็น Arrow Function ด้านบนมี Argument เดียวที่เรียกว่า num หากตัวเลขที่ถูกป้อนเป็นเลขคู่ ก็จะ Return ค่า True หากเป็นเลขคี่ ก็จะ Return ค่า False
2. Checking if an Argument is a Number
เพื่อตรวจสอบว่า Argument ของ Function เป็นตัวเลขหรือไม่ เราสามารถใช้และ Combine 3 Methods ใน JavaScript ได้ ซึ่ง Methods เหล่านี้ก็คือ isNaN() , parseFloat() และ isFinite()
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งเหล่านี้ได้ใน MDN Documentation
ดังที่คุณเห็นด้านบน ถ้า Argument num เป็นตัวเลข Function ก็จะ Return ค่า True กลับมา มิฉะนั้นก็จะ Return ค่า False
3. Find The Average Value
สมมติว่า คุณต้องการสร้าง Function ใน Program ของคุณ ซึ่งสามารถคำนวณค่าเฉลี่ยของหลาย ๆ ตัวเลขได้ คุณสามารถใช้ Method และ Rest Parameter เพื่อทำเช่นนั้น
นี่คือตัวอย่าง:
ดังที่คุณเห็น Rest Parameter จะช่วยให้เราทราบจำนวน Argument (ตัวเลข) ที่เราส่งผ่านไปยัง Function และในทางกลับกัน Reduce Method จะทำให้เราได้มูลค่ารวมของตัวเลขทั้งหมดที่ถูกส่งผ่านเข้ามา
ผลก็คือ เราสามารถนำมูลค่ารวมของตัวเลข มาหารด้วยจำนวน Argument ที่ส่งผ่านเข้าไป เพื่อให้ได้ค่าเฉลี่ยออกมา
4. Scroll to Top Using JavaScript
Websites ส่วนใหญ่ในปัจจุบัน มี “Scroll to Top” Feature คุณเพียงแค่คลิกปุ่มแล้วมันก็จะเลื่อนคุณไปที่ด้านบนของ Page ในทันที
Method window.scrollTo(0,0) ใน JavaScript จะช่วยให้เราทำเช่นนั้นได้ คุณเพียงแค่ต้องตั้งค่า x และ y เป็น 0
นี่คือตัวอย่าง:
5. Copy to the Clipboard
ในหลายกรณี คุณอาจต้องการให้ Users ของ Program หรือ Website ของคุณ สามารถ Copy ข้อความไปยัง Clipboard ได้อย่างง่ายดาย ซึ่งคุณสามารถทำได้ใน JavaScript โดยใช้ navigator.clipboard.writeText
นี่คือตัวอย่าง Code:
6. Flattening an Array Easily
คุณสามารถกระจาย Array ใน JavaScript ได้อย่างง่ายดายด้วยการใช้ flat() Method ซึ่ง Method นี้จะยอมรับหนึ่ง Number Argument ซึ่งเป็น Level ของการกระจาย Array ออก (เช่น 2 ครั้ง, 3 ครั้ง หรือมากกว่านั้น)
ลองดูตัวอย่างด้านล่างนี้:
7. Easily Reverse a String
คุณสามารถ Reverse String ใน JavaScript ได้อย่างง่ายดาย ซึ่งคุณสามารถทำได้โดยใช้ Methods ดังนี้ คือ split() , reverse() และ join()
นี่คือตัวอย่าง Code:
ดังที่คุณเห็นด้านบน เราใช้ split Method เพื่อ Convert String ให้เป็น Array สำหรับ reverse Method จะถูกใช้เพื่อทำการ Reverse ตัว Array Items ส่วน join Method ถูกใช้เพื่อ Convert Array นั้นกลับไปเป็น String อีกครั้ง
ผลก็คือ Function จะทำการ Return String ที่ถูก Reverse แล้ว นี่เป็นวิธีง่าย ๆ ที่คุณสามารถใช้ในการ Reverse String ใน JavaScript
8. Detect Internet Bandwidth
Bandwidth มักถูกเข้าใจผิดว่าเป็น Internet Speed ทั้ง ๆ ที่มันเป็น ปริมาณของ Data ที่ถูกรับ-ส่ง ผ่านการเชื่อมต่อ Internet ในช่วงเวลาหนึ่ง ๆ ทั้งนี้คุณสามารถตรวจจับ Network Bandwidth ใน JavaScript ได้อย่างง่ายดายโดยใช้ Navigator Object
ดูตัวอย่าง Code ที่อยู่ด้านล่างนี้:
Output:
downlink Property จะ Return Bandwidth โดยประมาณ เป็นเมกะบิตต่อวินาที ดังที่คุณเห็นด้านบน เราได้ค่าอยู่ที่ 5.65 แต่คุณอาจได้รับค่าที่แตกต่างกันไป ขึ้นอยู่กับ Internet Speed, Browser ของคุณ เป็นต้น
9. Return The Selected Text on a Webpage
คุณสามารถรับ Text ที่ถูก Select ไว้บน Web Page ได้อย่างง่ายดาย โดยใช้ getSelection() Method จาก Window Object
นี่คือตัวอย่าง Code:
เมื่อคุณทำการ Run Function นี้ มันจะ Return Text ที่คุณ Select ไว้บน Web Page โดยใช้ Mouse ของคุณกลับมาให้
10. Vibrate Your Phone
คุณรู้หรือไม่ว่า คุณสามารถทำให้โทรศัพท์ของคุณสั่นได้ โดยใช้ JavaScript
vibrate() Method จาก Navigator Object จะช่วยให้คุณสามารถทำเช่นนั้นได้
นี่คือตัวอย่าง Code:
จาก Code Snippets ด้านบน จะทำให้โทรศัพท์ของคุณสั่นเป็นเวลา 600 มิลลิวินาที
สรุป
ดังที่คุณเห็นในรายการด้านบน นี่คือ Code Snippets ที่มีประโยชน์ ที่คุณสามารถนำไปใช้ใน JavaScript Code ของคุณได้ ไม่ว่าคุณจะเป็น Developer ประเภทใดก็ตาม และหวังว่าคุณจะนำพวกมันไปประยุกต์ใช้ในงานจริง ๆ ของคุณ
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด