Javascript gán nhiều biến từ mảng

Phá hủy mảng là một cách hiệu quả để trích xuất nhiều giá trị từ dữ liệu được lưu trữ trong một mảng

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về phá hủy mảng. Chúng ta sẽ xem qua các ví dụ để tìm hiểu chi tiết về cách thức hoạt động của tính năng phá hủy mảng

Tôi cũng đã tạo một video về hướng dẫn này

Bắt đầu nào

Hãy mở trình duyệt web của chúng tôi và sau đó mở bảng điều khiển JavaScript nơi chúng tôi sẽ viết mã của mình. Bạn có thể tìm hướng dẫn về cách mở bảng điều khiển tại đây

Cách hủy cấu trúc các phần tử từ một mảng

Tiếp theo, chúng ta sẽ tạo một mảng, được gọi là động vật và thêm các giá trị của chó, mèo và ngựa

const animals = ['Dog', 'Cat', 'Horse']

Tiếp theo, giả sử rằng chúng tôi muốn tạo một biến chỉ với giá trị của con chó. Chúng ta sẽ gọi biến này là dogVar, viết tắt của biến con chó. Trước khi tính năng phá hủy mảng được giới thiệu trong ES6, chúng tôi sẽ thực hiện việc này

dogVar = animals[0]

Tiếp theo, giả sử chúng ta cũng muốn giá trị của mèo và ngựa trong các biến riêng của chúng. chúng tôi sẽ nói

const catVar = aniamls[1]

const horseVar = animals[2]

Ở đây chúng tôi đã viết 3 dòng mã riêng biệt. Thay vào đó, hãy sử dụng phá hủy mảng và viết 1 dòng mã thay vì 3

Làm thế nào phá hủy hoạt động

Với việc phá hủy mảng, chúng ta có thể viết ra chỉ 1 dòng mã

const [firstElement, secondElement, thirdElement] = animals

Có vẻ như chúng ta đang tạo một mảng ở đây, nhưng chúng ta không phải. Chúng tôi đang phá hủy mảng này. Việc hủy cấu trúc giúp giải nén các giá trị từ mảng thành các biến riêng biệt.

Việc hủy cấu trúc lấy từng biến trên mảng ở phía bên trái và ánh xạ nó tới phần tử có cùng chỉ mục trong mảng animals

Khi chúng ta viết ra firstElement, chúng ta đang nói rằng chúng ta muốn truy cập vào phần tử đầu tiên trong mảng động vật và gán nó cho biến của firstElement.

Với secondElement, chúng ta đang nói rằng chúng ta muốn truy cập vào phần tử thứ hai trong mảng và gán nó cho biến của secondElement. Điều tương tự cũng xảy ra với biến dogVar1

Điểm mấu chốt ở đây là những cái tên dogVar2 này không quan trọng. Điều quan trọng là thứ tự

Nhìn vào thứ tự hủy của chúng ta sẽ cho chúng ta biết phần tử nào trong mảng được gán cho biến nào

Hãy xem 1 dòng mã nơi chúng ta hủy cấu trúc mảng. Hãy hình dung phần này của nó dogVar2 là một mảng

Nếu đây là một mảng, thì firstElement sẽ ở vị trí dogVar5 của mảng. JavaScript sẽ thấy rằng biến firstElement này đang ở vị trí dogVar5, sau đó nó sẽ đi vào mảng animals và tìm phần tử ở vị trí dogVar5 và gán phần tử đó cho biến firstElement

(Hãy nhớ rằng các mảng không được lập chỉ mục, điều đó có nghĩa là chúng ta bắt đầu đếm chúng từ 0 thay vì 1. )

Khi phá hủy, chúng ta có thể đặt cho các biến của mình bất kỳ tên nào chúng ta muốn. Một lần nữa, thứ tự mới là điều quan trọng, không phải việc đặt tên. Nếu chúng ta muốn, chúng ta có thể viết.

dogVar = animals[0]1

