Destructuring là một tính năng mới trong ES6, nó cho phép chúng ta khai báo biến ngắn gọn hơn dựa vào các property của một Object hay các phần tử của một Array.
Ta có một object person như sau:
const person = {
first:'Thau',
last:'Nguyen',
country:'Viet Nam',
city:'Ho Chi Minh',
twitter:'@thaung'
};
Với ES5, khai báo các biến first, last, city để lưu giá trị tương ứng first, last, city của person, chúng ta viết như sau:
const first = person.first, last = person.last, city = person.city;
Với Destructuring trong ES6 code trở nên ngắn ngọn như sau:
const { first, last, city} = person;
Hoặc có thể đổi tên biến first, last, city thành firstName, lastName, cityName:
const { first: firstName, last: lastName, city: cityName} = person;
Và có thể gán giá trị mặc định cho biến nếu giá trị tương ứng với property trong object đó không có. Ví dụ:
const { first: firstName, last: lastName, city: cityName, phone: phoneNumber = 090123456} = person;
Tương tự, anh em có thể dùng destructuring với Array:
const details = ['Thau Nguyen', 123, 'thaunguyen.com']; const [name, id, website] = details;
const data = 'Basketball,Sports,90210,23,wes,bos,cool';
const [itemName, category, sku, inventory] = data.split(',');
const team = ['Wes', 'Harry', 'Sarah', 'Keegan', 'Riker']; const [captain, assistant, ...players] = team;
Chúng ta cũng có thể swap hai biến không cần dùng biến tạm:
let inRing = 'Hulk Hogan'; let onSide = 'The Rock'; console.log(inRing, onSide); [inRing, onSide] = [onSide, inRing]; console.log(inRing, onSide);
Tạo các tham số của một function từ destructuring một object.
function moneyCalc({total = 100, tax = 0.1, bonus = 0}) {
return total + (tax * total) + bonus;
}
//không cần quan tâm thứ tự các biến truyền vào
const money = moneyCalc({bonus:100, tax:0.2, total:200 });
console.log(money);
hay quá a châu ơi