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

本文介绍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' ]

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

时间: 2024-10-18 07:13:11

ECMAScript 6即将带给我们新的数组操作方法前瞻_javascript技巧的相关文章

向当前style sheet中插入一个新的style实现方法_javascript技巧

很少会插入一个新的style rule,今天为了临时解决页面样式问题,需要更新很多页面的一些样式,这些页面都引用了一个公共的js,为了方便,直接在这个公共的js里面向style sheet插入新的style rule. 先看代码: 复制代码 代码如下: /** * Add a stylesheet rule to the document (may be better practice, however, * to dynamically change classes, so style inf

js+csss实现的一个带复选框的下拉框_javascript技巧

效果图: css: <style type="text/css"> /* 带复选框的下拉框 */ ul li{ list-style: none; padding:0px; margin: 0px; } .select_checkBox{ border:0px solid red; position: relative; display:inline-block; } .chartQuota{ height:23px; float:left; display:inline-

json数据处理技巧(字段带空格、增加字段、排序等等)_javascript技巧

1.json数据的正常取值:json[i].fieldName 2.json数据的字段带空格:eval('json[' + i + ']["' + field + '"]') 3.json数据的赋值:eval('json[' + i + ']["' + field + '"]=' + jsonFilter.length); 4.json数据增加字段:循环所有数据,直接json[i].newField=defaultValue就可以了 5.json数据的排序:相当于数

Javascript控制页面链接在新窗口打开具体方法_javascript技巧

第一个方法就是用jquery实现,原理是这样的先找到站点中的外部链接,然后再给链接加上target=_blank"属性就搞定了,代码如下:jquery在新窗口打开  复制代码 代码如下: $("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])").addClass(

JS实现兼容性好,带缓冲的动感网页右键菜单效果_javascript技巧

本文实例讲述了JS实现兼容性好,带缓冲的动感网页右键菜单效果.分享给大家供大家参考.具体如下: 这是一款兼容好带缓冲的动感网页右键菜单,应该来说做的非常棒,完全JavaScript的实现,我觉得挺不错,感谢作者. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dg-right-button-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

Bootstrap实现带暂停功能的轮播组件(推荐)_javascript技巧

最近博主在项目中用到一款轮播组件,功能齐全,可以设置各种标题样式.动画效果.轮播时间.开始暂停等功能,在此推荐给大家,供大家参考. 一.效果展示 多说无益,来看一组效果展示图,感受一下! 1.先跟大家见个面,打个招呼 2.什么?切换太慢了?好,加快速度! 3.加入其他功能 4.图片太小,看不出效果?好,那来个大图感受下! 5.如果你不想要右上角的小图标,照样可以. 6.如果你对上述滑动效果不满意,组件提供了其他几种图片切换方式 淡入淡出 水平滑动 7.再来一张图片定位 二.组件介绍 Orbit是

JS实现向表格行添加新单元格的方法_javascript技巧

本文实例讲述了JS实现向表格行添加新单元格的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以想表格中指定id的行插入新的单元格 <!DOCTYPE html> <html> <head> <script> function insCell() { var x=document.getElementById('tr1').insertCell(0); x.innerHTML="The famous"; } </script&

js点击按钮实现带遮罩层的弹出视频效果_javascript技巧

本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="

JavaScript实战之带收放动画效果的导航菜单_javascript技巧

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! 今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-))  ( 由于在写本文时,用的编辑器不同,暂时添加不了演示效果,这里有:最终完整代码和演示 )  动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到'首页导航',显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果!而且,可以随便添加和删除导航菜单和子菜单,