Destructuring

Destructuring là một tính năng nổi bật trong ES6, giúp bóc tách các giá trị từ mảng hoặc đối tượng và gán các giá trị đó vào các biến riêng biệt.

Destructuring được áp dụng cho Array và Object.

Phần dưới đây mình sẽ giả sử một bài toán đơn giản để anh em có thể nắm rõ được cách hoạt động của Destructuring trong Array và Object.

1. Destructuring Array

Bài toán: Lấy giá trị Họ, Đệm, Tên từ mảng dưới đây

var fullname = "Phạm Nhật Vượng";
nameArr = fullname.split(" "); // ["Phạm", "Nhật", "Vượng"]

1.1. Cách truyền thống

var firstName = nameArr[0];
var middleName = nameArr[1];
var lastName = nameArr[2];
console.log(firstName, middleName, lastName); // Phạm Nhật Vượng

1.2. Cách Destructuring

var [firstName, middleName, lastName] = nameArr;
console.log(firstName, middleName, lastName); // Phạm Nhật Vượng

// Chỉ lấy Tên
var [ , , lastName] = nameArr;
console.log(lastName); // Vượng

1.2.1. Default param

var [firstName = "Nguyễn", middleName, lastName, otherParam = "VinGroup"] = nameArr;
console.log(firstName, lastName, otherParam); // Phạm Vượng VinGroup

1.2.2. Rest

var [firstName, ...rest] = nameArr;
console.log(firstName, rest); // Phạm, ['Nhật', 'Vượng']

1.2.3. Default param + Rest

var [firstName = "Phạm", ...rest] = nameArr;
console.log(firstName, rest); // Phạm, ['Nhật', 'Vượng']

1.2.4. Tạo object

var user = {};
[user.firstName, user.middleName, user.lastName] = nameArr;
console.log(user); // {firstName: 'Phạm', middleName: 'Nhật', lastName: 'Vượng'}

1.2.5. Viết hàm

function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return [add, subtract, multiply, divide];
}

const [add, , , divide] = calculate(2, 8);
console.log(add, divide); // 10 0.25

2. Destructuring Object

Bài toán: Lấy giá trị Họ, Đệm, Tên từ đối tượng dưới đây

var user = {
  firstName: "Phạm",
  middleName: "Nhật",
  lastName: "Vượng"
};

2.1. Cách truyền thống

var firstName = user.firstName;
var middleName = user.middleName;
var lastName = user.lastName;
console.log(firstName, middleName, lastName); // Phạm Nhật Vượng

2.2. Cách áp dụng Destructuring

var {firstName, lastName} = user;
console.log(firstName, lastName); // Phạm Vượng

2.2.1. Default param

var {firstName = "Nguyễn", lastName, otherParam = "VinGroup"} = user;
console.log(firstName, lastName, otherParam); // Phạm Vượng VinGroup

2.2.2. Rename

var {firstName: Fname, lastName: Lname} = user;
console.log(Fname, Lname); // Phạm Vượng

2.2.3. Rest

var {middleName, ...rest} = user;
console.log(middleName, rest); // Nhật, {firstName: 'Phạm', lastName: 'Vượng'}

2.2.4. Default param + Rename + Rest

var {firstName: Fname = "Phạm", ...rest} = user;
console.log(Fname, rest); // Phạm, {middleName: 'Nhật', lastName: 'Vượng'}

2.2.5. Viết hàm

function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return {add, subtract, multiply, divide};
}

const {add, divide} = calculate(2, 8);
console.log(add, divide); // 10 0.25

2.2.6. Nâng cấp kỹ thuật tạo Tham số trong Hàm JS

Anh em có thể áp dụng Destructuring Object để nâng cấp kỹ thuật tạo tham số cho hàm JS. Mình đã có một bài viết chi tiết cho chủ đề này. Anh em click ngay để tham khảo nhé.

3. Kết hợp Destructuring Array và Object

// Nested destructuring
var options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["red", "blue"],
  extra: true
};

// destructuring assignment split in multiple lines for clarity
var {
  size: {
    width,
    height
  },
  items: [item1, item2],
  title = "Menu"
} = options;

console.log(width, height, item1, item2); // 100 200 'red' 'blue'

Kết

1. Destructuring Array. var [firstName = "Phạm", ...rest] = nameArr;
2. Destructuring Object. var {firstName: Fname = "Phạm", ...rest} = user

Rất cảm ơn anh em đã đọc tới đây ạ 😘

Nguồn tham khảo

1. https://www.w3schools.com/react/react_es6_destructuring.asp
2. https://javascript.info/destructuring-assignment