Skip to main content
0

สารจากนักเขียน

สวัสดีครับ เมื่อเราพูดถึง Javascript หลายคนก็จะนึกออกทันทีว่ามันเป็นภาษาที่เรียนรู้ได้ง่ายสบาย ๆ วันนี้ผมก็เลยจะมาแชร์ One-Liners Javascript ที่จะทำให้ชีวีตของเราง่ายขึ้น ซึ่งบางอันพอนำมาใช้ร่วมกันก็จะทำให้ชีวิตของเราง่ายขึ้นไปอีกจะอะไรบ้างไปดู

เขียนโดย
Thapanon Sodngam
Junior Software Developer

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 17 สิงหาคม 2566

1. เปลี่ยนค่าสีจาก rgba ไปเป็น hexadecimal (เลขฐาน16)

const rgbaToHex = (r, g, b) => "#" + [r, g, b].map(num => 
parseInt(num).toString(16).padStart(2, '0')).join('')
rgbaToHex(0, 0 ,0) // #000000
rgbaToHex(255, 0, 127) //#ff007f

2.เปลี่ยนค่าสีจาก hexadecimal (เลขฐาน16) ไปเป็น rgba

const hexToRgba = (hex) => {
const [r, g, b] = hex.match(/\w\w/g).map(val => parseInt(val, 16))
return `rgba(${r}, ${g}, ${b}, 1)`;
}

hexToRgba('#000000') // rgba(0, 0, 0, 1)
hexToRgba('#ff007f') // rgba(255, 0, 127, 1)

3.หาค่า average

const average = (...args) => args.reduce((a, b) => a + b, 0) / args.length

average(0, 1, 2, -1, 9, 10) // 3.5

4.เลขคู่หรือป่าวนะ ?

const isEven = num => num % 2 === 0

isEven(2) // true
isEven(1) // false

5. Reverse !!!!!!

const reverseStr = str => str.split('').reverse().join('')

reverseStr('ABCD') // DCBA

6. วันที่…เป็นวันที่เท่าไหร่ของปีนะ

const dayInYear = (d) => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)

dayInYear(new Date('2023/08/18'))// 230

7. หาความต่างของวัน

const dayDiff = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000)

dayDiff(new Date("2023-08-18"), new Date("1997-05-31")) // 9575

8. สุ่ม string จากความยาวที่อยากได้

const generateRandomString = length => [...Array(length)].map(() => 
Math.random().toString(36)[2]).join('')

generateRandomString(12) //6b3wh3hgtgne
generateRandomString(3) //vp0

9. สุ่มค่าระหว่างตัวเลข

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)

random(1, 100) // 14
random(1, 100) // 2
random(1, 100) // 97

10. สุ่มค่า boolean

const randomBoolean = () => Math.random() >= 0.5

randomBoolean()

11.ปัดเศษตามหลักที่เราต้องการ

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)

round(3.1415926, 3) //3.142
round(3.1415926, 1) //3.1

12. หาค่าเปอร์เซ็นต์

const calculatePercent = (value, total) => Math.round((value / total) * 100)

calculatePercent(3,5) //60

13. ตรวจสอบว่าใช่ Empty array เปล่าไหม

const isEmptyArray = (arr) => arr.length === 0;

isEmptyArray([]) //true
isEmptyArray([1]) //false

14. เอาค่าซ้ำออกไป!!

const uniqueArray = (arr) => [...new Set(arr)]

uniqueArray([ 1, 1, 2, 8, 5, -1, 0 ]) // [1, 2, 8, 5, -1, 0]

15. สลับค่าใน Array

const shuffleArray = array => array.sort(() => Math.random() - 0.5)

shuffleArray([ 1, 2,3,4, -1, 0 ]) // [ 1, 2, -1, 3, 4, 0 ]

16. Merge array

const mergedArr = (arr1, arr2) => [...arr1, ...arr2];

mergedArr([1, 2, 3, 4], [1, 2, 3])// 1, 2, 3, 4, 1, 2, 3

17. ตรวจสอบว่าใช่ Empty object ไหม

const isEmptyObject = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

isEmptyObject({}) // true
isEmptyObject({ name: 'NAME' }) // false

18. นำเฉพาะค่าจาก key ที่ต้องการจาก Array of Object

const pluck = (objs, key) => objs.map((obj) => obj[key]);

const users = [{ name: "Adam", age: 45 }, { name: "Jane", age: 27 }];

pluck(users, 'name'); // ['Adam', 'Jane']

19. เปลี่ยนจาก Array of Object เป็น Object ตัวเดียว

const toObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});

const arr = [
{ id: '1', name: 'Alpha', gender: 'Male' },
{ id: '2', name: 'Bravo', gender: 'Male' },
{ id: '3', name: 'Charlie', gender: 'Female' }
]

toObject(arr, 'id');
/*
{
'1': { id: '1', name: 'Alpha', gender: 'Male' },
'2': { id: '2', name: 'Bravo', gender: 'Male' },
'3': { id: '3', name: 'Charlie', gender: 'Female' }
}
*/

20. Invert Key to Value Object

const invert = (obj) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));

invert({ a: '1', b: '2', c: '3' }); // { 1: 'a', 2: 'b', 3: 'c' }

21. ลบค่า null และ undefined ออกจาก Object

const invert = (obj) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));

invert({ a: '1', b: '2', c: '3' }); // { 1: 'a', 2: 'b', 3: 'c' }

และนี่ก็คือ One-Liners JavaScript ที่จะทำให้ชีวิตของเราง่ายขึ้น นอกจากนี้ก็ยังมีในส่วนที่นำไปใช้กับ web ได้ด้วยถ้าใครสนใจก็ลองให้หาข้อมูลกันได้น้า วันนี้ก็ลาไปก่อนสวัวดีฮัฟฟฟฟ

ระบบฝึกทักษะ การเขียนโปรแกรม

ที่พร้อมตรวจผลงานคุณ 24 ชั่วโมง

  • โจทย์ปัญหากว่า 200 ข้อ ที่รอท้าทายคุณอยู่
  • รองรับ 9 ภาษาโปรแกรมหลัก ไม่ว่าจะ Java, Python, C ก็เขียนได้
  • ใช้งานได้ฟรี ! ครบ 20 ข้อขึ้นไป รับ Certificate ไปเลย !!
เข้าใช้งานระบบ DevLab ฟรี !เรียนรู้เพิ่มเติม

เรียนรู้ไอที “อัพสกิลเขียนโปรแกรม” จากตัวจริง
ปั้นให้คุณเป็น คนสายไอทีระดับมืออาชีพ

BorntoDev

Author BorntoDev

BorntoDev Co., Ltd.

More posts by BorntoDev

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

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

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

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

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

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

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

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