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 dogVar
1
Điểm mấu chốt ở đây là những cái tên dogVar
2 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ó dogVar
2 là một mảng
Nếu đây là một mảng, thì firstElement
sẽ ở vị trí dogVar
5 của mảng. JavaScript sẽ thấy rằng biến firstElement
này đang ở vị trí dogVar
5, sau đó nó sẽ đi vào mảng animals
và tìm phần tử ở vị trí dogVar
5 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í dogVar
5, 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
Đọ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