随着前端的飞速发展，在浏览器端完成复杂的计算，支配并处理大量数据已经屡见不鲜。那么，如何在最小化内存消耗的前提下，高效优雅的完成复杂场景处理，越来越考验开发者的功力，也直接决定了程序的性能。
本文展现了一个完全在控制台就能模拟体验的实例，通过一步步优化，实现了生产并操控多个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,并扩充了每个形状的坐标信息。此时，再来看下内存占用情况：
文章图片
还有一部分没更新完，明天再更新
