ECMAScript 6即将带给我们新的数组操作方法前瞻


Posted in Javascript onJanuary 06, 2015

本文介绍ECMAScript 6即将带给我们新的数组操作方法,以及在怎样在现有浏览器应用这些新的数组特性。

Note: 我将使用交替使用构造器(constructor)和类(class)两个术语。

类方法
数组(Array)自身所拥有的方法。

Array.from(arrayLike, mapFunc?, thisArg?)

Array.from()的基本功能是,转换两种类型的对象成数组。

类数组对象(Array-like objects)

该类对象有长度与索引的属性。DOM操作符的结果即属于该类,如document.getElementsByClassName()。

可迭代对象(Iterable objects)

这类对象在取值时,每次只能取一个元素。数组是可迭代的,就如ECMAScript中新的数组结构,映射(Map)和集(Set)。

以下代码是一个转换类数组对象到数组的一个示例:

let lis = document.querySelectorAll('ul.fancy li');

Array.from(lis).forEach(function (li) {

  console.log(node);

});

querySelectorAll()的结果不是一个数组,也不会有forEach()这个方法。这是我们需要在使用这个方法之前,将它转换成数组的原因。

通过Array.from()使用Mapping
Array.from()同样也是一个泛型使用map()的替代选择。

let spans = document.querySelectorAll('span.name');

// map(), generically:

let names1 = Array.prototype.map.call(spans, s => s.textContent);

// Array.from():

let names2 = Array.from(spans, s => s.textContent);

两个方法中的第二个参数,都是箭头函数(arrow function)。
在这个示例中,document.querySelectorAll()的结果又是一个类数组对象,而非数组。这就是我们不能直接调用map()的原因。第一个示例中,为了使用forEach(),我们将类数组对象转换成了数组。这里我们通过泛型方法和两个参数版本的Array.from(),而省去了中间步骤。

Holes
Array.from()会忽略数组里缺失的元素 - 洞(holes),它会以未定义的元素(undefined elements)进行对待。

> Array.from([0,,2])

[ 0, undefined, 2 ]

这就意味着,你可以使用Array.from()来创建或者填充一个数组:

> Array.from(new Array(5), () => 'a')

[ 'a', 'a', 'a', 'a', 'a' ]

> Array.from(new Array(5), (x,i) => i)

[ 0, 1, 2, 3, 4 ]

如果你想用一个固定的值去填充一个数组,那么Array.prototype.fill()(请看下文)将是一个更好的选择。第一个即是以上示例的两种方式。

在数组(Array)子类中的from()
另一个Array.from()的使用场景是,转换类数组对象或可迭代对象到一个数组(Array)子类的一个实例。如你创建了一个Array的子类MyArray,想将此类对象转化成MyArray的一个实例,你就可以简单地使用MyArray.from()。可以这样使用的原因是,在ECMAScript 6中构造器(constructors)会继承下去(父类构造器是它子类构造器的原型(prototype))。

class MyArray extends Array {

  ...

}

let instanceOfMyArray = MyArray.from(anIterable);

你可以将该功能与映射(mapping)结合起来,在一个你控制结果构造器的地方完成映射操作(map operation):

// from() ? determine the result's constructor via the receiver

// (in this case, MyArray)

let instanceOfMyArray = MyArray.from([1, 2, 3], x => x * x);

// map(): the result is always an instance of Array

let instanceOfArray   = [1, 2, 3].map(x => x * x);

Array.of(...items)

如果你想将一组值转换成一个数组,你应该使用数组源文本(array literal)。特别是只有一个值且还是数字的时候,数组的构造器便罢工了。更多信息请参考。

> new Array(3, 11, 8)

[ 3, 11, 8 ]

> new Array(3)

[ , ,  ,]

> new Array(3.1)

RangeError: Invalid array length

便如果要将一组值转换成数字子构造器(sub-constructor)的一个实例,我们应该怎么做呢?这就是Array.of()存在的价值(记住,数组子构造器会继承所有的数组方法,当然也包括of())。

class MyArray extends Array {

  ...

}

console.log(MyArray.of(3, 11, 8) instanceof MyArray); // true

console.log(MyArray.of(3).length === 1); // true

把值包裹嵌套在数组里,Array.of()会相当方便,而不会有Array()一样怪异的处理方式。但也要注意Array.prototype.map(),此处有坑:

