Destructuring Assignments trong ES6 - Javascript nâng cao

Trong bài này chúng ta học một chức năng mới nữa trong ES6 đó là Destructured Assignment, chức năng này giống hàm list trong PHP vậy, nghia là nó sẽ phân các giá trị trong mảng vào các biến theo thứ tự được truyền vào.

Một ví dụ hàm list trong PHP:

$domain = array(
    'Zaidap.com.net',
    'qa.Zaidap.com.net'
);

// Gán hai phần tử vào hai biến $main và $sub
list($main, $sub) = $domain;

echo $main; // kết quả Zaidap.com.net
echo $sub; // kết quả qa.Zaidap.com.net

Như vậy rõ ràng Javascript ES6 đang dần bắt kịp các ngôn ngữ khác. Tuy nhiên cá nhân mình lại thấy cách sử dụng này đôi khi lại khó kiểm soát code, vì vậy bài viết này chỉ mang tính chất giới thiệu chứ không khuyên bạn nên sử dụng. Và rõ ràng là chúng ta cũng nên bắt kịp công nghệ phải không nào :) Biết đâu CS7 ra đời sẽ có một cuộc cách mạng Javascript vĩ đại thì sao.

1. Destructuring Assignments trong ES6

Destructuring Assignments đơn giản chỉ là cách tách các phần tử của Array hoặc Object thành nhiều biến chỉ bằng một đoạn code duy nhất.

Sử dụng mảng:

Bạn có thể sử dụng mảng để tách các phần tử thành các biến.

// Array
let date = [10, 03, 2016]

// Chuyển ba giá trị vào ba biến d, m, y
let [d, m, y] = date;

// In kết quả
console.log("Day: " + d);   // Day: 10
console.log("Month: " + m); // Month: 03
console.log("Year: " + y);  // Year : 2016

Chạy lên kết quả như sau:

Nếu bạn muốn lấy một phần tử thôi thì hãy bỏ trống các phần tử không muốn lấy.

// Array
let date = [10, 03, 2016]

// Chuyển ba giá trị vào ba biến y
let [, , y] = date;

// In kết quả
console.log("Year: " + y);

Chạy lên kết quả như sau:

Sử dụng object:

Ngoài mảng ra thì bạn có thể tách biến từ object.

// Object
let date = {
    day : 10,
    month : 06,
    year : 2016
}

// Chuyển ba giá trị vào ba biến
let {day : d, month : m, year : y} = date;

// In kết quả
console.log("Day: " + d);
console.log("Month: " + m);
console.log("Year: " + y);

Kết quả:

Với trường hợp này thì bạn có thể lấy một phần tử bất kì chứ không bắt buộc theo thứ tự như bên mảng.

// Object
let date = {
    day : 10,
    month : 06,
    year : 2016
}

// Chuyển ba giá trị vào ba biến y
let {
    year : y
} = date;

// In kết quả
console.log("Year: " + y);

Kết quả:

2. Một sô ví dụ nâng cao khác

Bây giờ ta sẽ thực hành một số ví dụ nâng cao khác.

Lấy giá trị theo key Object

Bạn có thể lấy giá trị dựa vào tên key của Object.

var person = {name : "Cường", email : "thehalfheart@gmail.com"};

var {name : cuong_name, email : cuong_email} = person;

console.log(cuong_name);    // Cường
console.log(cuong_email);   // thehalfheart@gmail.com

Kết quả:

Nhưng nếu bạn cố ý truy cập vào một key không tồn tại thì sẽ bị lỗi undefined.

var {foo:bar} = {baz: 'ouch'};

console.log(bar); // Undefined

Lỗi undefined:

Nếu phần tử không tồn tại thì sẽ bị undefined.

let domain = ['Zaidap.com.net'];

let [main, sub] = domain;

// Xem kết quả
console.log(main);
console.log(sub);

Kết quả do phần tử thứ hai không tồn tại nên biến sub sẽ có giá trị là undefined.

Giá trị mặc đinh:

Để tránh lỗi undefined thì bạn có thể gán giá trị mặc định cho nó.

let domain = ['Zaidap.com.net'];

let [main, sub = 'qa.Zaidap.com.net'] = domain;

// Xem kết quả
console.log(main);
console.log(sub);

Kết quả sẽ không bị lỗi undefined.

Sử dụng function:

Bạn có thể sử dụng function return về array hoặc object để gán vào thay vì gán một giá trị trực tiếp như vậy.

// Function
var domains = () => {
    return [
        'Zaidap.com.net',
        'qa.Zaidap.com/net'
    ];
};

// Chuyển đổi
let [main, sub] = domains();

// In kết quả
console.log(main);
console.log(sub);

Kết quả:

3. Lời kết

Như vậy là mình đã giới thiệu xong sơ lược về cách sử dụng Destructuring Assignments trong ES6, đây là một phần khá phức tạp và đòi hỏi sự tập trung thì bạn mới có thể hiểu bài được. Bài này kết thúc tại đây, bài tiếp theo chúng ta tìm hiểu về cách giá giá trị mặc định cho tham số trong function.