Hãy trở thành chuyên gia lập trình với 18 bước JavaScript One-Liners

JavaScript là một trong những ngôn ngữ phổ biến nhất với giới lập trình. Có rất nhiều tài liệu tham khảo trên internet điều đó không có nghĩa chúng ta bị ám ảnh vì phải liên tục cập nhật liên tục nhiều hơn nữa vào các cơ sở mã của mình, Chúng ta chỉ cần thêm tiện ích mà chúng ta có thể xây dựng lên.

Thời gian trước việc xóa bỏ các module npm left - pab đã mang lại sự xáo trộn một thời gian trên không gian mạng. Đó là tiện ích có thể xây dựng trong 1 dòng đơn giản. Trên thực tế nó đã có sẵn thông số kỹ thuật của ES7.

Vậy làm như thế nào chúng ta có thể thay đổi điều đó giúp nó không xảy ra? chung ta có nên tiếp tục tạo ra nó nữa hay không?

Câu trả lời là KHÔNG! chung ta cần phải khôn ngoan và ngăn chặn các thuộc tính phụ npm chung ta cần đánh giá xem các thuộc tính lib có tiện ích hay không. Việc mã hóa nó giúp chúng ta dễ dàng kiểm soát nhiều hơn và hiểu rõ hơn về những gì đang thực thi và mang lại.

Trong bài viết này HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI sẽ lấy các ví dụ về tiện ích của JavaScript đơn giản dễ xây dựng. Chỉ trong vài phút, bạn đã có thể nâng cao kiến thức JS của mình.

- Ngoài ra tham khảo thêm các Hàm Closure trong JavaScript tại đây

Danh sách one-liners nâng cao kiến thức về JavaScript

1. Tạo một chuỗi ngẫu nhiên (random string)

Chúng ta có thể sử dụng Math.random để tạo một chuỗi ngẫu nhiên, điều này rất thuận tiện khi chúng ta cần một ID duy nhất.

const randomString = () => Math.random().toString(36).slice(2)randomString() // gi1qtdego0b
randomString() // f3qixv40mot
randomString() // eeelv1pm3ja

2.# Thoát các ký tự đặc biệt trong HTML

const escape = (str) => str.replace(/[&<>"']/g, (m) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m]))escape('<div class="medium">Hi Medium.</div>') 
// &lt;div class=&quot;medium&quot;&gt;Hi Medium.&lt;/div&gt

3.# Viết hoa ký tự đầu tiên của mỗi từ trong một chuỗi

Cách sau được sử dụng để viết hoa ký tự đầu tiên của mỗi từ trong một chuỗi.

const uppercaseWords = (str) => str.replace(/^(.)|\s+(.)/g, (c) => c.toUpperCase())uppercaseWords('hello world'); // 'Hello World'

Cảm ơn Christopher Strolia-Davis vì đây là cách dễ dàng hơn mà anh ấy đưa ra.

const uppercaseWords = (str) => str.replace(/^(.)|\s+(.)/g, (c) => c.toUpperCase())

4.# Chuyển đổi một chuỗi thành camelCase

const toCamelCase = (str) => str.trim().replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''));toCamelCase('background-color'); // backgroundColor
toCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumb
toCamelCase('_hello_world'); // HelloWorld
toCamelCase('hello_world'); // helloWorld

5.# Loại bỏ các giá trị trùng lặp trong một mảng

Loại bỏ các bản sao của mảng là rất cần thiết khiến sử dụng “Set” sẽ trở nên rất đơn giản.

const removeDuplicates = (arr) => [...new Set(arr)]console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6])) 
// [1, 2, 3, 4, 5, 6]

6.# Làm phẳng một mảng

Chúng tôi thường được kiểm tra trong các cuộc phỏng vấn, điều này có thể đạt được theo hai cách.

const flat = (arr) =>
    [].concat.apply(
        [],
        arr.map((a) => (Array.isArray(a) ? flat(a) : a))
    )// Or
const flat = (arr) => arr.reduce((a, b) => (Array.isArray(b) ? [...a, ...flat(b)] : [...a, b]), [])flat(['cat', ['lion', 'tiger']]) // ['cat', 'lion', 'tiger']

7.# Xóa các giá trị giả khỏi mảng

Sử dụng phương pháp này, bạn sẽ có thể lọc ra tất cả các giá trị sai trong mảng.

const removeFalsy = (arr) => arr.filter(Boolean)removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false])
// ['a string', true, 5, 'another string']

8.# Kiểm tra số chẵn lẻ

Nhiệm vụ siêu đơn giản có thể được giải quyết bằng cách sử dụng toán tử modulo (%).

const isEven = num => num % 2 === 0isEven(2) // true
isEven(1) // false

9.# Lấy một số nguyên ngẫu nhiên giữa hai số

Phương pháp này được sử dụng để lấy một số nguyên ngẫu nhiên giữa hai số.

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

10#. Lấy giá trị trung bình của các đối số

Chúng ta có thể sử dụng phương thức Reduce để lấy giá trị trung bình của các đối số mà chúng ta cung cấp trong hàm này.

const Average = (... args) => args.reduce ((a, b) => a + b) / args.length;trung bình (1, 2, 3, 4, 5);   // 3

11.# Làm tròn số đến một dấu thập phân cố định

Sử dụng phương thức Math.pow (), chúng ta có thể làm tròn số đến một dấu thập phân nhất định mà chúng ta cung cấp trong hàm.

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)round(1.005, 2) //1.01
round(1.555, 2) //1.56

12.# Tính số ngày chênh lệch giữa hai giá trị ngày

Đôi khi chúng ta cần tính toán số ngày giữa hai ngày nào đó bằng một dòng mã.

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));diffDays(new Date("2021-11-3"), new Date("2022-2-1"))  // 90

13.# Biết thứ trong tuần từ một ngày nào đó

Bạn có muốn biết một ngày trong năm bất kì là thứ mấy không?

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))dayOfYear(new Date()) // 74

14.# Tạo một màu hex ngẫu nhiên

Chức năng này sẽ giúp bạn tạo một giá trị màu ngẫu nhiên.

const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`randomColor() // #9dae4f
randomColor() // #6ef10e

15.# Chuyển đổi màu RGB thành hex Convert RGB color to hex

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)rgbToHex(255, 255, 255)  // '#ffffff'

16.# Xóa tất cả cookie Clear all cookies

const clearCookies = () => document.cookie.split(';').forEach((c) => (document.cookie = c.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)))

17.# Xác định chế độ tối

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

18.# Hoán đổi giá trị hai biến Swap two variables

[foo, bar] = [bar, foo]

19.# Tạm dừng vòng lặp

const pause = (millis) => new Promise(resolve => setTimeout(resolve, millis))const fn = async () => {
  await pause(1000)  console.log('fatfish') // 1s later
}
fn()

Trên đây là tất cả thủ thuật one-line code mà chúng tôi chia sẻ hôm nay. Cảm ơn bạn đã đọc bài! Hãy trở thành chuyên gia lập trình với 18 bước JavaScript One-Liners.

Nguồn: niithanoi.edu.vn