JS即将发布数组的4个新特性，学会了拿去吹牛

本文作者是360集团导航事业部资深开发工程师

新特性总览：

• at(): 数组支持索引查询

• Array Group: 数组元素分类；

• Array find from last: 数组逆向查询

• Resizable and growable Array Buffer: Array Buffer支持大小伸缩

在开始之前，简单描述下事情的来龙去脉。

这些新特性被TC39组织纳入了  stage3  和  stage4  状态，TC39简单说就是一个推进EMCAScript（俗称JS）语言进步的一个官方组织。一些优秀提案，比如Promise，箭头函数等等都是出自该组织。360集团作为TC39成员之一，正参与该项EMCAScript语言推进活动，所以在这里给各位分享一下最新的语言特性；最后解释一下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]}