Destructuring Assignment trong ES6

Bài này chúng ta sẽ tìm hiểu về các kiểu so khớp, chuyển đổi mảng, object mới được hỗ trợ trong ES6.

1, Array Matching.

Trong ES6 đã hỗ trợ chúng ta pass data từ mảng ra biến một cách rất nhanh chóng và tiện lợi.

VD:

var list = [1,2,3];
var [a, b] = list;
console.log("a = " + a, "b = " + b);

Chạy Code

Không những thế, bây giờ chúng ta còn có thể đổi vị trí của các phần tử bằng cú pháp rất ngắn ngọn và đơn giản như sau:

VD:

var list = [1,2,3];
var [a, b] = list;
console.log("a = " + a, "b = " + b);
//đổi vị trí
[b, a] = [a, b];
console.log("a = " + a, "b = " + b);

Chạy Code

2, Object Matching, Shorthand Notation.

Và với Object chúng ta cũng làm tương tự như với mảng được.

VD: Matching Object.

var getObject = () => {
    return {
        name : "Vũ Thanh Tài",
        age : 22,
        hometown: "Nam Định"
    };
}
var {name, age, hometown} = getObject();
console.log("name: " + name,
             "age: " + age,
             "hometown: " + hometown);

Chạy Code

3, Object Matching, Deep Matching.

-Nếu như trong trường hợp object của bạn chứa 1 object con nữa thì bạn cũng có thể matching data như sau:

VD:

var getObject = () => {
    return {
        name : "Vũ Thanh Tài",
        option: {
            age : 22,
            hometown: "Nam Định",
        }
    };
}
var {name, option: { age, hometown } } = getObject();
console.log("name: " + name,
           "age: " + age,
           "hometown: " + hometown);

Chạy Code

4, Object And Array Matching, Default Values.

Và nếu như trong trường hợp bạn không biết chính xác số lượng phần tử có trong mảng hay object để matching thì trong ES6 cũng hỗ trợ bạn thiết lập giá trị mặc định cho nó như sau:

VD: Đối với mảng.

var num = [1];
var [a = "Default", b = "Default"] = num;
console.log(a, b);
// a = 1
// b = Default

Chạy Code

VD: Đối với object.

var student = { name: "Vũ Thanh Tài"};
var {name = "Not Set", age = "Not Set"} = student;
console.log(name, age);
// name = Vũ Thanh Tài
// age = Not Set

Chạy Code

5, Parameter Context Matching.

Tương tự bạn cũng có thể áp dụng nó vào việc truyền tham số cho hàm, như sau:

VD: Đối với mảng.

function logArray ([a, b]) {
    console.log(a, b);
}
logArray(["Tham Số A -", "- Tham số B"]);
//Tham Số A - - Tham số B

Chạy Code

VD: Đối với object.

function logObject ({a, b}) {
    console.log(a, b);
}
logObject({a: "Tham Số A -", b: "- Tham số B"});
//Tham Số A - - Tham số B

Chạy Code

6, Lời kết.

Như vậy phần này chúng ta đã được tìm hiểu về Matching data trong ES6 rồi, đây là 1 điều khá hay mà các ngôn ngữ khác chưa có (PHP 7 mới có, Python 3 cũng mới update).