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 提案遇到一个阻碍,真实场景中,可能存在多个线程需要扩大内存,按照现在的设计是需要先占用内存,再扩大或缩小至目标内存,但真实场景里,可能存在内存不够的情况,那么会造成资源抢夺。所以如何分配内存资源的问题仍需解决