JS 中的稀疏数组和密集数组

1,191 阅读2分钟

一般来说,js 中的数组是稀疏的。

稀疏就是,数组的元素之间可以有空隙,因为一个数组其实就是一个键值映射。

稀疏数组

创建一个指定长度的稀疏数组很简单。

var arr = new Array(3);
//[,,,]

遍历时,它没有元素,js 会跳过这些缝隙。arr 是一个具有3个空位的数组,空位不是 undefined,空位是没有任何值。

ES5

  • forEach(), filter(), reduce(), every() 和some()都会跳过空位。
  • map()会跳过空位,但会保留这个值
  • join()和toString() 会将空位视为 undefined,而 undefined和 null 会被处理成空字符串。

ES6

明确将空位转为 undefined

  • Array.from 将数组的空位转为 undefined
  • … 将空位转换为 undefined
  • copyWithin 将空位一起拷贝
  • fill() 将空位视为正常的数组位置
  • for…of 循环会遍历空位
  • entries()、keys()、values()、find()和findIndex() 将空位处理成 undefined

遍历时,它没有元素,js 会跳过这些缝隙。

密集数组

创建方法一

var a = Array.apply(null,Array(3));
Array.apply(null, Array(3)).map(Function.prototype.call.bind(Number))
// (3)[0,1,2]

原理

Array 的构造函数

  • 当仅有一个参数且为数字类型时,数组没有包含任何实际的元素

Array.apply 方法

  • 该方法接收两个参数,第一个为作用域,第二个为数组或者一个类数组对象。
  • Array 构造函数会根据给定的参数来创建一个数组,通过 Array.apply 传入空数组Array(3),即一个 length 为 3 的空数组,相当于把一个空数组中的每一个元素的值逐个传入 Array() 方法。
var arr = new Array(3);

Array.apply(null,arr);
// 相当于
// new Array(arr[0],arr[1],arr[2]);
// 而 arr 中每一个元素的值为 undefined

创建方法二

es6 中的 Array.from 方法,任何有 length 属性的对象,都可以通过 Array.from 方法转为数组。

let arr = Array.from({length:3});

创建方法三

扩展运算符。

let arr = new Array(...Array(3));