前端技术略谈

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

本文展现了一个完全在控制台就能模拟体验的实例，通过一步步优化，实现了生产并操控多个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:sc)

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

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

深层探究

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

好，我来带你看看，点击控制台profiles,选择take shapshot.在window->window目录下，根据内存进行筛选，你会得到：

很明显，我们看到：

a数组：8MB;

b数组：40MB；

c数组：64MB；

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

ES6 Class处理需求

简单热身之后，我们了解了实际需求。接下来，我们考察下ES6 Class处理这个问题的情况。请重新刷新浏览器tab，复制执行以下代码。

class shape{

constructor (id,shape ='square',size

this.x=x;//坐标x轴

this.y=y;//坐标y轴

object.assign(this,{id,shape,size

}

}

a=new Array(1e6).fill(0);

b=a.map(val.ix)=>new shape(ix));

我们使用了ES6 Classes,并扩充了每个形状的坐标信息。此时，再来看下内存占用情况：

还有一部分没更新完，明天再更新