文章出自个人博客https://knightyun.github.io/2019/08/02/js-sparse-array,转载请申明
稀疏数组
概念
在一些后端语言中,如 C,数组内的值通常被分配在一系列连续的内存地址上,但是在 js 中,某些数组内存则不是连续的,所谓稀疏,顾名思义,不连续,存在一些空隙;
例如:
var arr = new Array(3);
console.log(arr);
// (3) [empty × 3]
通过以上方法创建数组,其中 Array(3)
中的参数 3 表示数组的长度,这个数组就是稀疏的,控制台输出一般带有 empty
字样,或者像下面这样创建数组:
var arr = [1,,2];
console.log(arr);
// (3) [1, empty, 2]
因为定义语句中两个逗号之间无字符,没有定义值,同样带有 empty
字样,代表稀疏数组,这里可以把 empty
理解为上面讲到的 空隙;
特点
接下来看一下稀疏数组特殊在什么地方,举个例子说明:
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 这样处理的原因多半是去除不必要的性能开销,当数组相当大时,可以避免处理一些未初始化的值,但这样也同时使得开发中会出现一些问题,所以应尽量避免;
举个例子来查看一下性能如何:
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
可以看出在处理较大数组时,稀疏数组确实能降低不少性能开销;
密集数组
概念
与稀疏相对应,则存在密集,定义也就是元素中不存在 空隙 值,其实密集数组基本就是平时常见的正常数组;
例如:
var arr1 = [1, 2, 3];
var arr2 = new Array(1, 2, 3);
arr2.forEach(function(x){
console.log(x);
});
// 1
// 2
// 3
以上都是一些定义密集数组的方法,并且数组中的值都能被正常访问或遍历处理;
区别
运用时需要注意以下情况:
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
,但是其根本还是有区别的,显式声明过的是可以被遍历等操作访问的,不会被当成空隙值被忽略;
拓展
通常在很多情况下,我们想要直接声明一个数组并赋予其一些特定的初始值,并且为了避免问题,通常是希望申明为密集数组的,下面就介绍一些常用的方法或技巧:
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
其它更多的方法可以自行类推;
![](https://i-blog.csdnimg.cn/blog_migrate/7207fa02e68f074ca12a28421c7b7fad.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0df4f33f04c0e224f639afb6f2e2d499.png)