JavaScript 稀疏数组

1、稀疏数组定义

数组可以包含“空槽”，这与用值 undefined 填充的槽不一样。空槽可以通过以下方式之一创建：

1. Array 构造函数

   console.log(new Array(5)); // Array [ <5 empty items> ]
   

2. 字面量中的连续逗号

   console.log([1, 2, , , 5]); // Array [ 1, 2, <2 empty items>, 5 ]
   

3. 直接给大于 array.length 的索引设置值

   const arr = [1, 2];
   arr[4] = 5;
   console.log(arr); // Array [ 1, 2, <2 empty items>, 5 ]
   

4. 通过直接设置 .length 拉长一个数组

   const arr = [1, 2];
   arr.length = 5;
   console.log(arr); // Array [ 1, 2, <3 empty items> ]
   

5. 删除一个元素

   const arr = [1, 2, 3, 4, 5];
   delete arr[2];
   console.log(arr); // Array [ 1, 2, <1 empty item>, 4, 5 ]
   

2、稀疏数组的空槽特性

2.1、被视为undefined

在某些操作中，空槽的行为就像它们被填入了 undefined 那样。

1. 通过索引访问

   const arr = [1, 2, , , 5];
   console.log(arr[2]); // undefined
   

2. for…of

   const arr = [1, 2, , , 5];
   for (const item of arr) {
     console.log(item);
   }
   // 1 2 undefined undefined 5
   

3. 数组中使用扩展运算符

   const arr = [1, 2, , , 5];
   const newArr = [...arr];
   console.log(newArr); // Array [ 1, 2, undefined, undefined, 5 ]
   

2.2、在数组迭代中被跳过

1. map

   const arr = [1, 2, , , 5];
   arr.map(item => console.log(item)); // 1 2 5
   

2. forEach

   const arr = [1, 2, , , 5];
   arr.forEach(item => console.log(item )); // 1 2 5
   

3. filter

   const arr = [1, 2, , , 5];
   arr.filter(item => console.log(item)); // 1 2 5
   

4. some

   const arr = [1, 2, , , 5];
   arr.some(item => console.log(item)); // 1 2 5
   

5. Object.keys()

   const arr = [1, 2, , , 5];
   console.log(Array.from(Object.keys(arr))); // Array ['0', '1', '4']
   

6. Object.values()

   const arr = [1, 2, , , 5];
   console.log(Array.from(Object.values(arr))); // Array [1, 2, 5]
   

7. Object.entries()

   const arr = [1, 2, , , 5];
   console.log(Array.from(Object.entries(arr))); // Array [['0', 1], ['1', 2], ['4',]]
   

8. for…in

   const arr = [1, 2, , , 5];
   for (const key in arr) {
     console.log(key); // 0 1 4
   }
   

9. 对象中使用扩展运算符

   const arr = [1, 2, , , 5];
   console.log({ ...arr }); // Object {'0': 1, '1': 2, '4': 5}