JS即将发布数组的4个新特性，真香

　　新特性总览：
　　at(): 数组支持索引查询
　　Array Group: 数组元素分类；
　　Array find from last: 数组逆向查询
　　Resizable and growable Array Buffer: Array Buffer支持大小伸缩
　　在开始之前，简单描述下事情的来龙去脉。
　　这些新特性被 TC39 组织纳入了 stage3  和 stage4  状态，TC39 简单说就是一个推进EMCAScript（俗称JS）语言进步的一个官方组织。一些优秀提案，比如Promise，箭头函数等等都是出自该组织。
　　最后解释一下stage3状态；每个提案被投放到EMCAScript语言的正式环境之前，都要经历4个阶段，stage1至stage4。到了stage3阶段基本被社团的成员认可，接下来就是各家浏览器厂商，Chrome，Firefox，Safari等等的研发支持。stage4阶段就是已经投放到各大浏览器，可以让我们使用。通常我们在配置babel文件时，就会接触到这个stage概念；  { ＂presets＂: [＂es2015＂, ＂react＂, ＂stage-3＂] } 提案一 at()
　　数组支持索引查询
　　过去我们在使用 [] 语法时，会以为数组和字符串支持按照索引去查询元素。比如： const arr = [1,2,3,4,5];  console.log(arr[4])  // 5
　　这样的使用确实会让我们产生误导，以为 arr[4] 是查询数组第四个元素，但其实试一下arr[-1] 就发现取到的是undefined。在EMCAScript里，[] 语法最初被设计是适用于所有对象，比如arr[1] ，实际上只是引用了键为 ＂1 ＂ 的对象的属性，这是任何对象都可以拥有的。所以arr[-1] 这样的代码书写看似有效，但它返回对象的 ＂-1 ＂ 属性的值. const arr = [1,2,3,4,5];  console.log(arr[-1])  // undefined
　　at()提案就是解决数组、字符串、TypedArray不能直接通过索引查询。该提案目前进入satge4，被各大浏览器实现。可以复制下面的代码直接在浏览器尝试。  const arr = [1,2,3,4,5];  console.log(arr.at(-2))  // 4
　　评价 ：过去代码中 arr[arr.length-1] 的使用，会让初学者或者其他语言的开发者感觉古怪，arr.at(index) 则显然更加语义话，是个不错的提案。 提案二 Array Group
　　用于数组元素分类
　　给数组Array的原型上添加了两个方法， groupBy 和groupByToMap 。内容比较简单，直接看使用案例就可以看懂，这里不再赘述。 groupBy
　　使用案例：
　　将数组中的元素，按照数字 ‘40’ 来进行分类  let array = [23, 56, 78, 42, 11, 49] array.groupBy((item,index) => {     return item > 40 ? ＂比40大＂ : ＂比40小＂ }) // {＂比40大＂: [56, 78, 42, 49] , ＂比40小＂: [23,11]}
　　groupBy 方法返回了一个新的匿名对象，其中对象的键key为groupBy 的回调函数的返回值。
　　如果没有 groupBy 提案，我们过去是这么实现： Array.prototype.groupBy = function(callback) {     const object = {};     for(let i =0; i < this.length; i++) {         let key = callback(this[i],i,this);         if(object[key]) {             object[key].push(this[i])         } else {             object[key] = [this[i]]         }     }     return object; } groupByToMap  groupByToMap 方法返回了一个常规的Map，其中Map的键key为groupBy 的回调函数的返回值。
　　使用案例：  const array = [1, 2, 3, 4, 5]; const odd  = { odd: true }; const even = { even: true }; array.groupByToMap((num, index, array) => {   return num % 2 === 0 ? even: odd; });  // =>  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }
　　如果没有 groupByToMap 提案，我们过去是这么实现： Array.prototype.groupByToMap = function(callback) {     const mapObject = newMap();     for(let i =0; i < this.length; i++) {         let key = callback(this[i],i,this);         if(mapObject.get(key)) {             mapObject.get(key).push(this[i])         } else {             mapObject.set(key,[this[i]])         }     }     return mapObject; }
　　评价 ：实际开发中，类似这样的数组  [ 1 , 2 , 3 , 4 , 5 ] ，如果要分奇数偶数的话，需要重新声明一个对象来存储。 const obj = { odd: [1, 3, 5], even: [2, 4] }
　　而 groupBy 提案返回的是一个null-prototype 对象，{ odd: [1, 3, 5], even: [2, 4] } ,不需要再声明一个具名对象。groupByToMap 返回的是一个常规Map对象，总体来说比较实用。 提案三 Array find from last
　　从数组的最后一个到第一个查找元素的方法
　　使用案例：
　　按照以前的js写法，要想倒叙查询数组元素。
　　先进行一次反转 reverse ，反转一次数组，再使用find 进行查询。 const array = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];  [...array].reverse().find(n => n.value % 2 === 1);  // { value: 3 }
　　或者在原型上挂一个方法来实现：  Array.prototype.findLast = function(callback) {     const len = this.length;     for(let i = len - 1; i > 0; i--) {         if(callback(this[i],i,this)) {             returnthis[i]         }     }     return-1 }
　　Array find from last  提案方案：
　　通过提案提供的方法 findLast ，支持了直接逆向查询数组。 array.findLast(n => n.value % 2 === 1); // { value: 3 }
　　评价 ：从性能看，减少了一次数组反转，确实有看的见的优化。从语义上来说，有正向查询就应该有反向查询，符合人们的思维习惯，总体来说比较实用。  提案四 Resizable and growable Array Buffer
　　扩展 ArrayBuffer 构造函数，采用额外的最大长度，以允许就地增长和缩小缓冲区。
　　在介绍提案之前，需要提前了解下什么是 ArrayBuffer ，它是解决什么问题的，怎么用，在哪里用。这样会方便理解该提案。以下介绍ArrayBuffer的内容我已经过滤了很多细枝末节的理论，希望能做到之前没有这方面基础的同学也可以一次性读懂ArrayBuffer 。
　　Array Buffer 这个概念，大家在日常开发中几乎不会直接接触这个概念，但和我们关系却很密切。
　　简单理解 Array Buffer ，可以说它让EMCAScript操作内存空间成为可能。它的诞生是因为一个项目，WebGL，这个项目里需要浏览器与显卡进行频繁的通信，而以往的文本传输，需要把文本＂hello wrold＂，翻译01010111...类似这样的机器语言，非常消耗性能，而直接以二进制的形式通信就非常有必要了，Array Buffer也就此诞生； const buffer = newArrayBuffer(32);
　　这样创建了一段32字节的内存空间，buffer。有一些约定好的特性，比如生成的 ArrayBuffer ，不能被直接修改，需要通过 TypedArray视图和DataView视图修改，TypedArray就是一系列更改内存的构造函数统称，比如Uint8Array ，Uint16Array ，Uint32Array ，DataView是更灵活的操作ArrayBuffer 的视图。
　　大概是因为最开始设计是为了解决图像绘制的问题，所以就起名叫各种视图，记住就ok了。
　　以下是 TypedArray 视图支持的一些数据类型
　　//生成12字节的内存空间 const buffer = newArrayBuffer(12); //用Int32Array视图读取这个内存空间 const x1 = newInt32Array(buffer); //直接修改 x1[0] = 1;//1 //用Int8Array视图读取这个内存空间 const x2 = newUint8Array(buffer); x2[0]  = 2;//2 //x1的值发生变化 x1[0] // 2
　　上面代码对同一段内存，分别建立两种视图：32 位带符号整数（ Int32Array 构造函数）和 8 位不带符号整数（Uint8Array 构造函数）。由于两个视图对应的是同一段内存，一个视图修改底层内存，会影响到另一个视图。 ArrayBuffer 的一些理解
　　Array Buffer 是一个二进制数组，也可以说是一个构造函数，但本质上是一个由一堆 0 1  组成的缓存空间，他在内存中主要发挥数据缓冲的作用。
　　简单理解就是计算机要运行，就是cpu要处理  0 1  组成的二进制数据，但有时二进制数据来的又快又多，cpu还在处理其他任务，那这些数据就得原地等待，如果cpu处理任务很快，但是数据传输的慢了，就得让cpu空闲等待数据，造成资源浪费，ArrayBuffer就是充当一个缓冲内存空间。让这个内存空间随时数据存在，不会让数据和cpu等待。  ArrayBuffer 遇到的瓶颈
　　现有的 ArrayBuffer 存在一个问题，当你正在的ArrayBuffer 空间不够需要增加空间时，需要调用ArrayBuffer原型上的一个方法，ArrayBuffer.prototype.slice()，使用如下 const buffer = newArrayBuffer(8); const newBuffer = buffer.slice(0, 3);
　　上面代码拷贝buffer对象的前 3 个字节（从 0 开始，到第 3 个字节前面结束），生成一个新的ArrayBuffer对象。
　　slice方法其实包含两步，第一步是先 分配一段新内存 ，第二步是将原来那个ArrayBuffer对象拷贝 过去。
　　这样的方式一次使用尚且可以，但在一些绘图场景下，频繁地创建新内存，再复制一份过去，会大量损耗性能。  改造 ArrayBuffer
　　以上就介绍完了ArrayBuffer，和它目前面临的瓶颈。下面讲一下本次进入stage3的提案。
　　本提案拓展了ArrayBuffer的构造函数，增加最大和最小伸缩长度的配置--- maximumByteLength 。重写了transfer 方法，可以用来直接转移内存空间，不必再复制一份内存再挪动。
　　改造之后的 ArrayBuffer 构造函数 class ArrayBuffer {     //options为配置项      //maximumByteLength 配置内存伸缩长度     constructor(byteLength,[ options ]);          //挪动内存     transfer(newByteLength);          //更改内存长度     resize(newByteLength);          //分离出一个不可调整大小的ArrayBuffer     slice(start, end);          //判断是否可以伸缩     resizable();          //获取配置的最大内存长度     maximumByteLength();          //获取当前内存长度     byteLength(); }
　　使用案例：
　　声明一个 1024字节 的内存，并把最大内存长度设置为 1024的平方  //增加配置项，maximumByteLength，最大内存长度允许到1024的平方 let rab = newArrayBuffer(1024, { maximumByteLength: 1024 ** 2 });  //当前内存长度 1024字节 assert(rab.byteLength === 1024);  //最大长度 1024平方字节 assert(rab.maximumByteLength === 1024 ** 2);  //可以就地更改长度 assert(rab.resizable);  //更改内存长度 rab.resize(rab.byteLength * 2);  //内存长度发生变化 assert(rab.byteLength === 1024 * 2);
　　transfer 是对内存进行挪动 let ab = rab.transfer(1024);
　　上面是挪动从0开始的1024字节  assert(rab.byteLength === 0); assert(rab.maximumByteLength === 0);
　　上面是原来的内存（rab）被分离，并清除内存。  // 内存被转移到ab assert(!ab.resizable); assert(ab.byteLength === 1024);
　　内存成功被转移到ab  SharedArrayBuffer
　　SharedArrayBuffer  顾名思义就是可以共享的ArrayBuffer
　　ArrayBuffer 提案里，将SharedArrayBuffer 也进行了改动，让他支持可以增长内存。
　　先简单介绍下什么是 SharedArrayBuffer 。
　　在EMCAScript里有一些计算任务通常会让在worker线程里，每个worker线程都是互相隔离的，他们之间的通信需要通过postMessage来完成。
　　除了可以进行字符串数外，也可以进行二进制数据通信，但需要将二进制数据复制一份再用过postMessage传递给另一个线程，数据量很大时效率会变低，所以在  es2017  时有人提出了可以共享的 SharedArrayBuffer ，js的主线程和worker线程可以共享这块内存空间，同时进行数据读写，避免了复制二进制数据带来的性能损耗。
　　实际场景里，在主线程创建了一个 SharedArrayBuffer ,并把内存地址通过postMessage 发给worker线程  // 主线程 // 新建 1KB 共享内存 const sharedBuffer = new SharedArrayBuffer(1024); // 主线程将共享内存的地址发送出去 w.postMessage(sharedBuffer);
　　worker线程 接受来自主线程的共享地址  ---- SharedArrayBuffer ，不必再复制同一份二进制地址进行传递。通过共享地址 提高了性能。 // Worker 线程 onmessage = function (ev) {   // 主线程共享的数据，就是 1KB 的共享内存   const sharedBuffer = ev.data;   // 在共享内存上建立视图，方便读写   const sharedArray = newInt32Array(sharedBuffer);   // ... };
　　ArrayBuffer 提案对SharedArrayBuffer 也进行了拓展，允许SharedArrayBuffer 支持增加内存，但与ArrayBuffer 不同的是，不支持减少内存，很显然，如果减少内存的话，很有可能影响到正在共享 这块内存的其他程序。
　　下面是 SharedArrayBuffer 的构造函数。在ArrayBuffer 构造函数里的resize ，这里命名是grow ，也能体现出两者的差异了。 class SharedArrayBuffer {     //和ArrayBuffer一样配置maximumByteLength     constructor(byteLength, [ options ]);          //只能增加内存，而不能缩短内存     grow(newByteLength);          //分离出一份不可增长的 SharedArrayBuffer。     slice(start, end);      //判断是否可以扩充内存     growable();          //获取最大内存长度     maximumByteLength();          //获取当前内存长度     byteLength();   }
　　目前  ArrayBuffer  提案遇到一个阻碍，真实场景中，可能存在多个线程需要扩大内存，按照现在的设计是需要先占用内存，再扩大或缩小至目标内存，但真实场景里，可能存在内存不够的情况，那么会造成资源抢夺。所以如何分配内存资源的问题仍需解决