THÔNG DỤNG
OOP
ES6
ES(X)
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Destructuring Assignments trong ES6

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:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

 

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

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

echo $main; // kết quả freetuts.net
echo $sub; // kết quả qa.freetuts.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:

su dung mang destructuring ES6 1 png

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:

su dung mang destructuring ES6 2 png

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ả:

su dung mang destructuring ES6 3 png

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ả:

su dung mang destructuring ES6 4 png

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ả:

su dung mang destructuring ES6 8 png

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 = ['freetuts.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.

su dung mang destructuring ES6 5 png

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 = ['freetuts.net'];

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

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

 

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

su dung mang destructuring ES6 6 png

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 [
        'freetuts.net',
        'qa.freetuts/net'
    ];
};

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

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

 

Kết quả:

su dung mang destructuring ES6 7 png

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.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top