Chào các bạn! Tuy javascript ES6 đã được giới thiệu cách đây khá lâu, nhưng mình cũng chưa thực sự hiểu và sử dụng thành thạo những tính năng được giới thiệu. Gần đây mình có tìm hiểu và sử dụng một tính năng mà mình cho khá hay và hữu ích khi chúng ta làm việc với array hoặc object literial, đó là Destructuring. Trong bài viết này mình sẽ giới thiệu về destructuring và những trường hợp cần sử dụng nó.
Destructuring
Destructuring là một tính năng dễ, đơn giản và mình hay sử dụng nhất. Một điều tuyệt với là tính năng này làm việc với cả array và object trong javascript.
1 2 3 4 5 6 7 8 | // Destructuring dùng với object literial var foo = { bar: 'pony', baz: 3 } var {bar, baz} = foo console.log(bar) // <- 'pony' console.log(baz) // <- 3 |
1 2 3 4 5 6 7 | // Destructuring dùng với array let [a, b] = [1, 2] console.log(a) // <- 1 console.log(b) // <- 2 |
Destructuring cho phép chúng ta lấy ra một property cụ thể một cách rất nhanh chóng.
1 2 3 4 5 6 7 | var foo = { bar: 'pony', baz: 3, fod: 'trump' } var {bar, baz} = foo console.log(bar) // <- 'pony' console.log(baz) // <- 3 |
Ngoài ra chúng ta cũng có thể đặt tên khác cho biến của chúng ta bằng cú pháp.
1 2 3 4 5 6 7 | var foo = { bar: 'pony', baz: 3, foo: 'trump' } var {bar: a, baz: b} = foo console.log(a) // <- 'pony' console.log(b) // <- 3 |
Chúng cũng có thể lấy các thuộc tính sâu bên trong một object và cũng có thể đặt tên cho các property sâu bên trong đó.
1 2 3 4 5 6 7 | var foo = { bar: { deep: 'pony', dangerouslySetInnerHTML: 'lol' } } var {bar: { deep, dangerouslySetInnerHTML: sure }} = foo console.log(deep) // <- 'pony' console.log(sure) // <- 'lol' |
Mặc định nếu property không tìm thấy trong object thì sẽ có giá trị undefined, giống như khi chúng ta cố gắng lấy giá trị của một property không có trong object.
1 2 3 4 | var {foo} = {bar: 'baz'} console.log(foo) // <- undefined |
Nếu chúng ta cố gắng lấy giá trị của một property sâu bên trong mà không tồn tại trong object thí một exception sẽ được throw.
1 2 3 | var {foo:{bar}} = {baz: 'ouch'} // <- Exception |
Một ứng dụng mình thấy thích nhất ở tính năng destructuring là hoán đổi giá trị giữa hai biến.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function es5 () { var left = 10 var right = 20 var aux if (right > left) { aux = right right = left left = aux } } function es6 () { var left = 10 var right = 20 if (right > left) { [left, right] = [right, left] } } |
Chúng ta cũng có thể dùng ‘computed property names’ trong destructuring.
1 2 3 4 5 | var key = 'such_dynamic' var { [key]: foo } = { such_dynamic: 'bar' } console.log(foo) // <- 'bar' |
Chúng ta cũng có thể chị định giá trị mặt định cho biến khi biến đó nhận giá tị undefined.
1 2 3 4 5 6 7 8 9 10 | var {foo=3} = { foo: 2 } console.log(foo) // <- 2 var {foo=3} = { foo: undefined } console.log(foo) // <- 3 var {foo=3} = { bar: 2 } console.log(foo) // <- 3 |
Như đã nói ở trên, destructuring cũng làm việc với array, lúc này chúng ta thay dấu { và } thành dấu [ và ].
1 2 3 4 | var [a] = [10] console.log(a) // <- 10 |
Các trường hợp sử dụng Destructuring
Sau đây là một số trường hợp mà destructuring sẽ hữu ích.
Khi một function trả về một object, sau đó bạn muốn gắn các propery trong object đó vào các biến riêng biệt, destructuring sẽ giúp bạn làm việc đó rất đơn giản
1 2 3 4 5 6 7 8 9 10 11 12 | function getCoords () { return { x: 10, y: 22 } } var {x, y} = getCoords() console.log(x) // <- 10 console.log(y) // <- 22 |
Sử dụng destructuring trong param của function
1 2 3 4 5 6 7 8 | function random ({ min=1, max=300 }) { return Math.floor(Math.random() * (max - min)) + min } console.log(random({})) // <- 174 console.log(random({max: 24})) // <- 18 |
1 2 3 4 5 6 | function random ({ min=1, max=300 } = {}) { return Math.floor(Math.random() * (max - min)) + min } console.log(random()) // <- 133 |
Trên đây mình đã giới thiệu về cú pháp, các trường hợp nên sử dụng destructuring. Mình mong là bài viết của mình sẽ giúp bạn hiểu hơn về destructuring và sử dụng tính năng này trong code của mình.