มาดู 13 เทคนิคเด็ด ที่จะทำให้คุณเขียน JavaScript สำหรับการพัฒนาเว็บไซต์ ได้ง่าย ๆ ใน 1 บรรทัด จะมีเทคนิคอะไรเด็ด ๆ บ้าง หากพร้อมแล้ว ไปดูกันเลย
ผู้เขียน Kanthima M. – BorntoDev Co., Ltd.
👨💻 ลบข้อมูลซ้ำออกจาก Array
const removeDup = (arr) => [...new Set(arr)];
console.log(removeDup([112, 9, 9, 10, 44, 3, 2, 1, 6]));
//output => [112, 9, 10, 44, 3, 2, 1, 6]
👨💻 ตรวจสอบตัวเลขคู่ & คี่
const isEven = num => num % 2 === 0;
console.log(isEven(2));
//output => true
👨💻 หาค่าเฉลี่ย
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
console.log(average(88, 14, 32, 85));
//output => 54.75
👨💻 Reverse String
const reverse = str => str.split('').reverse().join('');
console.log(reverse('bottle of water'));
//output => retaw fo elttob
👨💻 เปลี่ยน string เป็นพิมพ์ใหญ่
const upperCase = str => str.charAt(0).toUpperCase() + str.slice(1)
console.log(upperCase("borntodev"));
👨💻 ตรวจสอบอาเรย์
ใช้ตรวจสอบว่าในอาเรย์มีค่าว่างหรือไม่ จะ return เป็น true และ false
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
console.log(isNotEmpty([1, 2, 3]));
//output => true
👨💻 สลับตำแหน่งใน Array แบบสุ่ม
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
👨💻 หาจำนวนระหว่าง 2 วัน
const day = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
console.log(day(new Date("2021-05-7"), new Date("2021-09-27")));
//output => 144
👨💻 ตรวจสอบวันที่
ตรวจสอบว่าวันที่ถูกต้องหรือไม่ จะ return ออกมาเป็น true และ false
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
console.log(isDateValid("September 27, 2021 03:10:11"));
//output => true
👨💻 รับค่าคุกกี้จากเบราว์เซอร์
cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
console.log(cookie('_ga'));
👨💻 ล้างค่าคุกกี้
สามารถล้างค่าคุกกี้ได้โดยใช้ฟังก์ชัน document.cookie
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
👨💻 สร้าง Hex แบบสุ่ม
สามารถสร้างรหัสสี Hex ด้วยฟังก์ชัน Math.random และ padEnd
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
//output => #214218
👨💻 แปลง RGB เป็น Hex
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
console.log(rgbToHex(0, 51, 255));
//output => #0033ff
และทั้งหมดนี้คือทั้ง 13 เทคนิคที่เรานำมาฝากเพื่อน ๆ เอาไปปรับใช้กับโปรเจกต์ของเพื่อน ๆ ได้ตามใจชอบเลยนะคะ หากผิดพลาดประการใดก็ขออภัยเพื่อน ๆ มา ณ ที่นี้ด้วยนะคะ
**หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?**
อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้
-
Sale!
-
Sale!
-
Sale!
-
Sale!
