DANH MỤC: JAVASCRIPT BLOG

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

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

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

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

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);

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);

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]

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

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();

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

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)

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>

9, Kết.

Phía trên chỉ là phần nhỏ trong các tính năng mà ES6 hỗ trợ,  Các bạn có thể xem thêm tại đây.

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

Biển học vô biên, quay đầu là dại!

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia