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 elementThô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ử.
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ử.
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.
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
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
Sử dụng delete nhà điều hành
let array = [1, 2, 3, 4, 5]
delete array[0]
array.length // .length returns 5
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!
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.
Chrome hiển thị điều này tốt nhất (theo ý kiến của tôi) và hiển thị empty.
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:
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.
