HomeLập trìnhJavaScriptMảng thưa thớt...

Mảng thưa thớt so với Mảng dày đặc trong JavaScript — Được giải thích bằng các ví dụ


Gần đây, tôi gặp phải một lỗi thực sự thú vị mà thoạt nhìn đã khiến tôi hoàn toàn bối rối.
Tôi thấy tôi có một mảng trống. Nhưng chiều dài là 31.

Đợi đã, cái gì?

Mảng dày đặc là gì?

Mảng dày đặc là loại được biết đến nhiều nhất Array. Chúng là những mảng “bình thường” quen thuộc nhất.

Mảng dày đặc là một mảng trong đó các phần tử đều tuần tự bắt đầu từ chỉ số 0.

Trong trường hợp này, thuộc tính độ dài của một mảng xác định chính xác số phần tử trong mảng.

let array = [1, 2, 3, 4, 5]  
array.length // Returns 5

Mảng thưa thớt là gì?

Mảng thưa thớt là mảng trong đó các phần tử không theo thứ tự và không phải lúc nào chúng cũng bắt đầu từ 0.

Về cơ bản chúng là Arrays có “lỗ hổng” hoặc khoảng trống trong chuỗi chỉ số của chúng.

Vì vậy, một ví dụ sẽ là:

let array = [];
array[100] = "Holes now exist";
array.length // 101, but only 1 element

Thông thường, thuộc tính độ dài của một Array trả về chính xác số phần tử trong mảng, nhưng trong các mảng thưa thớt thì không. Nếu mảng thưa thớt, giá trị của thuộc tính độ dài lớn hơn số lượng phần tử.

Đọc thêm  JavaScript không đồng bộ – Giải thích về cuộc gọi lại, lời hứa và không đồng bộ/đang chờ

Arrays dưới mui xe trong JavaScript là ObjectS. Khóa của chúng là số và giá trị của chúng là các phần tử.

hình ảnh.png
let array = [];
array[20] = {};
array[100] = {};
array[19] = {};
alert(array.length); // Logs 101

Các length tài sản trên một Array lấy chỉ mục của phần tử cuối cùng và thêm một chỉ mục. Vì vậy, nếu bạn có một mảng có các lỗ nằm giữa chỉ mục 0 đến 100 và một phần tử ở chỉ mục 101, thì length sẽ trả về 101, vì đó là chỉ số cuối cùng + 1.

Điều trên xảy ra bất kể có bao nhiêu phần tử trong Array.

Thông số cụ thể nêu chi tiết hành vi này nếu bạn muốn đọc thêm về thông số ECMAScript tại đây.

hình ảnh.png

Bạn đã thấy một số cách rồi, nhưng còn nhiều cách nữa:

Sử dụng Array vật

let array = new Array(10); // array initialized with no elements
array.length // 10
hình ảnh-53

Chèn khóa/giá trị tại một chỉ mục nhất định

array[1000] = 0; // Assignment adds one element 
array.length // But .length returns 1001
hình ảnh-54

Sử dụng delete nhà điều hành

let array = [1, 2, 3, 4, 5]
delete array[0]
array.length // .length returns 5
hình ảnh-55

Khởi tạo một Array có lỗ

[,,,,] // You have created an array with nothing but holes
[1,2,3,4,,5] // Oh no, you mistyped a comma and entered a hole between 4 and 5!
hình ảnh-56

Sự khác biệt về triển khai trình duyệt

Trình duyệt bạn đang sử dụng (cũng như phiên bản) biểu thị các lỗ hổng của mảng thưa thớt theo cách khác.

Đọc thêm  Ví dụ về JavaScript toString – Cách chuyển đổi một số thành một chuỗi trong JS và hơn thế nữa

Chrome hiển thị điều này tốt nhất (theo ý kiến ​​của tôi) và hiển thị empty.

hình ảnh.png

Phiên bản Firefox mới nhất (80.0.1 tại thời điểm viết) hiển thị như sau:

hình ảnh.png

Phần kết luận

Giải pháp cuối cùng cho lỗi mà tôi đã giới thiệu lúc đầu là chỉ cần kiểm tra xem phần tử đó có bị sai lệch trước khi sử dụng nó hay không. Cái gì đó như:

let array = [,,,,]
for(let i = 0; i < array.length; i++){
    if (array[i]) {
        console.log(array[i])
    }
}

Bởi vì các lỗ là giả, nên nó sẽ không thực hiện logic mà bạn đang thử trên bất kỳ lỗ nào bạn có trong Array.

Vậy tại sao trình duyệt của tôi hiển thị trống?

Tôi đang sử dụng Safari và nó không hiển thị gì cho các lỗ hổng. Vì vậy, tôi đã đăng xuất Array‘độ dài là 31 và khi tôi đăng xuất nội dung, nó chỉ hiển thị cho tôi một mảng trống! Khá khó hiểu ngay từ cái nhìn đầu tiên.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status