13 เทคนิคเด็ด !! ที่จะทำให้คุณเขียน JavaScript ง่าย ๆ เพียง 1 บรรทัด

มาดู 13 เทคนิคเด็ด ที่จะทำให้คุณเขียน JavaScript สำหรับการพัฒนาเว็บไซต์ ได้ง่าย ๆ ใน 1 บรรทัด จะมีเทคนิคอะไรเด็ด ๆ บ้าง หากพร้อมแล้ว ไปดูกันเลย

👨‍💻 ลบข้อมูลซ้ำออกจาก 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 เทคนิคที่เรานำมาฝากเพื่อน ๆ เอาไปปรับใช้กับโปรเจกต์ของเพื่อน ๆ ได้ตามใจชอบเลยนะคะ หากผิดพลาดประการใดก็ขออภัยเพื่อน ๆ มา ณ ที่นี้ด้วยนะคะ