Chúng ta có thể gán mảng cho biến trong JavaScript không?

Nhiệm vụ phá hủy là một tính năng thú vị đi kèm với ES6. Phá hủy cấu trúc là một biểu thức JavaScript cho phép giải nén các giá trị từ mảng hoặc thuộc tính từ các đối tượng thành các biến riêng biệt. Tức là chúng ta có thể trích xuất dữ liệu từ mảng và đối tượng rồi gán cho biến

Tại sao điều này là cần thiết?

Hãy tưởng tượng chúng ta muốn trích xuất dữ liệu từ một mảng. Trước đây, điều này sẽ được thực hiện như thế nào?

let introduction = ["Hello", "I" , "am", "Sarah"];
let greeting = introduction[0];
let name = introduction[3];

console.log[greeting];//"Hello"
console.log[name];//"Sarah"

Ta có thể thấy khi muốn lấy dữ liệu từ một mảng thì phải làm đi làm lại nhiều lần.

Nhiệm vụ hủy cấu trúc ES6 giúp trích xuất dữ liệu này dễ dàng hơn. Làm thế nào là điều này như vậy? . Sau đó, chúng ta sẽ chuyển sang phá hủy đối tượng

Bắt đầu nào

Phá hủy mảng cơ bản

Nếu chúng ta muốn trích xuất dữ liệu từ mảng, nó khá đơn giản bằng cách sử dụng phép gán hủy

Hãy tham khảo ví dụ đầu tiên của chúng tôi về mảng. Thay vì trải qua quá trình lặp đi lặp lại đó, chúng tôi sẽ làm điều này

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

Chúng tôi cũng có thể làm điều này với kết quả tương tự

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

Khai báo biến trước khi gán

Các biến có thể được khai báo trước khi được gán như thế này

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

Lưu ý rằng các biến được đặt từ trái sang phải. Vì vậy, biến đầu tiên lấy phần tử đầu tiên trong mảng, biến thứ hai lấy phần tử thứ hai trong mảng, v.v.

Bỏ qua các mục trong một mảng

Điều gì sẽ xảy ra nếu chúng ta muốn lấy mục đầu tiên và mục cuối cùng trên mảng thay vì mục đầu tiên và mục thứ hai và chúng ta chỉ muốn gán hai biến? . Nhìn vào ví dụ dưới đây

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[name];//"Sarah"

Điều gì vừa xảy ra?

Nhìn mảng bên trái phép gán biến. Lưu ý rằng thay vì chỉ có một dấu phẩy, chúng ta có ba. Dấu phân cách dấu phẩy được sử dụng để bỏ qua các giá trị trong một mảng. Vì vậy, nếu bạn muốn bỏ qua một mục trong một mảng, chỉ cần sử dụng dấu phẩy

Hãy làm một cái khác. Hãy bỏ qua mục đầu tiên và mục thứ ba trong danh sách. Làm thế nào chúng ta sẽ làm điều này?

let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"];

console.log[pronoun];//"I"
console.log[name];//"Sarah"

Vì vậy, dấu phân cách dấu phẩy thực hiện phép thuật. Vì vậy, nếu chúng tôi muốn bỏ qua tất cả các mục, chúng tôi chỉ cần làm điều này

let [,,,,] = ["Hello", "I" , "am", "Sarah"];

Chỉ định phần còn lại của một mảng

Điều gì sẽ xảy ra nếu chúng ta muốn gán một số mảng cho các biến và phần còn lại của các mục trong mảng cho một biến cụ thể?

let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[intro];//["I", "am", "Sarah"]

Sử dụng mẫu này, bạn có thể giải nén và gán phần còn lại của một mảng cho một biến

Phân hủy cấu trúc với các chức năng

Chúng ta cũng có thể trích xuất dữ liệu từ một mảng được trả về từ một hàm. Giả sử chúng ta có một hàm trả về một mảng như ví dụ bên dưới

________số 8

Chúng tôi nhận được kết quả tương tự

Sử dụng giá trị mặc định

Các giá trị mặc định có thể được gán cho các biến chỉ trong trường hợp giá trị được trích xuất từ ​​​​mảng là

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

6

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

0

Vì vậy,

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

7 trở lại "Sarah" vì nó không được xác định trong mảng

Trao đổi các giá trị bằng cách sử dụng Bài tập hủy cấu trúc

Một điều nữa. Chúng ta có thể sử dụng phép gán hủy để hoán đổi giá trị của các biến

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

0

Tiếp theo, hãy chuyển sang phần Phá hủy đối tượng

Phá hủy đối tượng

Đầu tiên, hãy xem tại sao cần phải phá hủy đối tượng

Giả sử chúng tôi muốn trích xuất dữ liệu từ một đối tượng và gán cho các biến mới. Trước ES6, điều này sẽ được thực hiện như thế nào?

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

1

Xem nó tẻ nhạt như thế nào để trích xuất tất cả dữ liệu. Chúng ta phải lặp đi lặp lại điều tương tự. Phá hủy ES6 thực sự tiết kiệm thời gian. Hãy nhảy ngay vào nó

Phá hủy đối tượng cơ bản

Hãy lặp lại ví dụ trên với ES6. Thay vì gán từng giá trị một, chúng ta có thể sử dụng đối tượng bên trái để trích xuất dữ liệu

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

