Gán hủy cấu trúc là một dạng cú pháp đặc biệt cho phép chúng ta hủy cấu trúc các thuộc tính của đối tượng hoặc giá trị mảng và sau đó gán chúng cho các biến khác nhau.
Sau đây là mã cho phép gán cấu trúc trong JavaScript -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.result {
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>De-structuring assignment in JavaScript</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to destructure the array and object above</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
let arr = [2, 3, 4, 5];
let obj = {
firstName: "Rohan",
lastName: "Sharma",
};
sampleEle.innerHTML = "arr = " + arr + "<br>";
sampleEle.innerHTML += "obj = {firstName:'Rohan',lastName:'Sharma'}";
let a, b;
[a, b] = arr;
let { firstName, lastName } = obj;
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML = `a=${a} b=${b} <br>`;
resultEle.innerHTML += `firstName=${firstName} lastName=${lastName}`;
});
</script>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
Khi nhấp vào nút 'BẤM VÀO ĐÂY' -
