Cách sử dụng Destructuring trong Javascript ES6

Destructuring là chức năng mới trong ES6 của Javascript. Giúp extract dữ liệu (có thể lồng nhau) từ Array hoặc Object.

1. Object destructuring

const obj = { first: 'Jane', last: 'Doe' }
const { first: f, last: l } = obj
// f = 'Jane'; l = 'Doe'

// {prop} is short for {prop: prop}
const { first, last } = obj
// first = 'Jane'; last = 'Doe'

2. Array destructuring

Destructuring giá trị từ mảng

const iterable = ['a', 'b']
const [x, y] = iterable
// x = 'a'; y = 'b'

Destructuring cũng giúp xử lý giá trị được trả về

const [all, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec('2999-12-31')

3. Khi nào cần sử dụng destructuring

Cơ bản, destructuring có thể được sử dụng ở 1 số trường hợp sau:

// Khai báo giá trị
const [x] = ['a'];
let [x] = ['a'];
var [x] = ['a'];

// Gán giá trị
[x] = ['a'];

// Định nghĩa các tham số
function f([x]) { ··· }
f(['a']);

Sử dụng với vòng lặp for-of

const arr1 = ['a', 'b']
for (const [index, element] of arr1.entries()) {
  console.log(index, element)
}
// Output:
// 0 a
// 1 b

const arr2 = [
  { name: 'Duyệt', age: 21 },
  { name: 'Hoa', age: 19 },
]
for (const { name, age } of arr2) {
  console.log(name, age)
}
// Output:
// Duyệt 21
// Hoa 19

4. Các Patterns

Một số patterns sử dụng sâu hơn chức năng này:

4.1 Pick what you need

Chỉ bóc tách lấy giá trị trong Object mà bạn cần

const { x: x } = { x: 7, y: 3 } // x = 7

// Array
const [x, y] = ['a', 'b', 'c'] // x='a'; y='b';

// Hoặc khó hơn, và "sâu" hơn như thế này
const obj = { a: [{ foo: 123, bar: 'abc' }, {}], b: true }
const {
  a: [{ foo: f }],
} = obj // f = 123

4.2 Object patterns coerce values to objects

Pattern này ép giá trị nguồn (bên phải) thành object trước, khó để giải thích cái này, bạn xem ví dụ bên dưới

const { length: len } = 'abc' // len = 3
const { toString: s } = 123 // s = Number.prototype.toString

4.3 Array patterns work with iterables

// Strings are iterable:
const [x, ...y] = 'abc' // x='a'; y=['b', 'c']

4.4 Sử dụng với Generator function (yield)

function* allNaturalNumbers() {
  for (let n = 0; ; n++) {
    yield n
  }
}

const [x, y, z] = allNaturalNumbers() // x=0; y=1; z=2

4.5 Default values

const [x = 3, y] = [] // x = 3; y = undefined
const { foo: x = 3, bar: y } = {} // x = 3; y = undefined
const [x = 1] = [undefined] // x = 1
const { prop: y = 2 } = { prop: undefined } // y = 2

const [x = 3, y = x] = [] // x=3; y=3
const [x = 3, y = x] = [7] // x=7; y=7
const [x = 3, y = x] = [7, 2] // x=7; y=2

// Khó hơn
const [{ prop: x } = {}] = []

4.6 Khuyết tham số

const [, , x, y] = ['a', 'b', 'c', 'd'] // x = 'c'; y = 'd'

4.7. Load module Node.js

const { Loader, main } = require('toolkit/loader')

5. Tham khảo

• http://exploringjs.com/es6/ch_destructuring.html
• https://gist.github.com/mikaelbr/9900818