Một số thủ thuật JavaScript với ES6

ES6 ra đời cũng một thời gian và đã giúp JavaScript giờ trở nên mạnh mẽ hơn bao giờ hết. Một số thủ thuật dưới đây sẽ giúp chúng ta tiết kiệm thời gian và nhìn code của chúng ta sẽ tuyệt vời hơn bao giờ hết.

1. Hoán đổi 2 biến

Với cách thông thường chúng ta sẽ dùng thêm 1 biến phụ để có thể hoán đổi giá trị của 2 biến.

let oldSwap1 = 123, oldSwap2 = 456, oldTmp;
oldTmp = oldSwap1;
oldSwap1 = oldSwap2;
oldSwap2 = oldTmp;

Có lẽ trên là cách chúng ta thường hay sử dụng, giờ chúng ta hãy thử xem với ES6 thì có thể làm được gì nào:

let newSwap1 = 123, newSwap2 = 456;
[newSwap2, newSwap1] = [newSwap1, newSwap2];

Với bạn thì bạn thích cách nào?

2. Debugging

let a = 1, b = 2, c = 3;
console.log(a, b, c); //Đây là cách thông thường phải không?
// output
// 1 2 3

// Bạn có thể đơn giản trả về Object và kết quả sẽ dễ nhìn hơn rất nhiều
console.log({a, b, c});
// outputs là một Object:
// {
//    a: 5,
//    b: 6,
//    c: 7
// }

3. Viết code trên 1 dòng

Tìm giá trị lớn nhất trong mảng

const max = (arr) => Math.max(...arr);
max([123, 321, 32]); // outputs: 321

Tính tổng giá trị trong mảng

const sum = (arr) => arr.reduce((a, b) => (a + b), 0);
sum([1, 2, 3, 4]); // output: 10

Cái này thì mình nghĩ chắc mọi người dùng nhiều, mình chỉ để đây và giúp cho bạn nào chưa biết có thể tận dụng được nó.

4. Nối mảng

const one = ['a', 'b', 'c'];
const two = ['d', 'e', 'f'];
const three = ['g', 'h', 'i'];
// Cách cũ #1
const result = one.concat(two, three);
// Cách cũ #2
const result = [].concat(one, two, three);

Trên có phải cách bạn hay dùng, giờ với ES6 chúng ta sẽ có một cách mới như thế này:

const result = [...one, ...two, ...three];

Cách nào ngắn gọn và thuận tiện nhất với bạn, chắc bạn cũng có câu trả lời cho riêng mình rồi?

5. Sao chép mảng hoặc object

Hãy thử ví dụ sau

let Object = {a: 'a'};
let CopyObject = Object;
CopyObject.a = 'Change Value';
console.log(Object.a);
// Change Value

Ở trên chúng ta gán CopyObject = Object, khi chúng ta thay đổi CopyObject thì giá trị của Object cũng thay đổi, thực chất đây chỉ là 2 tên gọi khác nhau cho cùng một giá trị, chúng sẽ có cùng địa chỉ ô nhớ trên máy tính. Với mảng thì kết quả cũng sẽ tương tự. Có nhiều cách để sao chép một đối tượng mới, tức là tạo ra 2 đối tượng mới hoàn toàn và không ảnh hưởng tới nhau. Với ES6 thì ta có thể có cách đơn giản sau.

let Object = {a: 'a'};
let ES6Object = {...Object};
CopyObject.a = 'Change Value';
console.log(Object.a);
// a

Tương tự với Array

let newArray = [...oldArray];

6. Thay thế Math.floor bằng 2 toán tử Bitwise

console.log(Math.floor(4.9)); // 4
console.log(~~4.9); // 4

Bạn có thể copy 2 dòng trên và F12 lên để kiểm chứng luôn. Và hơn nữa việc thực hiện toán tử với bit luôn được xử lý rất nhanh.

7. Default Parameters in ES6

Chúng ta có các câu lệnh để định nghĩa các tham số mặc định:

var link = function (height, color, url) {
    var height = height || 50;
    var color = color || 'red';
    var url = url || 'viblo.asia';
    // Do something
}

Mọi thứ vẫn ổn cho đến khi giá trị là 0 và bởi vì trong JavaScript 0 là falsy nên nó sẽ mặc định là giá trị mà chúng ta hard-coded (50, 'red', 'viblo.asia'), vì thế chúng ta cần sử dụng cách khác. Trong ES6, chúng ta có thể đặt các giá trị mặc định khi khai báo tham số như thế này:

var link = function(height = 50, color = 'red', url = 'viblo.asia') {
    // Do something
}

Đây là bổ sung mới trong ES6 và mình nghĩ chắc các bạn cũng đã sử dụng nhiều, và tất nhiên mình vẫn viết vào để cho những người chưa biết đến nó. Và cách này sẽ khiến trông giống một số ngôn ngữ và lại còn ngắn gọn nữa chứ.

Ở trên là một số thủ thuật mình thu thập và hay sử dụng. Nếu bạn còn có thủ thuật hữu ích nào khác mời comment bên dưới, rất vui nếu có cho sự đóng góp của bạn. Cảm ơn bạn đã đọc bài viết, chúc bạn tận dụng tốt những thủ thuật trên trong dự án của bản thân.