Sử dụng Destructuring trong ES6

Hi mọi người ES6 cung cấp một tính năng mới gọi là destructuring assignment, nó có nhiệm vụ tái cấu trúc lại các thuộc tính của một object hoặc một mảng. Các bạn hãy xem các ví dụ bên dưới để hiểu hơn nhé: Sử dụng destructuring với array Giả sử chúng ta có hàm

Hi mọi người
ES6 cung cấp một tính năng mới gọi là destructuring assignment, nó có nhiệm vụ tái cấu trúc lại các thuộc tính của một object hoặc một mảng.
Các bạn hãy xem các ví dụ bên dưới để hiểu hơn nhé:

Sử dụng destructuring với array

Giả sử chúng ta có hàm như bên dưới

functiongetScores(){return[70,80,90];}

Tiếp theo gọi hàm getScores() và gán giá trị trả về của hàm vào một biến:

let scores =getScores();

Cuối cùng lấy giá trị điểm của mỗi thành phần trong mảng bằng code bên dưới.

let x = scores[0], 
    y = scores[1], 
    z = scores[2];

Output:

708090

Như các bạn thấy trước đây khi chưa có ES6 chúng ta thường sẽ sử dụng đoạn code trên để truy cập vào từng phần tử của mảng.
Tuy nhiên, từ khi có ES6 bạn có thể sử dụng destructuring assignment để lấy giá trị của từng phần tử trong mảng như code bên dưới.

let[x, y, z]=getScores();

console.log(x);// 70
console.log(y);// 80
console.log(z);// 90

Biến x, y, z sẽ lấy các giá trị tương ứng thành phần đầu tiền, thứ hai, thứ ba của mảng trả về.
Nếu hàm getScores () trả về một mảng gồm hai phần tử, thì biến thứ ba sẽ không được xác định, ví dụ:

functiongetScores(){return[70,80];}let[x, y, z]=getScores();

console.log(x);// 70
console.log(y);// 80
console.log(z);// undefined

Trường hợp trên biến z là undefined thì bạn có thể gán giá trị mặc định cho biến z như code bên dưới.

let[x, y, z =100]=getScores();

console.log(x);// 70
console.log(y);// 80
console.log(z);// 100

Trong trường hợp hàm getScores () trả về một mảng có nhiều hơn ba phần tử, các phần tử còn lại sẽ bị loại bỏ. Ví dụ:

functiongetScores(){return[70,80,90,100];}let[x, y, z]=getScores();

console.log(x);// 70
console.log(y);// 80
console.log(z);// 90

Sử dụng destructuring với object

ví dụ:

let person ={
    firstName:'John',
    lastName:'Doe'};let{ firstName, lastName }= person;

console.log(firstName +'-'+ lastName);// John-Doe

Hoặc:

let person ={
    firstName:'John',
    lastName:'Doe'};let{ firstName: fname, lastName: lname }= person;

console.log(fname +'-'+ fname);

Trong ví dụ trên, các thuộc tính firstName và lastName được gán cho các biến fName và lName tương ứng.
Định danh trước dấu hai chấm ( : ) là thuộc tính của đối tượng và định danh sau dấu hai chấm là biến.

Sử dụng destructuring và Rest parammeter syntax

Chúng ta có thể lấy tất cả các phần tử còn lại của mảng và đặt chúng vào một mảng mới bằng cách sử dụng dấu 3 chấm (…) trong rest syntax.

let[x, y ,...args]=getScores();
console.log(x);// 70
console.log(y);// 80
console.log(args);// [90, 100]

Biến x, y sẽ nhận giá trị thứ nhất và thứ hai của mảng, còn biến args sẽ nhận tất cả các phần tử còn lại của mảng.

Nguồn: viblo.asia

Bài viết liên quan

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 2

viết lại nội dung này ” Phát hiện các cuộc tấn công Cross Site Scripting (XSS)

AI Chatbot 2025: Xu Hướng Tất Yếu Cho Doanh Nghiệp Dẫn Đầu

Giới thiệu AI chatbots đã trải qua một hành trình đáng kể, từ những công cụ t

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 1

Tấn công web là gì? Ứng dụng web là các ứng dụng cung cấp dịch vụ cho người

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp Trong kỷ nguyên s