Các thủ thuật javascript cần biết (Phần 1)

Javascript hay JS là một trong những ngôn ngữ lập trình hiện đại, bá đạo nhất hiện nay, nó hiện diện trên hầu hết các ứng dụng web từ backend đến frontend. Ở JS có rất nhiều thủ thuật hay giúp tăng hiệu năng code của bạn, hãy xem qua những thủ thuật hay mà chúng ta có thể thực hiện với javascript, nó có thể giúp đỡ bạn trong tương lai đấy.

Clone kiểu dữ liệu Reference Type

khi mà khai báo biến A nào đó bằng với biến B (kiểu Reference) thì thực tế biến A trỏ địa chỉ vào biến B, nên khi A thay đổi thì B cũng thay đổi theo và ngược lại.

Nếu bạn chưa rõ về kiểu dữ liệu Primitive Type hay Reference Type thì hãy đọc qua bài viết Phân loại các kiểu dữ liệu trong Javascript

Để Clone trong trường hợp này ta có 2 cách đơn giản như sau:

let object = {}
let array = []
// deep clone an object
let newObject = JSON.parse(JSON.stringify(object))
let newArray = JSON.parse(JSON.stringify(array))
// use Spread operator
let newObject2 = {...object}
let newArray2 = [...array]

Đặt giá trị mặc định cho các tham số

Trước đây mình không để ý cái này lắm nhưng làm nhiều mới thấy cái này nó quan trọng đến như nào. Đa số những lỗi như "Cannot read property '...' of undefined" đều xuất phát từ đây.

Để đặt tham số mặc định của hàm ta có 2 cách hay sử dụng

// With ES5
// using logical or
function sumTwoNumber(firstNum, lastNum) {
  firstNum = firstNum || 0
  lastNum = lastNum || 0
  return firstNum + lastNum
}

// With ES6
function sumTwoNumber(firstNum = 0, lastNum = 0) {
  return firstNum + lastNum
}

Lấy số ramdom trong một đoạn

Có một mẹo rất hay để lấy số ngẫu nhiên trong một khoảng mà mình đặt ra

let random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
// Usage
console.log(random(1, 100))

Hàm random trên trả về một số ngẫu nhiên trong đoạn từ min đến max

Tìm max và min của phần tử trong mảng là các dữ liệu dạng số

let numbers = [1, 8 , 10 , -125 , 28 , 100 , 215, -85];
console.log(Math.max(...numbers), Math.max.apply(Math, numbers)); // 215 215
console.log(Math.min(...numbers), Math.min.apply(Math, numbers)); // -125 -125

Bạn có thể dùng cách này thay vì mất thời gian code 1 vòng for để lấy max hay min :)))

Biến một mảng thành mảng rỗng

Có rất nhiều bạn đưa về mảng rỗng bằng cách

let arr = [1, 2, 3];
arr = [];

Khi đó, thực chất là bạn đã tạo thêm một mảng mới. Cách đơn giản để giải quyết vấn đề này là:

let arr = [1, 2, 3];
arr.length = 0;
console.log(arr); // => []

Rất đơn giản phải không nào các bạn =))

Tận dụng các toán tử logical and( && ), or( || )

Hai toán tử được sử dụng rất phổ biến trong câu lệnh điều kiện if else, nhưng có cách sử dụng khác mà bạn không nên bỏ qua đó là sử dụng && hay || để thay thế hoàn toàn if

let a = 10;
a === 10 && console.log(1, a); // => 1 10
a === 5 || console.log(2, a);  // => 2 10

Hoặc có thể kết hợp cả 2 thì bạn có thể làm được như sau

let a = 10;
a === 5 && console.log(1, a) || console.log(2, a); // => 2 10

Hoặc một ví dụ khác sử dụng toán tử &&

if (condition) {
    doSomething();
}
condition && doSomething();  

Phần một mình xin tạm dừng ở đây, tất cả các thủ thuật trên đều phần nào giúp các bạn giải quyết nhanh một số vấn đề đơn giản, gặp hằng ngày. Chúc các bạn áp dụng tốt các thủ thuật trên và nhớ đón chờ Phần 2 sắp ra nhé.