通过一个场景实例 了解前端处理大数据的无限可能

随着前端的飞速发展，在浏览器端完成复杂的计算，支配并处理大量数据已经屡见不鲜。那么，如何在最小化内存消耗的前提下，高效优雅地完成复杂场景的处理，越来越考验开发者功力，也直接决定了程序的性能。

本文展现了一个完全在控制台就能模拟体验的实例，通过一步步优化，实现了生产并操控1000000（百万级别）个对象的场景。

导读：这篇文章涉及到 javascript 中 数组各种操作、原型原型链、ES6、classes 继承、设计模式、控制台分析 等内容。要求阅读者具有 js 面向对象扎实的基础知识。如果你是初级前端开发者，很容易被较为复杂的逻辑绕的云里雾里，“从入门到放弃”，不过建议先收藏。如果你是“老司机”，本文提供的解决思路希望对你有所启发，抛砖引玉。

场景和初级感知

具体来说，我们需要一个构造函数，或者说类似 factory 模式，实例化1000000个以上对象实例。

先来感知一下具体实现：

Step1

打开你的浏览器控制台，仔细观察并复制粘贴以下代码，触发执行。

a = new Array(1e6).fill(0);复制代码

我们创建了一个长度为1000000的数组，数组的每一项元素都为0。

Step2

在数组 a 的基础上，再生产一个长度为1000000的数组 b，数组的每一项元素都是一个普通 javascript object，拥有 id 属性，并且其 id 属性值为其在元素中的 index 值；

b = a.map((val, ix) => ({id: ix}))复制代码

Step3

接下来，在 b 的基础上，再生产一个长度为1000000的数组 c ，类似于
b，同时我们增加一些其它属性，使得数组元素对象更加复杂一些：

c = a.map((val, ix) => ({id: ix, shape: 'square', size: 10.5, color: 'green'}))复制代码

语义上，我们可以更直观的理解：c 就是包含了1000000个元素的数组，每一项都是一个绿色的、size 为10.5的小方块。

如果你按照指示做了下来，控制台上会有以下内容：

控制台截图

深层探究

你也许会想，这么大的数据量，内存占用会是什么样的情况呢？

好，我来带你看看，点击控制台 Profiles，选择 Take Shapshot。在Window->Window 目录下，根据内存进行筛选，你会得到：

内存占用情况

很明显，我们看到：

• a数组：8MB；
• b数组：40MB；
• c数组：64MB

也许在实际场景中，除了1000000个绿色的、size为10.5的小方块，我们还需要很多不同颜色，不同 size 的形状。之前，这样“变态”的需求常见于游戏应用中。但是现在，复杂项目中类似场景，也许距离你并不遥远。

ES6 Classes处理需求

简单“热