Làm thế nào để nói giữa các phần tử mảng không xác định và các vùng trống?

Question

Giả sử tôi là nhà phát triển tập lệnh người dùng và tôi không có quyền kiểm soát đối với javascript trên trang. Trang tạo các mảng với độ dài ngẫu nhiên, điền chúng với các giá trị ngẫu nhiên (bao gồm cả các mảng giả, chẳng hạn như undefined). Không phải mọi phần tử đều phải được chỉ định một giá trị, vì vậy có thể có các vùng trống.

Một ví dụ đơn giản (Firefox console):

var arr = new Array(3); 
arr[0] = null; 
arr[1] = undefined; 
console.log(arr);    \\ Array [ null, undefined, <1 empty slot> ] 
console.log(arr[1]);   \\ undefined 
console.log(arr[2]);   \\ undefined 
console.log(arr[1] === arr[2]); \\ true 
console.log(typeof arr[1]);  \\ undefined 
console.log(typeof arr[2]);  \\ undefined 

Như chúng ta có thể thấy, Firefox sẽ hiển thị undefined và trống rỗng khe khác nhau, trong khi cho javascript họ dường như giống hệt nhau.

Bây giờ giả sử tôi muốn xóa một mảng như vậy, xóa tất cả các vùng trống nhưng để nguyên các phần tử còn nguyên vẹn undefined. Làm thế nào để làm điều đó?

Answer 1

Bạn có thể sử dụng toán tử in để kiểm tra xem mảng có khóa hay không. Nó sẽ trả về false cho vị trí trống, nhưng đúng đối với khe với các giá trị, bao gồm giá trị undefined:

var arr = new Array(3); 
arr[0] = null; 
arr[1] = undefined; 

1 in arr; // true 
2 in arr; // false 

Lưu ý rằng bạn không thể phân biệt giữa các khe rỗng và khe quá khứ cuối mảng bằng cách sử dụng đó, nhưng nếu bạn biết độ dài của mảng, sau đó bạn đã biết rằng 3 không phải là một phần của nó, vì vậy bạn không cần phải kiểm tra 3 in arr.

Bạn cũng có thể lọc ra các khe trống như thế này:

arr = arr.filter(function (_, i) { return i in arr }); 

Answer 2

Bạn có thể sử dụng Array#forEach, mà bỏ qua các yếu tố thưa thớt.

var arr = new Array(3); 
 
arr[0] = null; 
 
arr[1] = undefined; 
 
console.log(arr); 
 

 
var withoutSparse = []; 
 

 
arr.forEach(function (a, i) { 
 
    console.log(i); 
 
    withoutSparse.push(a); 
 
}); 
 
console.log(withoutSparse);

.as-console-wrapper { max-height: 100% !important; top: 0; }