Skip to main content
0

One-Liners JavaScript ที่จะทำให้ชีวิตง่ายขึ้น จะมีอะไรบ้างไปดูกัน

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

สวัสดีครับ เมื่อเราพูดถึง 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 ฟรี !เรียนรู้เพิ่มเติม

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

0

แนะนำสำหรับคุณ

Close Menu

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

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

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

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

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

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

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

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