[Effective JavaScript 笔记]第51条:在类数组对象上复用通用的数组方法

前面有几条都讲过关于Array.prototype的标准方法。这些标准方法被设计成其他对象可复用的方法,即使这些对象并没有继承Array。

arguments对象

在22条中提到的函数arguments对象。它是一个类数组对象,并不是一个标准的数组,所以无法使用数组原型中的方法,因此无法使用arguments.forEach这样的形式来遍历每一个参数。这里我们必须使用call方法来对使用forEach方法。

function highlight(){
  [].forEach.call(arguments,function(widget){
     widget.setBackground(‘yellow‘);
  });
}

forEach是一个函数对象,所以它继承了Function.prototype对象中的call方法。这里就可以使用一个指定的对象作为函数内部this的绑定对象来调用它,并紧随任意数量的参数。
## NodeList对象
在Web平台,DOM的NodeList类是另一个类数组对象。类似的document.getElementsByTagName会返回一个NodeList类数组对象。这个对象也没有继承自Array.prototype.

类数组对象

怎样构建一个类数组对象?

  • 具有一个范围在0到2^32-1的整形length属性

  • length属性大于该对象的最大索引。索引是一个范围在0到2^32-1的整数,它的字符串表示是该对象中的一个key
    实现上面这两点,就可以使一个对象与Array.prototype中任一方法兼容。
    一个简单的对象字面量也可以用来创建一个类数组对象。
var arrayLike={0:‘a‘,1:‘b‘,2:‘c‘,length:3};
var res=Array.prototype.map.call(arrayLike,function(s){
    return s.toUpperCase();
});
res;//[‘A‘,‘B‘,‘C‘]

字符串

也是可以表现为数组,因为它们是可索引,并且其长度也可以通过length属性获取。
因此,Array.protoype中的方法操作字符串时并不会修改原始字符串。

var res=Array.prototype.map.call(‘abc‘,function(s){return s.toUpperCase();});
res;//[‘A‘,‘B‘,‘C‘]

模拟数组

模拟数组的所有行为,归功于数组行为的两方面:

  • 将length属性值设为小于n的值会自动地删除索引值大于或等于n的所有属性

  • 增加一个索引值为n(大于或等于length属性值)的属性会自动地设置length属性为n+1
    其中第2条规则不好实现,因为需要监控索引属性的增加以自动地更新length属性。
    对于Array.prototype中的方法,这两条都不是必须的,因为在增加或删除索引属性的时候它们都会强制地更新length属性。
    Array方法中只有一个不是通用的,即数组连接方法concat。该方法可以由任意的类数组接收者调用,但它会检查其参数[[Class]]属性。如果参数是一个真实的数组,那么concat会将该数组的内容连接起来作为结果;否则,参数将以一个单一的元素来连接。
    例如,不能简单地连接一个以arguments对象作为内容的数组。
function namesColumn(){
  return [‘Names‘].concat(arguments);
}
namesColumn(‘张三‘,‘李四‘,‘王五‘);//["Names", Arguments[3]0: "张三"1: "李四"2: "王五"callee: namesColumn()length: 3Symbol(Symbol.iterator): values()__proto__: Object]

使concat方法将一个类数组对象视为真实数组,需要把类数组转换为真正的数组。使用slice对类数组对象进行转换。

function namesColumn(){
  return [‘Names‘].concat([].slice.call(arguments));
}
namesColumn(‘张三‘,‘李四‘,‘王五‘);//["Names", "张三", "李四", "王五"]

提示

  • 对于类数组对象,通过提取方法对象并使用其call方法来复用通用的Array方法

  • 任意一个具有索引属性和恰当length属性的对象都可以使用通用的Array方法
时间: 2024-10-24 20:47:04

[Effective JavaScript 笔记]第51条:在类数组对象上复用通用的数组方法的相关文章

[Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+1}" 反射获取函数源代码的功能很强大,使用函数对象的toString方法有严重的局限性.toString方法的局限性ECMAScript标准对函数对象的toString方法的返回结果(即该字符串)并没有任何要求.这意味着不同的js引擎将产生不同的字符串,甚至产生的字符串与该函数并不相关. 如果函数

[Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码

函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式传递给eval函数以达到同样的功能.程序员面临一个选择:应该将代码表示为函数还是字符串?毫无疑问,应该将代码表示为函数.字符串表示代码不够灵活的一个重要原因是:它们不是闭包. 闭包回顾 看下面这个图 js的函数值包含了比调用它们时执行所需要的代码还要多的信息.而且js函数值还在内部存储它们可能会引用

[Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //"number" typeof "s";//"string" typeof null;//"object":ECMAScript把null描述为独特的类型,但返回值却是对象类型,有点困惑. 可以使用Object.prototype.t

[Effective JavaScript 笔记]第58条:区分数组对象和类数组对象

示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bits.bitAt(4);//1 bits.bitAt(8);//1 bits.bitAt(9);//0 enable方法被重载了,可以传入一个索引或索引的数组.第二个类的API是字符串集合:无序的字符串集合 var set=new StringSet(); set.add('Hamlet'); se

[Effective JavaScript 笔记]第60条:支持方法链

无状态的API的部分能力是将复杂操作分解为更小的操作的灵活性.一个很好的例子是字符串的replace方法.由于结果本身也是字符串,可以对前一个replace操作重复执行替换.这种模式的一个常见用例是在将字符串插入到HTML前替换字符串的特殊字符字母. function escapeBasicHTML(str){ return str.replace(/&/g,"&") .replace(/< /g,"<") .replace(/>/

[Effective JavaScript 笔记]第68条:使用promise模式清洁异步逻辑

构建异步API的一种流行的替代方式是使用promise(有时也被称为deferred或future)模式.已经在本章讨论过的异步API使用回调函数作为参数. downloadAsync('file.txt',function(file){ console.log('file:'+file); }); 基于promise的API不接收回调函数作为参数.相反,它返回一个promise对象,该对象通过其自身的then方法接收回调函数. var p=downloadP('file.txt'); p.th

[Effective JavaScript 笔记]第48条:避免在枚举期间修改对象

注册列表示例 一个社交网络有一组成员,每个成员有一个存储其朋友信息的注册列表. function Member(name){ this.name=name; this.friends=[]; } var a=new Member('钟二'), b=new Member('张三'), c=new Member('赵四'), d=new Member('王五'), e=new Member('阮六'), f=new Member('耿七'); a.friends.push(b); b.friends

[Effective JavaScript 笔记]第37条:认识到this变量的隐式绑定问题

CSVReader示例 需求 CSV(逗号分隔型取值)文件格式是一种表格数据的简单文本表示 张三,1982,北京,中国 小森,1982,东京,日本 吉姆,1958,纽约,美国 现需要编写一个简单的.可定制的读取CSV数据的类.这里的分隔符是基于逗号的,但也可以处理一些其它字符作为分隔符. 分析 构造函数需要一个可选的分隔器字符数组并构造出一个自定义的正则表达式以将每一行分成不同的条目. function CSVReader(separators){ this.separators=separat

[Effective JavaScript 笔记]第30条:理解prototype、getPrototypeOf和__ptoto__之间的不同

原型包括三个独立但相关的访问器.这三个单词都是对单词prototype做了一些变化. C.prototype用于建立由new C()创建的对象的原型 Object.getPrototypeOf(obj)是ES5中用来获取obj对象的原型对象的标准方法 obj.__proto__是获取obj对象的原型对象的非标准方法 一个例子 要理解这些访问器,我们拿一个典型的js数据类型作例子.假设User构造函数需要通过new操作符来调用.它需要两个参数,即姓名和密码的哈希值,并将它们存储在创建的对象中.代码