Bây giờ chúng tôi có tất cả các giá trị của chúng tôi. Nếu chúng ta viết ra dogVar = animals[0]2, chúng ta có thể thấy rằng chúng ta nhận được tất cả các tên biến với các giá trị chính xác

dogVar = animals[0]3

dogVar = animals[0]4

dogVar = animals[0]5

Nếu chúng ta quay lại mã của mình khi bắt đầu ví dụ này, chúng ta có 3 dòng mã để tạo các biến cho chó, mèo và ngựa. Với việc hủy mảng, chúng tôi chỉ sử dụng 1 dòng mã. Phá hủy chỉ là một con đường tắt. Đó là một cách dễ dàng, nhanh chóng để trích xuất nhiều giá trị từ một mảng

Nhưng nếu bạn chỉ muốn lấy một phần tử từ một mảng, ví dụ như phần tử thứ hai hoặc thứ ba trong một mảng, và lưu trữ phần tử đó trong một biến thì sao?

Cách hủy cấu trúc phần tử thứ hai hoặc thứ ba trong một mảng

Tiếp theo, giả sử chúng ta có một mảng, trái cây

dogVar = animals[0]6

Điều gì sẽ xảy ra nếu chúng ta chỉ muốn lấy giá trị của quả táo và gán nó cho tên biến của quả táo?

Chúng ta không thể chỉ làm dogVar = animals[0]7. Tại sao không? . Tại sao lại như vậy?

Điều này một lần nữa là do thứ tự quan trọng. Với const catVar = aniamls[1]0, JavaScript nhìn vào dogVar = animals[0]8, thấy nó ở vị trí dogVar5, sau đó tìm phần tử ở vị trí 0 trong mảng const catVar = aniamls[1]3, là dogVar = animals[0]9 và gán phần tử đó cho biến apple.

Chúng tôi không muốn điều này xảy ra. Vậy ta phải làm sao?

Thay vào đó, chúng ta có thể viết. const catVar = aniamls[1]5

Dấu phẩy này hoạt động như một loại trình giữ chỗ. Dấu phẩy này yêu cầu JavaScript hoạt động như thể có phần tử đầu tiên ở đó và do đó, biến dogVar = animals[0]8 này hiện là phần tử thứ hai ở đây. Nói cách khác, dogVar = animals[0]8 hiện đang ở vị trí const catVar = aniamls[1]8

Giả sử chúng ta chỉ muốn giá trị của const catVar = aniamls[1]9 trong một biến và chúng ta không quan tâm đến các phần tử táo hay chuối. Một lần nữa chúng ta có thể sử dụng dấu phẩy như vậy

const horseVar = animals[2]0

Nếu chúng tôi viết const catVar = aniamls[1]9 trong bảng điều khiển của mình, chúng tôi sẽ thấy rằng chúng tôi đã tạo thành công biến màu cam và nó có giá trị là const horseVar = animals[2]2

Một điều cuối cùng cần lưu ý là nếu bạn học React, bạn có thể sẽ thường xuyên sử dụng phá hủy mảng với các hook React. Ví dụ, bạn có thể thấy một cái gì đó như thế này

const horseVar = animals[2]3

chúng ta đi thôi. Chúng ta đã học tất cả về phá hủy mảng

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

Nếu bạn thích bài đăng này, hãy tham gia câu lạc bộ viết mã của tôi, nơi chúng ta cùng nhau giải quyết các thử thách viết mã vào Chủ nhật hàng tuần và hỗ trợ lẫn nhau khi chúng ta học các công nghệ mới

Nếu bạn có phản hồi hoặc câu hỏi về bài đăng này, hoặc tìm tôi trên Twitter @madisonkanna

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Madison Kanna

Đọc thêm bài viết

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

Bạn có thể gán nhiều biến trong JavaScript không?

Mảng có thể lưu trữ nhiều biến không?

Bạn có thể khai báo nhiều biến trong một dòng JavaScript không?

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