Cách sử dụng phép gán cấu trúc hủy trong JavaScript

JavaScript cung cấp cho bạn khả năng tái cấu trúc các đối tượng và gán các đơn vị riêng lẻ trong một lần thực hiện. Điều này cho phép bạn đi đến điểm bạn muốn làm và giữ mọi thứ sạch sẽ.

Tóm lại, cấu trúc hủy nghĩa là extract các giá trị của các đối tượng hoặc mảng thành các biến. Ở cuối hướng dẫn này, bạn sẽ thấy cách sử dụng nó và những gì nó có thể thay thế cho bạn.

Hủy cấu trúc mảng

Trước khi phát triển các phép gán hủy cấu trúc, nếu bạn có một mảng và muốn gán một số giá trị của nó cho các biến, bạn sẽ làm như sau:

let johnDoe = ["John", "Doe", "Iskolo"]
let firstName = johnDoe[0]
let lastName = johnDoe[1]
let title = johnDoe[2]

console.log(firstName, lastName, title) // John Doe Iskolo

Bạn có thể nhận được kết quả tương tự bằng cách cấu trúc lại mảng, như sau:

let johnDoe = ["John", "Doe", "Iskolo"]
let [firstName, lastName, title] = johnDoe
console.log(firstName, lastName, title) // John Doe Iskolo

Phương pháp này cho phép bạn chọn bất kỳ số phần tử nào bạn muốn:

let johnDoe = ["John", "Doe", "Iskolo"]
let [firstName, lastName] = johnDoe
console.log(firstName, lastName) // John Doe

Hoặc là:

let johnDoe = ["John", "Doe", "Iskolo"]
let [, lastName, title] = johnDoe
console.log(lastName, title) // Doe Iskolo

Bạn cũng có thể làm điều này với các chuỗi:

let [firstName, ,title] = "John Doe Iskolo".split(" ")
console.log(firstName, title) // John Iskolo

Ta có thể ném vào toán tử còn lại ( ... ) để thu thập phần còn lại của các đối số:

let [firstName, ...others] = "John Doe Iskolo".split(" ")
console.log(firstName, others) // John Iskolo

Và ta thậm chí có thể đưa các đối tượng vào đây:

let johnDone = {}
[johnDoe.first, johnDoe.last] = "John Doe Iskolo".split(" ")
console.log(johnDoe.first, johnDoe.last) // John Doe

Trong vòng lặp qua các đối tượng

Ta có thể sử dụng phép gán hủy cấu trúc để lặp qua biến cặp key-value như một đối tượng hoặc bản đồ:

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}
Object.keys(obj).forEach(key => {
  console.log(`${key} : ${obj[key]}`)
})

Ta có thể quay theo cách khác như thế này:

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}
for(let [key, value] of Object.entries(obj)) {
  console.log(`${key} : ${value}`)
}

Nó có thể giống điều tương tự với bạn, nhưng không phải vậy. Khi sử dụng forEach ở trên, ta kéo các khóa của đối tượng vào một mảng, sau đó lặp qua dãy khóa đó ngay bây giờ và sử dụng các khóa đó để chọn ra giá trị của các đối tượng.

Trong phần thứ hai, ta chỉ cần đi thẳng và lặp qua từng mục nhập đối tượng và extract các khóa và giá trị.

Gán giá trị mặc định
Ta có thể gán các giá trị mặc định, chỉ trong trường hợp biến mà ta muốn hủy cấu trúc trống:

let [firstName = "John", ,title = "Fire"] = "John Doe".split(" ")
console.log(firstName, title) // John Fire

Đối tượng phá hủy

Giống như ta đã làm với mảng, ta cũng có thể hủy cấu trúc các đối tượng. Nếu bạn đã từng sử dụng React, bạn có thể đã thấy điều này được sử dụng khi nhập một module .

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}

let {firstName, lastName) = obj
console.log(firstName, lastName) // John Doe

Khi cấu trúc các đối tượng, ta sử dụng các keys làm tên biến. Đây là cách JavaScript biết thuộc tính nào của đối tượng bạn muốn gán. Không giống như các mảng mà bạn sử dụng index / vị trí của chúng trong bài tập, ở đây bạn sử dụng các khóa.

Cấu trúc hủy này hoạt động trên bất kỳ loại đối tượng nào. Nếu đối tượng của bạn có các giá trị lồng nhau, bạn vẫn có thể hủy cấu trúc đó và extract các giá trị thành các biến.

let obj = {
  name : "John Doe",
  address : {
    city : "Omsk",
    country : "Russia"
  }
}
let {city, country} = obj.address
console.log(city, country) // Omsk Russia

Sử dụng nó để vượt qua các đối số của hàm

Bạn có thể đã thấy các hàm trông như thế này:

function sumFunc(a = true, b = "", c = "", d = 0, e = false) {
  console.log(a,b,c,d,e)
}
// Call the function
sumFunc(true, "", "", "", true)
// Or if we want to preserve default values
sumFunc(true, undefined, undefined, undefined, true)

Điều này trông không tốt cho lắm. Nó sẽ trở nên tồi tệ hơn nếu bạn đang cố gắng thực hiện một chức năng như tạo biểu đồ và bạn cần nhiều đối số để tạo cuộc trò chuyện.

Trong tình huống như thế này, cấu trúc hủy có thể hữu ích:

function sumFunc({a = true, b = "", c = "", d = 0, e = false}) {
  console.log(a,b,c,d,e)
}
let args = {a : false, e: true}
// Call the function
sumFunc(args)

Bằng cách chuyển các đối số hàm dưới dạng một đối tượng, chúng sẽ được tự động giải quyết thành các đối số độc lập. Bây giờ, ta chuyển một đối tượng có các cặp key-value phù hợp và hàm sẽ hoạt động tốt.

Kết luận

Hủy cấu trúc là một hoạt động bạn có thể thực hiện mà không cần, tuy nhiên, bạn đã có thể thấy cách nó khiến bạn trở thành nhà phát triển tốt hơn. Mã rõ ràng hơn, ít lặp lại hơn và nhiều cấu trúc hơn những gì bạn có.

Sử dụng cấu trúc hủy ngay hôm nay và cải thiện mã của bạn.

Tags:

Các tin liên quan

Cách gói một gói JavaScript Vanilla để sử dụng trong React
2019-12-12
Cách phát triển một trình tải lên tệp tương tác với JavaScript và Canvas
2019-12-12
Cách sử dụng map (), filter () và Reduce () trong JavaScript
2019-12-12
Giải thích về lập trình chức năng JavaScript: Ứng dụng một phần và làm xoăn
2019-12-12
Giới thiệu về Closures và Currying trong JavaScript
2019-12-12
Bắt đầu với các hàm mũi tên ES6 trong JavaScript
2019-12-12
Cách đếm số nguyên âm trong một chuỗi văn bản bằng thuật toán JavaScript
2019-12-12
Giải thích về lập trình chức năng JavaScript: Kết hợp & truyền tải
2019-12-12
Cách sử dụng .every () và .some () để điều khiển mảng JavaScript
2019-12-12
Chuyển đổi Mảng sang Chuỗi trong JavaScript
2019-12-05