Giải quyết vấn đề nhanh gọn với ES6.

Dưới đây mình xin được demo 7 điều mà bạn có thể làm được nếu có ES6.

1, Array destructuring.

- Với ES6 bạn có thể khai báo một mảng bằng 1 mảng với giá trị được map bởi index của nhau.

VD:

var [a, b] = ['a value', 'b value'];

console.log(a); // a value
console.log(b); // b value

Chạy Code

Và bạn cũng có thể set giá trị defaut cho biến.

VD: Chưa có giá trị default.

var [a, b, c] = ['a value', 'b value'];

console.log(a); // a value
console.log(b); // b value
console.log(c); // Undefined

Chạy Code

VD: Có giá trị default.

var [a, b, c = 'c value'] = ['a value', 'b value'];

console.log(a); // a value
console.log(b); // b value
console.log(c); // Undefined

Chạy Code

2, Chuyển đổi giá trị cho nhau (swap avaliables).

Nếu như phần 1 ok rồi thì phần 2 này cũng tương tự thôi :D.

VD:

var domain = 'toidicode.com';
var author = 'vu thanh tai';

[domain, author] = [author, domain];

console.log(author); // toidicode.com
console.log(domain); // vu thanh tai

Chạy Code

3, Nối mảng nhanh gọn.

Với sự hỗ trợ của Spread Operator trong ES6 thì nối mảng sẽ trở nên cực kỳ đơn giản.

VD:

var arrOne = [1, 2, 3, 4, 5];
var arrTwo = [6, 7, 8, 9, 10];
var arrThree = [11,12,13,14,15];

// thông thường
var arrayNew = arrOne.concat(arrTwo, arrThree);
console.log(arrayNew);

// với es6
var newArray = [...arrOne, ...arrTwo, ...arrThree];
console.log(newArray);

Chạy Code

4, Clone đơn giản.

Với ES6 bạn cũng có thể clone một mảng hay một object một cách đơn giản.

var arr = [1, 2, 3, 4, 5];
var obj = {
    name : "Vu Thanh Tai",
    age : 23
};

// thông thường
var cpArray = arr.slice(0);
console.log(cpArray);

var cpObject = Object.assign({}, obj);
console.log(cpObject);
// với es6
cpArray = [...arr];
console.log(cpArray);

cpObject = {...obj};
console.log(cpObject);

Chạy Code

5, Loại bỏ các giá trị trùng của mảng.

Với Object Set chúng ta có thể làm được điều này 1 cách đơn giản.

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [1, 5, 8, 9, 4];

// console.log(arr1 + arr2);
newArr = [...new Set([...arr1, ...arr2])];

console.log(newArr) // [1, 2, 3, 4, 5, 8, 9]

Chạy Code

6, Định nghĩa các Abstract class.

Sử dụng contructor để làm thủ thuật xây dựng lên một abstact class.

class DemoAbs{
    constructor() {
        if (new.target === DemoAbs) {
            throw new Error("DemoAbs is abstract class")
        }

        console.log('ok');
    }
}

new DemoAbs(); // Uncaught Error: DemoAbs is abstract class

class Demo extends DemoAbs {
    
}

new Demo(); // ok

Chạy Code

7, Gán tham số bắt buộc.

Mặc định trong javascript, nếu khai báo hàm có tham số truyền vào mà khi gọi chúng ta không chuyền vào thì nó cũng chẳng báo lỗi gì

VD:

function Say(message) {
    if (message)
        console.log(message);
}

Say();

Chạy Code

Nhưng khi ES6 ra đời thì nó đã hỗ trợ chúng ta khai báo default paramter. Và với việc này thì chúng ta hoàn toàn có thể handle được lỗi ở ví dụ trên.

VD: Handle paramter is required.

function required() {
    throw new Error("Parameter is required!");
}

function Say(message = required()) {
    console.log(message);
}

Say(); // Uncaught Error: Parameter is required!

Say('Hello'); // Hello

Chạy Code

8, Code ngắn gọn hơn.

Mình sẽ demo phần này đơn giản như sau:

VD1:

// Trước es 6
function Say(message) {
        console.log(message);
}

// ES6

var say = message => console.log(message)

Chạy Code

VD2: Xử lý mảng nhanh chóng.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Js Debug</title>
</head>

<body>
    <p>Mở console để xem kết quả</p>
</body>
<script>
    // Tính min của mảng
    var min = arr => Math.min(...arr);

    // Max
    var max = arr => Math.max(...arr);

    // Sum
    var sum = arr => arr.reduce((a, b) => a + b, 0);

    // Test

    min([1, 2, 3, 4, 5]); // 1
    max([1, 2, 3, 4, 5]); // 5
    sum([1, 2, 3, 4, 5]); // 15
</script>

</html>

Chạy Code