稀疏数组

概念

在一些后端语言中，如 C，数组内的值通常被分配在一系列连续的内存地址上，但是在 js 中，某些数组内存则不是连续的，所谓稀疏，顾名思义，不连续，存在一些空隙；


例如：

1
2
3
var arr = new Array(3);
console.log(arr);
// (3) [empty × 3]

通过以上方法创建数组，其中 Array(3) 中的参数 3 表示数组的长度，这个数组就是稀疏的，控制台输出一般带有 empty 字样，或者像下面这样创建数组：

1
2
3
var arr = [1,,2];
console.log(arr);
// (3) [1, empty, 2]

因为定义语句中两个逗号之间无字符，没有定义值，同样带有 empty 字样，代表稀疏数组，这里可以把 empty 理解为上面讲到的 空隙；

特点
接下来看一下稀疏数组特殊在什么地方，举个例子说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var arr1 = [1, 2, 3];  // 正常数组
var arr2 = new Array(3);  // 稀疏数组
var arr3 = [1, , 3];  // 稀疏数组

console.log(arr1.length, arr2.length, arr3.length);
// 3 3 3
console.log(arr2[0], arr3[1]);
// undefined undefined
for (var i = 0; i < 3; i++) {
    console.log(arr1[i], arr2[i], arr3[i]);
}
// 1 undefined 1
// 2 undefined undefined
// 3 undefined 3
arr1.forEach(function(x){
    console.log(x);
});
// 1
// 2
// 3
arr2.forEach(function(x){
    console.log(x);
});
// （无输出）
arr3.forEach(function(x){
    console.log(x);
});
// 1
// 3
console.log(0 in arr3, 1 in arr3);
// true false

总结一下，创建的稀疏数组，其长度（length）与定义长度值一致；空隙 值可以被单独访问到，并且不是之前出现的 empty 字样，而是 undefined，比如例子中出现 undefined 时都是使用 arr[i] 这样的索引直接访问方式；使用某些数组方法如 forEach() 时，会忽略掉空隙值，只处理正常值，所以也会使得 1 in arr3 值为 false，即数组中不存在该索引；


细想一下，js 这样处理的原因多半是去除不必要的性能开销，当数组相当大时，可以避免处理一些未初始化的值，但这样也同时使得开发中会出现一些问题，所以应尽量避免；


举个例子来查看一下性能如何：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
console.time('one');
// 密集数组
Array(...Array(1e5)).forEach(function(){
    ;
});
console.timeEnd('one');

console.time('two');
// 稀疏数组
Array(1e5).forEach(function(){
    ;
});
console.timeEnd('two');

// one: 26.3759765625ms
// two: 5.701171875ms

可以看出在处理较大数组时，稀疏数组确实能降低不少性能开销；

密集数组

概念

与稀疏相对应，则存在密集，定义也就是元素中不存在 空隙 值，其实密集数组基本就是平时常见的正常数组；

例如：

1
2
3
4
5
6
7
8
var arr1 = [1, 2, 3];
var arr2 = new Array(1, 2, 3);
arr2.forEach(function(x){
    console.log(x);
});
// 1
// 2
// 3

以上都是一些定义密集数组的方法，并且数组中的值都能被正常访问或遍历处理；

区别

运用时需要注意以下情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr1 = [undefined, undefined, undefined];
var arr2 = new Array(3);
console.log(arr1[0], arr2[0]);
// undefined undefined
arr1.forEach(function(x){
    console.log(x);
})
// undefined
// undefined
// undefined
arr2.forEach(function(x){
    console.log(x);
})
// （无输出）

即显式的声明值为 undefined 并不代表这个值就是之前提到的空隙值，虽然二者通过索引访问时的值都返回 undefined，但是其根本还是有区别的，显式声明过的是可以被遍历等操作访问的，不会被当成空隙值被忽略；

拓展

通常在很多情况下，我们想要直接声明一个数组并赋予其一些特定的初始值，并且为了避免问题，通常是希望申明为密集数组的，下面就介绍一些常用的方法或技巧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var arr1 = new Array(3).fill(1);
console.log(arr1);
// [1, 1, 1]

var arr2 = Array.fill().map((x, i) => i);
console.log(arr2);
// [0, 1, 2]

var arr3 = Array.apply(null, Array(3));
console.log(arr3);
// [undefined, undefined, undefined]
// 这样声明的是密集数组，不是稀疏的

var arr4 = new Array(4).join('a').split('');
console.log(arr4);
// ['a', 'a', 'a']
// 注意定义数组长度比输出数组大 1