May - 2019

13 Sử Dụng Destructuring Assignment Trong Javascript

Giới thiệu

Trong bài viết này, mình xin chia sẻ về Destructuring Assignment – một cú pháp Es6cực kỳ hữu dụng của Javascript mà mình gần như dùng nó hàng ngày, mỗi khi làm việc với JS.
Theo định nghĩa chính thức trên MDN, “Destructuring Assignment là một biểu thức Javascript cho phép lấy giá trị (value) từ bên trong (array) hay thuộc tính (properties)trong object và gán cho các biến (variable) mới”.
Trong quá trình phát triển ứng dụng JS, ta rất ít khi chỉ làm việc với một hay hai kiểu dữ liệu đơn thuần như Number, String,… mà thường xuyên phải làm việc với nhiều kiểu dữ liệu, đặc biệt là với những kiểu dữ liệu ” tổng hợp ” như Object hay Array (trong JSthì array cũng là một Object). Destructuring Assignment giúp chúng ta tương tác với Object một cách khoa học và ngắn gọn hơn nhiều so với cú pháp Es5 hoặc cũ hơn, giúp code dễ đọc cũng như tăng tốc độ phát triển, maintain.

Sử dụng

Trong phần này mình sẽ chỉ ra các trường hợp điển hình ứng dụng Destructuring Assignment khi làm việc với JS.

Sử dụng Destructuring Assignment để lấy giá trị từ Object

Trong trường hợp ta nhận được một Object và muốn “bóc tách” thành các giá trị riêng biệt, ví dụ

var person = {

age: 24,

job: 'dev'

}

var name = person.name // name = 'Viet'

var age = person.age // age = 24

var job = person.job // job = 'dev'

Sử dụng Destructuring Assignment:

var person = {

age: 24,

job: 'dev'

}

var { name, age, job } = person // name = 'Viet', age = 24, job='dev'

Hai đoạn code trên sẽ cho kết quả tương tự nhau, rõ ràng việc sử dụng Destructuring Assignment là ngắn gọn hơn, và nếu chúng ta muốn sử dụng tên biến khác với tên của thuộc tính bên trong Object, chẳng hạn:

var userName = person.name // name = 'Viet'

var userAge = person.age // age = 24

var userJob = person.job // job = 'dev'

Với Destructuring Assignment:

var { name: userName, age: userAge, job: userJob } = person // name = 'Viet', age = 24, job='dev'

Đối với trường hợp cần lấy giá trị từ một object bên trong một object, ta sử dụng như sau:

var person = {

info: {

age: 24,

job: 'dev'

}

var { info: { name, age, job } } = person // name = 'Viet', age = 24, job='dev'

Lưu ý rằng Destructuring Assignment không giới hạn số lượng lớp object bao trùm lên nhau.

Sử dụng Destructuring Assignment để tách giá trị từ Array

Giống với Object, Destructuring Assignment giúp việc ” bóc tách ” giá trị từ một Arraytrở nên dễ dàng hơn

var arr = [1, 2, 3, 4, 5]

var first = arr[0] // first = 1

var second = arr[1] // second = 2

Sử dụng Destructuring Assignment:

var arr = [1, 2, 3, 4, 5]

var [ first, second ] = arr // first = 1, second = 2

Cần lưu ý là Destructuring Assignment cho phép ra lấy ra một giá trị đúng theo indexbên trong Array và dựa vào dấu ‘,’ để phân biệt index, ví dụ nếu muốn lấy giá trị thứ nhất và thứ tư trong mảng:

var arr = [1, 2, 3, 4, 5]

var [ first,,, fourth ] = arr // first = 1, fourth = 4

Đồng thời ta cũng có thể sử dụng Destructuring Assignment đối với Array bên trong Array như sau

var arr = [1, 2, [3, 4]]

var [a, b, [c, d]] = arr // a = 1, b = 2, c = 3, d = 4

Phức tạp hơn một xíu, nếu kết hợp Destructuring Assignment giữa Object và Arraysẽ như sau
Array bên trong Object:

var ob = { arr: [1, 2] }

var { arr: [a, b] } = ob // a = 1, b =

Object bên trong Array:

var arr = [10, { name: 'Viet', age: 24 }]

var [, { name, age }] = arr // name = 'Viet', age = 24

Để tránh nhần lẫn thì chỉ cần chú ý là đối với Object ta luôn dựa vào Properties và Index đối với Array.

Sử dụng Destructuring Assignment để truyền tham số vào Function

Khi function nhận object làm tham số, chẳng hạn:

var printUserInfo = function(person) {

var { name, age, jon } = person

console.log('UserName: ', name)

}

Destructuring Assignment cho phép ra rút ngắn đoạn code trên, trở thành:

var printUserInfo = function({ name, age, jon }) {

console.log('UserName: ', name)

}

Tương tự với Array:

var sum = function([a, b]) {

return a + b

}

sum([1, 2]) // 3

Tổng kết

Trong bài viết này mình đã chia sẻ chi tiết về cú pháp Es6 Destructuring Assignmenttrong Javascript, khái niệm cũng như các trường hợp thường được ứng dụng, hi vọng bài viết hữu ích với bạn đọc.

Nguồn: Sưu tầm từ internet via Devmaster Academy

Các bài viết cùng chủ đề

BÍ QUYẾT HỌC LẬP TRÌNH CHO CÁC BẠN ĐẦU NĂM HỌC MỚI...

5 Phương pháp hay để mở rộng các dự án React của b...

Lab06.1 - Data Access In ASPNET MVC 5

Lab05 - Data Validation and Annotation In ASPNET M...

Lab 04 - Model in ASP.NET MVC 5 - Phần tự thực hàn...

Lab 04 - Model in ASP.NET MVC 5 - Bài 4.2

Các khóa đào tạo chuyên đề

	Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
	Lập trình ứng dụng trên nền tảng android
	Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
	Lập trình ứng dụng với WINDOWS FORM
	Lập trình ứng dụng với JAVA (FORM)
	Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
	Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
	Lập trình frontend với reacjs (Full)