在 JavaScript 中建立数组的正确姿式

JavaScript 中数组的特殊性

• 每一项均可以保存任意类型的数据，数组大小能够动态调整，便可以随着数据的添加自动增加以容纳新数据
• 数组中可能会存在空位
• 稀疏数组

具备不连续索引的数组，其 length 属性值大于元素的个数。

• 密集数组

具备连续索引的数组，其 length 属性值等于元素的个数。

在 JavaScript 中，数组本质上也是对象，是对象的一种特殊形式。

数组索引实际上和碰巧是整数名的对象属性没有什么差异，不过数组的实现是通过了优化的，经过数组索引访问数组元素比访问通常对象的属性要快的多。

规定数组索引的范围是 0 ~ 4294967294 （2^32 - 2）, 全部的索引都是属性名， 可是只有在这个范围内的整数才是数组索引，数组索引会触发数组的特殊行为。

数组的建立方式

数组字面量

这是咱们平时使用最多，最简单的数组建立方式。

const arr1 = []
复制代码

构造函数

利用构造函数建立数组的时候，在只有一个参数的状况下，根据参数的类型不一样，会返回不一样的结果。

// 注：这种方式建立的数组属于稀疏数组，每一项都是空位，下边会具体介绍稀疏数组。
// 请避免使用这样的方式建立数组。
const arr1 = Array(3) // [empty × 3]
const arr2 = Array('3') // ["3"]
复制代码

of() 方法

这是 ES6 中新增的方法，用来弥补构造函数的的缺陷。 不会根据参数的类型不一样致使建立行为的不一样。

const arr1 = Array.of(3) // [3]
const arr2 = Array.of('3') // ['3']
复制代码

from() 方法

ES6 新增的方法，这个方法的主要用途就是将类数组对象转为数组对象。 建立给定长度的数组这个方法会很好用。

const arr1 = Array.from({length: 3}) // [undefined, undefined, undefined]
复制代码

稀疏数组

稀疏数组就是存在空位的数组，这里简单介绍一下：

空位的检测 in

空位是没有任何值，能够用 in 运算符检测。咱们能够根据 in 字符来检测数组某一项是不是空位。

const a = [,,,] // [empty × 3]
0 in a // false
const b = [1,2,3]
0 in b //true
复制代码

形成稀疏数组的操做

• delete 操做符

使用 delete 操做符能够将数组项从数组中删除，数组的长度并不会发生变化，而是会留下一个空位。

const b = [1,2,3]
delete b[0]
console.log(b) // [empty, 2, 3]
复制代码

• 构造函数

const a = Array(3)
console.log(a) // [empty × 3]
复制代码

• 在数组字面量中省略值

[,,,] // [empty × 3]
复制代码

• 指定数组索引大于数组长度

const c = []
c[10] = 0;
console.log(c) // [empty × 10, 0]
复制代码

• 指定数组长度大于当前数组长度

const a = []
a.length = 10 // [empty × 10]
复制代码

咱们在平时要尽可能避免建立和使用稀疏数组，由于在 ES6 以前的方法，对稀疏数组的处理存在不少不统一的地方。

操做的不统一

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。

参考：阮一峰《ECMAScript 6 入门》- 数组的扩展 - 数组的空位

注意： 操做的不统一可能会有产生不少意料以外的结果，因此“墙裂”建议不要建立和使用稀疏数组。

固定长度的 undefined 数组建立

有些时候，咱们并不关心数组的内容是什么，咱们只是须要一个真正的数组，而且可以使用数组的方法。

能够参考如下方法来建立：

1. Array.apply

// 这个方法也是将一个类数组对象转为数组对象。
// 在建立 undefined 值的数组时有些奇怪和繁琐，可是结果远比 Array(3) 更准确可靠。
Array.apply(null, {length: 4}) // [undefined, undefined, undefined, undefined]
复制代码

2. Array.from()

// 将类数组对象转换为数组对象
Array.from({length: 4}) // [undefined, undefined, undefined, undefined]
复制代码

3. 扩展运算符

[...Array(4)] // [undefined, undefined, undefined, undefined]
复制代码

总而言之

• 不要建立和使用稀疏数组
• 避免使用 Array 构造函数建立数组
• 推荐对象字面量、of()、from()、扩展运算符...建立数组

参考连接

阮一峰《ECMAScript 6 入门》- 数组的扩展 - 数组的空位

建立 0-100 的数组

稀疏数组和 filter 方法