JavaScript 里的类数组对象

 更新时间:2015年04月08日 11:35:48   投稿:hebedich  
这篇文章主要介绍了JavaScript 里的类数组对象的相关资料,需要的朋友可以参考下

很早以前我就知道可以把 arguments 转化为数组:[].slice.call(arguments),因为
arguments 是个类数组对象,所以才可以这么用。但是我一直不清楚什么叫做类数组对象( array-like objects)

今天看 Effective JavaScript 就有一节是专门讲这个的,感觉真是太拽了。

先看我写的一些示例代码:

复制代码 代码如下:

a = "hello"
[].map.call(a, (e) -> e.toUpperCase()) # => [ 'H', 'E', 'L', 'L', 'O' ]
[].reduceRight.call(a, (acc, e) -> acc + e) # => 'olleh'
b = {1: "a", 2: "b", 4: "c", length: 6}
[].reduce.call(b, (acc, e) -> acc + e) # => 'abc'

前面那几个是操作字符串的,嗯,字符串也可以看成类数组对象。但是后面那个 b 对象居然
也是类数组对象。

看书上的解释:

复制代码 代码如下:

So what exactly makes an object “array-like”? The basic contract of
an array object amounts to two simple rules.
It has an integer length property in the range 0...2^32 – 1.
The length property is greater than the largest index of the object.
An index is an integer in the range 0...2^32 – 2 whose string representation
is the key of a property of the object.

居然只有这两条简单的规则。

所以为什么 arguments, 字符串,和上面那个 b 对象可以看作类数组对象呢?

它们都有一个合法的 length 属性(0 到 2**32 - 1 之间的正整数)。
length 属性的值大于它们的最大索引(index)。
再举个例子:

复制代码 代码如下:

b = {1: "a", 2: "b", 4: "c", length: 3}
[].reduce.call(b, (acc, e) -> acc + e) # => 'ab'

嗯,就不对了,成了'ab' 了,因为违反了规则2:length 属性是3,
最大索引值是4要比 length 属性大了。所以表现的不正常了。

太强大了,好像只是定义了一个接口,只要符合这个接口,就可以利用数组的所有方法。

其实不是可以利用所有方法,Array.prototype.concat
是不能用的,因为它是把两个数组连接起来,你不是数组肯定是没法用它的。

还有一个小问题是,字符串创建以后是不可变的(immutable),所以你怎么折腾它都是不可变的。

但是这本书根本就没有解释为什么是符合这两个条件就可以看成类数组对象,另外这本书的作者
是那个什么 ECMAScript 委员会的成员,所以基本还是可信的。至于为什么符合这两个条件就可以看成是类数组对象,我也不知道,谷歌搜了半天也没看到什么合理的解释。

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • 浅谈Redux中间件的实践

    浅谈Redux中间件的实践

    这篇文章主要介绍了浅谈Redux中间件的实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 移动端web滚动分页的实现方法

    移动端web滚动分页的实现方法

    这篇文章主要为大家详细介绍了移动端web滚动分页的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 结合 ES6 类编写JavaScript 创建型模式

    结合 ES6 类编写JavaScript 创建型模式

    这篇文章主要介绍了结合ES6类编写JavaScript创建型模式,本文开始系统性的对20多种JavaScript 设计模式进行简单概述,然后结合ES6类的方式来编写实例代码展示其使用方式,需要的朋友可以参考一下
    2022-07-07
  • js Canvas实现圆形时钟教程

    js Canvas实现圆形时钟教程

    这篇文章主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 用Javascript来生成ftp脚本的小例子

    用Javascript来生成ftp脚本的小例子

    昨天闲着没事,又因为工作需要,写了一个脚本,用来做ftp。当然不是直接做ftp,而是产生一个ftp的脚本,供ftp命令使用。
    2013-07-07
  • javascript学习小结之prototype

    javascript学习小结之prototype

    本系列博文主要谈一些在 javascript 使用中经常会混淆的高级应用,包括: prototype, closure, scope, this关键字. 对于一个需要提高自己javascript水平的程序员,这些都是必须要掌握的,本节主要介绍prototype.
    2015-12-12
  • JavaScript实现无缝轮播图的示例代码

    JavaScript实现无缝轮播图的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript语言实现无缝轮播功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 浅谈webpack 四个核心概念之Entry

    浅谈webpack 四个核心概念之Entry

    这篇文章主要介绍了浅谈webpack 四个核心概念之Entry,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • JavaScript中的继承之类继承

    JavaScript中的继承之类继承

    在JS中继承是一个非常复杂的话题,比其他任何面向对象语言中的继承都复杂得多。接下来通过本文给大家介绍JavaScript中的继承之类继承,感兴趣的朋友一起看看吧
    2016-05-05
  • javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现

    javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现

    首先来说,我对游戏开发可以算是不怎么深入,因为现在的程序员爱用canvas,我却就只会拿几个div凑和。不过没关系,因为做出来的同样是游戏。哈!废话最近有点多,感兴趣的朋友可以了解下
    2013-01-01

最新评论