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 委员会的成员，所以基本还是可信的。至于为什么符合这两个条件就可以看成是类数组对象，我也不知道，谷歌搜了半天也没看到什么合理的解释。

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

赞 (0)

相关推荐

  • javascript检测两个数组是否相似

    JS要比较两个数组是否有相同的元素,即两个数组所有元素都相同,但元素的顺序不一定一致.只就需要先将数组进行排序,再比较两个数组是否相等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

  • javascript数组去重方法汇总

    javascript数组去重方法汇总 Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i++) //遍历当前数组 { //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面 if (n.indexOf(this[i]) == -1) n.push(this[i]); } return n; }; Array.pro

  • JavaScript获取两个数组交集的方法

    本文实例讲述了JavaScript获取两个数组交集的方法.分享给大家供大家参考.具体如下: 这里传入的数组必须是已经排过序的 /* finds the intersection of * two arrays in a simple fashion. * * PARAMS * a - first array, must already be sorted * b - second array, must already be sorted * * NOTES * * Should have O(

  • JavaScript数组迭代器实例分析

    本文实例讲述了JavaScript数组迭代器用法.分享给大家供大家参考.具体如下: 这里注意:如果数组中有0.false."".null.NaN迭代器将会停止 function createIterator(x) { var i = 0; return function(){ return x[i++]; }; } var iterator=createIterator(['a','b','c','d','e','f','g']); var current; while(current

  • JavaScript获取数组最小值和最大值的方法

    本文实例讲述了JavaScript获取数组最小值和最大值的方法.分享给大家供大家参考.具体如下: var arr = new Array(); arr[0] = 100; arr[1] = 0; arr[2] = 50; var min = Math.min.apply(null, arr), max = Math.max.apply(null, arr); 以下是补充: var a=[1,2,3,5]; alert(Math.max.apply(null, a));//最大值 alert(Ma

  • 浅谈JavaScript字符串与数组

    JavaScript字符串 字符串是一系列字符的集合,包括英文字母.标点符号.特殊符号.汉字等. 在JavaScript中,字符串可以使用双引号(" ")或单引号(' ')来表示. 双引号和单引号必须成对出现,双引号里面可以包含单引号,单引号里面也可以包含双引号. 例如: 复制代码 代码如下: var myStr1=" My name is ' xiaohua ' ! ";  var myStr2=' " This is my dream ! "

  • javascript的原生方法获取数组中的最大(最小)值

    获取一个数组中的最大(最小)值的最简单的方法,就是对数组进行一次遍历,通过比较,找到其最大(最小)值.但是其实在javascript的原生方法中,已经提供了一些快捷方法,可以实现此功能. 1 Array.prototype.sort 复制代码 代码如下: var a = [7,3,4,6,10]; a.sort(function(a,b){ return (a-b);}) 注意,sort里的比较函数是一定要传入的,如果不传此函数的话,a.sort()的结果是[10,3,4,6,7]; 2 Mat

  • javascript字符串与数组转换汇总

    数组转字符串 1.join()方法 var s= ["a", "d", "a", "f", "g", "f", "s", "g"]; s.join() //"a,d,a,f,g,f,s,g" s.join(" ") //"a d a f g f s g" s.join(''); //ada

  • JavaScript 里的类数组对象

    很早以前我就知道可以把 arguments 转化为数组:[].slice.call(arguments),因为 arguments 是个类数组对象,所以才可以这么用.但是我一直不清楚什么叫做类数组对象( array-like objects) 今天看 Effective JavaScript 就有一节是专门讲这个的,感觉真是太拽了. 先看我写的一些示例代码: 复制代码 代码如下: a = "hello" [].map.call(a, (e) -> e.toUpperCase())

  • JavaScript中的类数组对象介绍

    JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法.而对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为"类数组对象".以下是一个简单的类数组对象: 复制代码 代码如下: var o = {0:42,

  • JavaScript类数组对象转换为数组对象的方法实例分析

    本文实例分析了JavaScript类数组对象转换为数组对象的方法.分享给大家供大家参考,具体如下: 1.类数组对象: 拥有length属性,可以通过下标访问: 不具有数组所具有的方法. 2.为什么要将类数组对象转换为数组对象? 数组对象Array有很多方法:shift.unshift.splice.slice.concat.reverse.sort,ES6又新增了一些方法:forEach.isArray.indexOf.lastIndexOf.every.some.map.filter.redu

  • JavaScript详解类数组与可迭代对象的实现原理

    JavaScript详解类数组与可迭代对象的实现原理

    目录 可迭代对象(Iterable object) Symbol.iterator 把对象本身构造成迭代器 String也是可迭代的 String的迭代器 类数组对象和可迭代对象 Array.from 总结 可迭代对象(Iterable object) 数组是一个特殊的对象,它和普通对象的区别不仅仅在于元素的顺序访问.存储.另外一个重要的区别是:数组是可迭代的,也就是可以使用for ... of语句访问(迭代)所有的元素. 我们可以简单的做一个小实验: let arr = [1,2,3,4,5]

  • js 用于检测类数组对象的函数方法

    如下所示: //判定o是否是一个类数组对象 //字符串和函数有length属性,但是它们 //可以用typeof检测将其排除.在客户端JavaScript中,DOM文本节点 //也有length属性,需要用额外判断o.nodeType!=3将其排除 function isArrayLike(o){ if(o&&//o非null/undefined等 typeof o==="object"&&//o是对象 isFinite(o.length)&&a

  • javaScript中定义类或对象的五种方式总结

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Object; oTempCar.color = sColor; oTempCar.showColor = function (){ alert(this.color); }; return oTempCar; } var oCar1 = createCar(); var oCar2 = createCa

  • Javascript中的Array数组对象详谈

    首先数组的定义以及初始化的方法: var myArray = new Array(1,3.1415,"love"); //这里注意myArray数组中的元素不只是同一种数据类型的元素,可以有整形,有浮点型,有字符串等等都可以.这里充分展示了javascript作为一种语言对数据类型的弱化,语言更加的随意化,简便化.就行定义对象的时候用var一样. 在此介绍的有限,同时有一些我没有给出结果,希望大家自己体会,自己动手尝试一下,看看结果到底是什么,这样有助于记忆.以下带[]是可以省去的参数

  • js将类数组对象转换成数组对象

    在标准浏览器中,好像只要对象存在length属性,就能把它转换为数组,但IE就不尽然. //※※※※※※※※※※※测试1※※※※※※※※※※※※※※ function test(){ alert(arguments) arguments = Array.prototype.slice.call(arguments); alert(arguments instanceof Array); alert(arguments) } test(1,2,3,4); //※※※※※※※※※※※测试2※※※※※

  • JavaScript中arguments和this对象用法分析

    本文实例讲述了JavaScript中arguments和this对象用法.分享给大家供大家参考,具体如下: 在函数内部有两个特殊的对象 : arguments和this. 1.arguments对象 js函数不介意定义多少参数,也不在乎传递进来多少参数,也就是说,即使定义的函数只接收2个参数,在调用时候也未必传递2个参数,因为js的函数参数在内部使用一个数组表示的,在函数体内可以通过arguments对象访问此参数数组.因此,js函数可以不显式地使用命名参数. 当函数被调用时,传入的参数将保存在

  • 浅析JavaScript中的array数组类型系统

    前面的话 数组是一组按序排列的值,相对地,对象的属性名称是无序的.从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名.javascript没有真正的关联数组,但对象可用于实现关联的功能 Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例.数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的 除了对象之外,数组Array类型可能是javascript中最常用的类型了.而且,javasc

随机推荐