Thủ thuật về Javascrit mà bạn nên biết (phần 2)

Tiếp nối phần 1 thì cuối cùng phần 2 đã xuất hiện 😁. Dưới đây là các thủ thuật có thể giúp các bạn giải quyết một số vấn đề cụ thể mà dev javascript cần đến nó.

Biểu thị số dưới dạng Numbers separations

Khi ta khai báo một số lớn hoặc số có các chữ số giống nhau, chẳng hạn 100000, 1111111,… Ta sẽ rất khó khăn khi nhận biết giá trị chính xác của nó là bao nhiêu.

Để giải quyết việc này, ta có thể biểu thị số dưới dạng numbers separations như num3 dưới đây.

let num1 = 10000000; // bad ❌
let num2 = 10 * 1000 * 1000; // good ✅
let num3 = 10_000_000; // good ✅

Sử dụng normalize để bỏ dấu tiếng việt

function removeAccents(str = '') {
  return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/đ/g, 'd').replace(/Đ/g, 'D')
}
removeAccents("Bỏ dấu tiếng việt") // Bo dau tieng viet

Hàm normalize có trong ES6 giúp định lại chuẩn hóa unicode của chuỗi.

Tìm hiểu thêm developer.mozilla.org

Hoặc xem phân tích kỹ hơn về vấn đề này ở đây

Random chuỗi id

Hàm dưới đây sẽ random tương tự như module uuidv4.

function randomId() {
 return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
  let r = (Math.random() * 16) | 0,
   v = c == 'x' ? r : (r & 0x3) | 0x8
   return v.toString(16)
  })
}
randomId() // 325c6d77-4484-44ee-af8e-8f989a1d4ef6

Hoặc đơn giản sử dụng hàm sau:

function randomId() {
 return Math.random().toString(36).slice(2)
}

randomId() // 56xx4abnhte

Kiểm tra property trong object

Sử dụng toán tử in trong javascript để kiểm tra property trong object.

let a = {name: 'John', age: null}

console.log("name" in a) // true
console.log("age" in a) // true

Hiệu ứng scroll mượt mà

Khi bạn dùng scrollTo() thì có thể thêm behavior: 'smooth' để nhìn trông mượt hơn 😙

window.scrollTo({
  top: 0,
  behavior: 'smooth', // khai báo thêm phần behavior: 'smooth'
})

Dùng switch để bắt nhiều trường hợp

Bạn đã từng dùng switch như cách dưới đây chưa ? Nếu chưa thì hãy thử vì nó rất thú vị đấy 😁 😁

switch (true) {
  case a === b: {
    // do something
    break;
  }
  case a === 9:
  case a > b: {
    // do something
    break;
  }
  default: break;
}

Sắp xếp mảng string theo alplabet

Trường hợp này mình sẽ dùng localeCompare, hiểu đơn giản là nó so sánh 2 string và trả về dạng số, từ đó mình có thể sắp xếp theo thứ tự.

const arr = ['apple', 'orange', 'banana']

arr.sort((a, b) => a.localeCompare(b)) // ['apple', 'banana', 'orange']
arr.sort((a, b) => -a.localeCompare(b)) // ['orange', 'banana', 'apple']

Hợp nhất mảng thành dạng flat array

Phương thức để làm phẳng cho 1 mảng là Array.flat(). Nhưng truyền vào hàm là một số, nhưng nếu chúng ta muốn làm phẳng hết cả mảng thì có thể truyền Infinity vào.

const arr = ['apple', ['orange', 'banana']]

arr.flat(Infinity) // ['apple', 'orange', 'banana']

Bài viết đến đây xin hết, cảm ơn các bạn đã đọc. Happy coding 🥰 🥰

Xem lại Thủ thuật về Javascript (phần 1)