2

Bạn sẽ nhận được kết quả tương tự. Cũng có thể gán biến cho một đối tượng chưa được khai báo

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

3

Các biến được khai báo trước khi được gán

Các biến trong các đối tượng có thể được khai báo trước khi được gán với hàm hủy. Hãy thử điều đó

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

4

Đợi đã, chuyện gì vừa xảy ra vậy?. Ồ, chúng tôi quên thêm

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

8 trước dấu ngoặc nhọn

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

9 xung quanh câu lệnh gán là cú pháp bắt buộc khi sử dụng phép gán phá hủy theo nghĩa đen của đối tượng mà không cần khai báo. Điều này là do

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

0 ở phía bên trái được coi là một khối và không phải là một đối tượng theo nghĩa đen. Vì vậy, đây là cách để làm điều này đúng cách

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

5

Cũng cần lưu ý rằng khi sử dụng cú pháp này,

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

8 phải được đặt trước dấu chấm phẩy. Nếu không, nó có thể được sử dụng để thực thi một chức năng từ dòng trước

Lưu ý rằng các biến trong đối tượng ở phía bên trái phải có cùng tên với khóa thuộc tính trong đối tượng

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

2. Nếu tên khác nhau, chúng tôi sẽ nhận được

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

6

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

6

Nhưng nếu chúng ta muốn sử dụng một tên biến mới, chúng ta có thể

Sử dụng một tên biến mới

Nếu chúng ta muốn gán giá trị của một đối tượng cho một biến mới thay vì sử dụng tên của thuộc tính, chúng ta có thể làm điều này

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

7

Vì vậy, các giá trị được trích xuất được chuyển đến các biến mới

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

4 và

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

5

Sử dụng giá trị mặc định

Các giá trị mặc định cũng có thể được sử dụng trong quá trình phá hủy đối tượng, chỉ trong trường hợp một biến là

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

6 trong một đối tượng mà nó muốn trích xuất dữ liệu từ đó

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

8

Vì vậy, nếu giá trị không phải là không xác định, biến sẽ lưu trữ giá trị được trích xuất từ ​​đối tượng như trong trường hợp của

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

7. Mặt khác, nó đã sử dụng giá trị mặc định như đã làm cho

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

8

Chúng ta cũng có thể đặt giá trị mặc định khi gán giá trị cho một biến mới

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

9

Vì vậy,  

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

7 đã được trích xuất từ ​​​​_______32 và được gán cho một biến khác. Mặt khác,

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

8 là

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

6 trong

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

2, vì vậy biến mới

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

5  được gán giá trị mặc định

Tên thuộc tính được tính toán

Tên thuộc tính được tính toán là một tính năng theo nghĩa đen khác của đối tượng cũng hoạt động để phá hủy. Bạn có thể chỉ định tên của một thuộc tính thông qua một biểu thức nếu bạn đặt nó trong dấu ngoặc vuông

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

0

Kết hợp mảng với đối tượng

Mảng cũng có thể được sử dụng với các đối tượng trong quá trình phá hủy đối tượng

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

1

Làm tổ trong cấu trúc đối tượng

Các đối tượng cũng có thể được lồng vào nhau khi phá hủy

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

2

Nghỉ ngơi trong Object Destructuring

Cú pháp còn lại cũng có thể được sử dụng để chọn các khóa thuộc tính chưa được chọn bởi mẫu phá hủy. Các khóa đó và giá trị của chúng được sao chép vào một đối tượng mới

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

3

Ở đây, các thuộc tính còn lại có khóa không phải là một phần của tên biến được liệt kê đã được gán cho biến

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[name];//"Sarah"

5. Cú pháp còn lại ở đây là

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[name];//"Sarah"

6.

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[name];//"Sarah"

5 có thể được đổi tên thành bất kỳ biến nào bạn muốn

Một điều cuối cùng - hãy xem cách Object Destructuring có thể được sử dụng trong các chức năng

Cấu trúc đối tượng và chức năng

Object Destructuring có thể được sử dụng để gán tham số cho hàm

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

4

Lưu ý

let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

0 ở phía bên tay phải của đối tượng tham số. Nó giúp chúng ta có thể gọi hàm mà không cần truyền bất kỳ đối số nào. Đó là lý do tại sao chúng tôi có

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

6. Nếu chúng tôi xóa nó, chúng tôi sẽ nhận được thông báo lỗi

Chúng ta cũng có thể gán giá trị mặc định cho các tham số

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log[greeting];//"Hello"
console.log[pronoun];//"I"

5

Chúng ta có thể làm rất nhiều thứ với Array và Object Destructuring như chúng ta đã thấy trong các ví dụ trên

Cảm ơn bạn đã đọc. . ]

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Sarah Chima Atuonwu

Tôi là một kỹ sư phần mềm quan tâm đến việc làm cho tất cả mọi người có thể truy cập web. Tôi thích chia sẻ kiến ​​thức nên tôi viết về những điều tôi học được và những điều tôi cần học

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tôi có thể gán một mảng cho một biến không?

Một mảng có thể là một biến trong JavaScript không?

Bạn có thể lưu trữ một mảng trong một biến không?

Làm cách nào để thêm vào một mảng từ một biến trong JavaScript?