DANH MỤC: ECMAscript

Bài 9: 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);

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

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

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

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

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

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

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

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

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

The best way to learn is to share

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