Skip to main content
0
JavaScriptNewsProgramming Language

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

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

**หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน

และ เทคโนโลยีของตัวเอง ?**

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Kanthima Muangsen

Author Kanthima Muangsen

More posts by Kanthima Muangsen
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า