> ['a', 'b'].map(Array.of)

[ [ 'a', 0, [ 'a', 'b' ] ],

[ 'b', 1, [ 'a', 'b' ] ] ]

> ['a', 'b'].map(x => Array.of(x)) // better

[ [ 'a' ], [ 'b' ] ]

> ['a', 'b'].map(x => [x]) // best (in this case)

[ [ 'a' ], [ 'b' ] ]

如你所看,map()会传递三个参数到它的回调里面。最后两个又是经常被忽略的(详细)。

原型方法(Prototype methods)
数组的实例会有很多新的方法可用。

数组里的迭代(Iterating over arrays)

以下的方法,会帮助完成在数组里的迭代:

Array.prototype.entries()

Array.prototype.keys()

Array.prototype.values()

以上的每一个方法都会返回一串值,却不会作为一个数组返回。它们会通过迭代器,一个接一个的显示。让我们看一个示例(我将使用Array.from()将迭代器的内容放在数组中):

> Array.from([ 'a', 'b' ].keys())

[ 0, 1 ]

> Array.from([ 'a', 'b' ].values())

[ 'a', 'b' ]

> Array.from([ 'a', 'b' ].entries())

[ [ 0, 'a' ],

[ 1, 'b' ] ]

你可以结合entries()和ECMAScript 6中的for-of循环,方便地将迭代对象拆解成key-value对:

for (let [index, elem] of ['a', 'b'].entries()) {

  console.log(index, elem);

}

Note: 这段代码已经可以在最新的Firefox浏览器里运行了。t Firefox.

查找数组元素

Array.prototype.find(predicate, thisArg?) 会返回满足回调函数的第一个元素。如果没有任何一个元素满足条件,它会返回undefined。比如:

> [6, -5, 8].find(x => x < 0)

-5

> [6, 5, 8].find(x => x < 0)

undefined

Array.prototype.findIndex(predicate, thisArg?)

会返回满足回调函数的第一个元素的索引。如果找不任何满足的元素,则返回-1。比如:

> [6, -5, 8].findIndex(x => x < 0)

1

> [6, 5, 8].findIndex(x => x < 0)

-1

两个find*方法都会忽略洞(holes),即不会关注undefined的元素。回调的完成函数签名是:

predicate(element, index, array)
通过findIndex()找NaN

Array.prototype.indexOf()有一个大家所熟知的限制,那就是不能查找NaN。因为它用恒等(===)查找匹配元素:

> [NaN].indexOf(NaN)

-1

使用findIndex(),你就可以使用Object.is(),这就不会产生这样的问题:

> [NaN].findIndex(y => Object.is(NaN, y))

0

你同样也可以采用更通用的方式,创建一个帮助函数elemIs():

> function elemIs(x) { return Object.is.bind(Object, x) }

> [NaN].findIndex(elemIs(NaN))

0

Array.prototype.fill(value, start?, end?)

用所给的数值,填充一个数组:

> ['a', 'b', 'c'].fill(7)

[ 7, 7, 7 ]

洞(Holes)也不会有任何的特殊对待:

> new Array(3).fill(7)

[ 7, 7, 7 ]

你也可以限制你填充的起始与结束:

> ['a', 'b', 'c'].fill(7, 1, 2)

[ 'a', 7, 'c' ]

什么时候可以使用新的数组方法?
有一些方法已经可以在浏览器里使用了。

Javascript 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
会自动逐行上升的文本框
Jun 30 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
js图片切换具体实现代码
Oct 13 Javascript
如何提高数据访问速度
Dec 26 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
jQuery中hasClass()方法用法实例
Jan 06 #Javascript
jQuery中last()方法用法实例
Jan 06 #Javascript
jQuery中first()方法用法实例
Jan 06 #Javascript
jquery解决客户端跨域访问问题
Jan 06 #Javascript
angular.foreach 循环方法使用指南
Jan 06 #Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 #Javascript
json实现前后台的相互传值详解
Jan 05 #Javascript
You might like
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
基于JavaScript实现随机点名器
2021/02/25 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Django 拆分model和view的实现方法
2019/08/16 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
软件设计的目标是什么
2016/12/04 面试题
深圳茁壮笔试题
2015/05/28 面试题
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
JavaScript 原型与原型链详情
2021/11/02 Javascript