Cấu trúc JavaScript

Hướng dẫn tìm hiểu về phép gán trang cấu trúc javascript bằng cách đọc hiểu qua xem ví dụ đơn giản

Cấu trúc JavaScript

Phép gán cấu trúc được giới thiệu trong ES6 giúp bạn dễ dàng gán các giá trị mảng và thuộc tính đối tượng cho các biến riêng biệt.

Ví dụ,trước ES6:

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

Từ ES6:

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
let { name, age, gender } = person;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

Lưu ý : Thứ tự của tên không quan trọng trong cấu trúc đối tượng.

Ví dụ, bạn có thể viết chương trình trên dưới dạng:

let { age, gender, name } = person;
console.log(name); // Sara

Lưu ý : Khi cấu trúc các đối tượng, bạn nên sử dụng cùng một tên cho biến làm khóa đối tượng tương ứng.

Ví dụ,

let {name1, age, gender} = person;
console.log(name1); // undefined

Nếu bạn muốn gán các tên biến khác nhau cho khóa đối tượng, bạn có thể sử dụng:

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
// using different variable names
let { name: name1, age: age1, gender:gender1 } = person;

console.log(name1); // Sara
console.log(age1); // 25
console.log(gender1); // female

Cấu trúc mảng

Bạn cũng có thể thực hiện tái cấu trúc mảng theo cách tương tự. Ví dụ,

const arrValue = ['one', 'two', 'three'];

// destructuring assignment in arrays
const [x, y, z] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

Chỉ định các giá trị mặc định

Bạn có thể gán các giá trị mặc định cho các biến trong khi sử dụng cấu trúc hủy. Ví dụ,

let arrValue = [10];

// assigning default value 5 and 7
let [x = 5,  y = 7] = arrValue;

console.log(x); // 10
console.log(y); // 7

Trong chương trình trên, arrValue chỉ có một phần tử. Kể từ đây,

Biến x được gán giá trị = 10
biến y nhận giá trị mặc định 7

Trong cấu trúc đối tượng, bạn có thể chuyển các giá trị mặc định theo cách tương tự. Ví dụ,

const person = {
    name: 'Jack',
}

// assign default value 26 to age if undefined
const { name, age = 26} = person;

console.log(name); // Jack
console.log(age); // 26

Hoán đổi các biến

Trong ví dụ này, hai biến được hoán đổi bằng cách sử dụng cú pháp gán hủy cấu trúc.

// program to swap variables

let x = 4;
let y = 7;

// swapping variables

= [y, x]; console.log(x); // 7 console.log(y); // 4

Bỏ qua các mục

Bạn có thể bỏ qua các mục không mong muốn trong một mảng mà không cần gán chúng cho các biến cục bộ. Ví dụ,

const arrValue = ['one', 'two', 'three'];

// destructuring assignment in arrays
const [x, , z] = arrValue;

console.log(x); // one
console.log(z); // three

Trong chương trình trên, phần tử thứ hai được bỏ qua bằng cách sử dụng dấu phân cách bằng dấu phẩy ,.

Gán các phần tử còn lại cho một biến đơn

Bạn có thể gán các phần tử còn lại của mảng cho một biến bằng cách sử dụng cú pháp lây lan .... Ví dụ,

const arrValue = ['one', 'two', 'three', 'four'];

// destructuring assignment in arrays
// assigning remaining elements to y
const [x, ...y] = arrValue;

console.log(x); // one
console.log(y); // ["two", "three", "four"]

Ở đây, oneđược gán cho biến x . Và phần còn lại của các phần tử mảng được gán cho biến y .

Bạn cũng có thể gán phần còn lại của các thuộc tính đối tượng cho một biến duy nhất. Ví dụ,

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
// assigning remaining properties to rest
let { name, ...rest } = person;

console.log(name); // Sara
console.log(rest); // {age: 25, gender: "female"}

Lưu ý : Biến có cú pháp spread không được có dấu phẩy ở cuối ,. Bạn nên sử dụng phần tử còn lại này (biến có cú pháp lây lan) làm biến cuối cùng.

Ví dụ,

const arrValue = ['one', 'two', 'three', 'four'];

// throws an error
const [ ...x, y] = arrValue;

console.log(x); // eror

Chuyển nhượng cơ cấu phá hủy lồng nhau

Bạn có thể thực hiện cấu trúc hủy lồng nhau cho các phần tử mảng. Ví dụ,

// nested array elements
const arrValue = ['one', ['two', 'three']];

// nested destructuring assignment in arrays
const [x, [y, z]] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

Ở đây, biến y và z được gán các phần tử lồng nhau twovà three.

Để thực hiện phép gán cấu trúc hủy lồng nhau, bạn phải bao bọc các biến trong một cấu trúc mảng (bằng cách đặt bên trong []).

Bạn cũng có thể thực hiện tái cấu trúc lồng nhau cho các thuộc tính đối tượng. Ví dụ,

const person = {
    name: 'Jack',
    age: 26,
    hobbies: {
        read: true,
        playGame: true
    }
}
// nested destructuring 
const {name, hobbies: {read, playGame}} = person;

console.log(name); // Jack
console.log(read); // true
console.log(playGame); // true

Để thực hiện phép gán cấu trúc hủy lồng nhau cho các đối tượng, bạn phải bao bọc các biến trong một cấu trúc đối tượng (bằng cách đặt bên trong {}).

Lưu ý : Tính năng phân công cấu trúc đã được giới thiệu trong ES6 . Một số trình duyệt có thể không hỗ trợ việc sử dụng phép gán hủy cấu trúc. Hãy truy cập hỗ trợ Javacfscript Dest Structure để tìm hiểu thêm.

Cấu trúc JavaScript