JavaScript Destructuring: Cú pháp, Ứng dụng và Ví dụ

JavaScript Destructuring: Cú pháp, Ứng dụng và Ví dụ

thumnail

Tìm hiểu về JavaScript Destructuring và cách sử dụng cú pháp này để giải quyết các tình huống phức tạp trong lập trình. Bài viết cung cấp những ví dụ thực tế và ứng dụng của Destructuring trong việc trích xuất giá trị từ mảng, đối tượng, tham số hàm, và các cấu trúc dữ liệu phức tạp khác. Khám phá cách tận dụng tính linh hoạt của JavaScript Destructuring để cải thiện hiệu suất và sự đơn giản trong mã nguồn của bạn.

Javascript Destructuring

Destructuring assignment được giới thiệu trong ES6 giúp dễ dàng gán các giá trị mảng và thuộc tính của đố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ừ khi 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ác tên không quan trọng trong việc object destructuring.

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

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

Lưu ý: Khi destructuring objects, bạn nên sử dụng cùng một tên cho các biến làm key 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 các object key thì bạn có thể dùng như nhau:

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

Array Destructuring

Bạn cũng có thể thực hiện destructuring array tương tự với cách với object. 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

Assign Default Values

Bạn có thể gán các giá trị mặc định cho các biến khi sử dụng destructuring. 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 đoạn code trên, arrValue chỉ có một phần tử.

Kể từ đó,
  • Biến x sẽ là 10.
  • Biến y sẽ lấy giá trị mặc định là 7.

Trong quá trình object destructuring, bạn có thể truyền các giá trị mặc định theo các tương tự trên.

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

Swapping Variables

Trong ví dụ này, 2 biến được hoán đổi (swap) với nhau khi sử dụng cú pháp destructuring assignment.

// program to swap variables

let x = 4;
let y = 7;

// swapping variables
[x, y] = [y, x];

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

Skip Items

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 đoạn code ở trên, phận tử thứ 2 được bỏ qua bằng các sử dụng dấu phân các là dấu phẩy.

Assign Remaining Elements to a Single Variable

Bạn có thế gán những phần tử còn lại của một mảng cho một biến bằng cách sử dụng cú phấp spread "...". 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à các phần tử còn lại đượ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 của một object 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 ở sau. Bạn nên sử dụng phần tử còn lại này (biến có sử dụng cú pháp spread) 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

Nested Destructuring Assignment

Bạn có thể thực hiện nested destructuring 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 yz được gán nested với phần tử twothree.

Để thực hiện phép nested destructuring assignment, bạn phải đặt 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 nested destructuring cho thuộc tính của object. 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 nested destructuring cho các đối tượng, bạn phải đặt các biến trong một cấu trúc object (bằng cách đặt bên trong {}).

Lưu ý: Tính năng destructuring assignments được giới thiệu ở bản ES6. Một số trình duyệt có thể sẽ không hỗ trợ cú pháp này. Hãy ghé qua trang Javascript Destructuring support để tìm hiểu thêm.

Một số bài viết liên quan:

No comments:

Powered by Blogger.