บทความ IT เจ๋งๆ
6 JavaScript One-Liners ที่มีประโยชน์ต่อการทำงานของคุณ
07-ธ.ค.-22
คัมภีร์เทพ IT
ปัจจุบัน JavaScript ได้รับความนิยมอย่างมากและถูกใช้งานอย่างแพร่หลายจาก Developers ทั่วโลก และมักจะพบว่าอยู่เบื้องหลัง Website ต่าง ๆ มากมาย และด้วยงานที่ Developers ต้องทำหลายอย่างในแต่ละวัน การเขียน Code ได้เร็วขึ้นน่าจะช่วยให้งานเสร็จเร็วขึ้น และบทความนี้จะเป็น 6 JavaScript One-Liners ที่มีประโยชน์ต่อการทำงานของคุณ
1. Design Mode
JavaScript มีหลายสิ่งที่ทำให้คุณรู้สึกประหลาดใจได้อยู่เสมอด้วย Features เฉพาะตัว ที่ทำให้การทำงานสนุกยิ่งขึ้น ซึ่ง Design mode จะช่วยให้คุณสามารถสร้างลูกเล่นต่าง ๆ กับ Texts บน Websites ได้ คุณเพียงแค่ต้องเปิดใช้งานโดยใช้ Console ด้วยการกำหนดให้ document.designMode = 'on' และตอนนี้คุณสามารถแก้ไข Texts และสนุกกับการสร้าง Website ได้แล้ว
Design Mode ON vs Design Mode OFF
2. การ Merge Arrays
มีหลายวิธีในการ Merge Arrays ใน JavaScript แต่การใช้เทคนิคที่ช่วยประหยัดเวลา มักเป็นแนวทางที่ดีสำหรับ Developer อยู่เสมอ
ตัวอย่างเช่น
- สมมติว่าเรามี 2 Arrays ที่มีตัวเลขตั้งแต่ 1 - 10
- ในการ Merge Array1 และ Array2 นั้น Spread Operator จะช่วยให้คุณทำสิ่งนั้นได้ในเวลาอันรวดเร็ว
- แต่อย่างไรก็ตาม ในกรณีที่มี Items ที่ซ้ำ ๆ กันอยู่ใน Array เราอาจต้องทำการเปลี่ยนแปลงอะไรบางอย่าง
- เพื่อให้แน่ใจว่า Arrays ที่ถูก Merge ของเรา จะไม่มี Item ที่ซ้ำกัน เราสามารถใช้ Set() ในการลบ Item ที่ซ้ำกันอยู่
Merging Arrays
- โปรดทราบว่า เมื่อเราใช้ Arrays กับ Item ที่ซ้ำกัน Set() จะทำหน้าที่ลบพวกมันออกโดยใช้เวลาไม่นาน
3. Extraction
คุณคงคุ้นเคยกับการทำ Extraction ใน JavaScript มาบ้างแล้ว โดยส่วนใหญ่เราจะใช้ “.” (Dot) เพื่อเข้าถึง Properties ใน Objects ดังที่แสดงด้านล่างนี้:
แต่ที่จริงก็มีวิธีที่รวดเร็วกว่าในการทำลักษณะเดียวกัน
ตัวอย่างเช่น
- สมมติว่าเรามี const ที่ชื่อว่า profile ดังนั้นเพื่อที่จะ Extract Properties ที่มี age, name และ location เราสามารถใช้ “.” (Dot) เพื่อเข้าถึงพวกมันได้
- ในการทำเช่นนั้น คุณต้องเพิ่ม Properties ที่คุณต้องการเข้าถึงและ Set ค่าพวกมันให้เท่ากับ Objects ที่คุณต้องการจะ Extract ออกมา
Faster way of Extraction
- นอกจากนี้ หากคุณกำลังทำงานกับ Arrays คุณก็สามารถใช้ Properties กับ Index Values เพื่อเข้าถึง Items ของ Array เหล่านั้นได้
4. console.table
การใช้ console.log แบบดั้งเดิม อาจเป็นที่ชื่นชอบมากที่สุดในหมู่ Developers แต่มีบางครั้งที่คุณมี Arrays ที่มี Data อยู่เป็นจำนวนมาก ซึ่งสิ่งนี้ทำให้การอ่าน Log Statement ทำได้ยากขึ้น ทางเลือกที่ดีสำหรับกรณีดังกล่าวก็คือ การใช้ console.table ซึ่งเป็นการเขียน Data ใน Table ในขณะที่ทำงานกับ Arrays ใน JavaScript นั้น Feature นี้จะมีประโยชน์อย่างมาก เนื่องจากมันจะทำให้การอ่าน Data ทำได้ง่ายขึ้นมาก
console.log vs console.table
5. การทำ String ให้ขึ้นต้นด้วยตัวอักษรพิมพ์ใหญ่
เมื่อ Frontend Application ของคุณต้องการความสวยงามและปราศจาก Bugs การมี Strings ที่เยอะและดูยุ่งเหยิงนั้น ไม่ได้ช่วยให้มันดูดีขึ้นลย และเพื่อให้แน่ใจว่าคุณจะไม่ต้องเผชิญกับสถานการณ์ดังกล่าว คุณสามารถใช้วิธีดังต่อไปนี้ เพื่อทำให้ String เป็นตัวอักษรพิมพ์ใหญ่ ได้อย่างรวดเร็ว
ตัวอย่างเช่น
- เราใช้ JavaScript Arrow Function ในตัวอย่างนี้ Arrow Function ของเราต้องการ String ที่ประกอบไปด้วย String ที่เป็นตัวอักษรพิมพ์เล็ก
- เพื่อให้เป็นตัวอักษรพิมพ์ใหญ่ เราจะต้องใช้ charAt(0) เพื่อเลือกตัวอักษรที่ Index 0, และใช้ toUpperCase เพื่อ Convert ตัวอักษรนั้นให้เป็นตัวอักษรพิมพ์ใหญ่
- string.slice(1) ทำหน้าที่ในส่วนที่เหลือ ในการ Combine ตัวอักษรพิมพ์เล็กที่เหลือของเรา
Capitalizing a String
6. การ Reverse String
JavaScript In-Built Methods จะทำให้การ Reverse String เป็นสิ่งที่ทำได้ง่ายมาก คุณเพียงแค่ต้องใช้ Inbuilt Method นั้นตามลำดับที่ถูกต้อง เพื่อให้ได้ผลลัพธ์ตามที่ต้องการ
ตัวอย่างเช่น
- สมมติว่า เรามี Function ชื่อว่า revString ซึ่งเรากำลังส่ง String ที่ต้องการจะทำการ Reverse
- เราจะใช้ split('') Method ในการแบ่ง String ของเรา และใช้ reverse() Method เพื่อทำการ Reverse String
- ส่วน join(‘’) นั้น จะใช้สำหรับรวม String ที่ถูก Reverse แล้ว อีกครั้ง
Reverse a String
โปรดทราบว่า วิธีการนี้ อาจไม่เหมาะสมที่จะใช้กับ Palindrome
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด