THÔNG DỤNG
OOP
ES6
ES(X)
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

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

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

 

$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

 

Bài viết này được đăng tại [free tuts .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:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

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

Top