JavaScript数组的进化与性能分析-创新互联

正式开始前需要声明，本文并不是要讲解 JavaScript 数组基础知识，也不会涉及语法和使用案例。本文讲得更多的是内存、优化、语法差异、性能、近来的演进。

在使用 JavaScript 前，我对 C、C++、C# 这些已经颇为熟悉。与许多 C/C++ 开发者一样，JavaScript 给我的第一印象并不好。

Array 是主要原因之一。JavaScript 数组不是连续（contiguous）的，其实现类似哈希映射（hash-maps）或字典（dictionaries）。我觉得这有点像是一门 B 级语言，数组实现根本不恰当。自那以后，JavaScript 和我对它的理解都发生了变化，很多变化。

为什么说 JavaScript 数组不是真正的数组

在聊 JavaScript 之前，先讲讲 Array 是什么。

数组是一串连续的内存位置，用来保存某些值。注意重点，“连续”（continuous，或 contiguous），这很重要。

上图展示了数组在内存中存储方式。这个数组保存了 4 个元素，每个元素 4 字节。加起来总共占用了 16 字节的内存区。

假设我们声明了 tinyInt arr[4];，分配到的内存区的地址从 1201 开始。一旦需要读取 arr[2]，只需要通过数学计算拿到 arr[2] 的地址即可。计算 1201 + (2 X 4)，直接从 1209 开始读取即可。

JavaScript 中的数据是哈希映射，可以使用不同的数据结构来实现，如链表。所以，如果在 JavaScript 中声明一个数组 var arr = new Array(4)，计算机将生成类似上图的结构。如果程序需要读取 arr[2]，则需要从 1201 开始遍历寻址。

以上急速 JavaScript 数组与真实数组的不同之处。显而易见，数学计算比遍历链表快。就长数组而言，情况尤其如此。

JavaScript 数组的进化

不知你是否记得我们对朋友入手的 256MB 内存的电脑羡慕得要死的日子？而今天，8GB 内存遍地都是。

与此类似，JavaScript 这门语言也进化了不少。从 V8、SpiderMonkey 到 TC39 和与日俱增的 Web 用户，巨大的努力已经使 JavaScript 成为世界级必需品。一旦有了庞大的用户基础，性能提升自然是硬需求。

实际上，现代 JavaScript 引擎是会给数组分配连续内存的 —— 如果数组是同质的（所有元素类型相同）。优秀的程序员总会保证数组同质，以便 JIT（即时编译器）能够使用 c 编译器式的计算方法读取元素。

不过，一旦你想要在某个同质数组中插入一个其他类型的元素，JIT 将解构整个数组，并按照旧有的方式重新创建。

因此，如果你的代码写得不太糟，JavaScript Array 对象在幕后依然保持着真正的数组形式，这对现代 JS 开发者来说极为重要。

此外，数组跟随 ES2015/ES6 有了更多的演进。TC39 决定引入类型化数组（Typed Arrays），于是我们就有了 ArrayBuffer。

ArrayBuffer 提供一块连续内存供我们随意操作。然而，直接操作内存还是太复杂、偏底层。于是便有了处理 ArrayBuffer 的视图（View）。目前已有一些可用视图，未来还会有更多加入。

var buffer = new ArrayBuffer(8);
var view  = new Int32Array(buffer);
view[0] = 100;

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。