javascript 类数组对象
2015-12-29 15:22
666 查看
参考自: https://github.com/justjavac/12-javascript-quirks/blob/master/cn/8-array-like-objects.md
简单来说: 具有length属性并且可以通过数字下标方式访问属性的对象就是类数组对象, 它不一定具有数组的方法( 你可以用 Object.getOwnPropertyNames(Array.prototype) 来看一个对象默认有哪些方法 ).
<<>javascript权威指南>> 中判断类数组对象的一个方法:
哪里会用常到类数组对象:
1. arguments 就是类数组对象
2. DOM( 用来操作XML,HTML的API ) 操作的返回值(i.e. document.getElementsByClassName() ) 通常就是类数组对象
怎么创建一个类数组对象? 在这个之前先要了解方法借用.
方法借用: 每个函数 myfunc 都有一个 call 的属性(也是一个函数), 可以从下面打印出 Function.prototype 的所有属性来看:
fun.call(thisArg[, arg1[, arg2[, ...]]]) 中有一个thisArg 让你自己选择调用这个myfunc 的对象(this), 这样就能把 myfunc "借" 出去. 那么其他对象如果能用这个方法, 就可以借来用. ----- 这样 myfyunc 就变成了一个通用方法.
所以你可以这样使用:
f 是一个普通的方法, 但是可以把它当成对象 o 的方法来使用. 当然 如果 f 是其他某个对象的方法也没问题( 如: Array.prototype.slice() )
好了, 这样我们就可以从一个对象开始创建类数组对象 --- 只要让它变得有 length 属性 和 可以数字下标访问即可:
这样我们就将 obj 变成了一个类数组对象, 输出 obj 可以看到: Object {0: "a", 1: "b", length: 2} , 添加元素时, 自动创建了数字下标 和 length属性(自动初始化为0 并自动管理).
但是记住这个obj 仍然是一个对象, 它没有实现数组的其他方法, 使用 Array,isArray(obj) 会得到 false , 很多情况下这样够我们用了!
不过, 如果你觉得数组的其他操作也是需要的, 那么, 你可以进一步将 obj 转化为数组: obj = Array.prototype.slice.call(obj); 这样, Array,isArray(obj) 就得到 true 了!
简单来说: 具有length属性并且可以通过数字下标方式访问属性的对象就是类数组对象, 它不一定具有数组的方法( 你可以用 Object.getOwnPropertyNames(Array.prototype) 来看一个对象默认有哪些方法 ).
<<>javascript权威指南>> 中判断类数组对象的一个方法:
// Determine if o is an array-like object. // Strings and functions have numeric length properties, but are // excluded by the typeof test. In client-side JavaScript, DOM text // nodes have a numeric length property, and may need to be excluded // with an additional o.nodeType != 3 (text node type) test. function isArrayLike(o) { if (o && // o is not null, undefined, etc. typeof o === 'object' && // o is an object isFinite(o.length) && // o.length is a finite number o.length >= 0 && // o.length is non-negative o.length===Math.floor(o.length) && // o.length is an integer o.length < 4294967296) // o.length < 2^32 return true; // Then o is array-like else return false; // Otherwise it is not }
哪里会用常到类数组对象:
1. arguments 就是类数组对象
2. DOM( 用来操作XML,HTML的API ) 操作的返回值(i.e. document.getElementsByClassName() ) 通常就是类数组对象
怎么创建一个类数组对象? 在这个之前先要了解方法借用.
方法借用: 每个函数 myfunc 都有一个 call 的属性(也是一个函数), 可以从下面打印出 Function.prototype 的所有属性来看:
console.log(Object.getOwnPropertyNames(Function.prototype)); //["length", "name", "arguments", "caller", "constructor", "bind", "toString", "call", "apply"]
fun.call(thisArg[, arg1[, arg2[, ...]]]) 中有一个thisArg 让你自己选择调用这个myfunc 的对象(this), 这样就能把 myfunc "借" 出去. 那么其他对象如果能用这个方法, 就可以借来用. ----- 这样 myfyunc 就变成了一个通用方法.
所以你可以这样使用:
var o = { name : "roger", age : 21 } function f(){ for(var p in this){ console.log(o[p]); } } f.call(o);
f 是一个普通的方法, 但是可以把它当成对象 o 的方法来使用. 当然 如果 f 是其他某个对象的方法也没问题( 如: Array.prototype.slice() )
好了, 这样我们就可以从一个对象开始创建类数组对象 --- 只要让它变得有 length 属性 和 可以数字下标访问即可:
var obj = {}; // 首先创建一个对象 Array.prototype.push.call(obj,'a','b'); // 借用数组的方法往对象里面添加元素
这样我们就将 obj 变成了一个类数组对象, 输出 obj 可以看到: Object {0: "a", 1: "b", length: 2} , 添加元素时, 自动创建了数字下标 和 length属性(自动初始化为0 并自动管理).
但是记住这个obj 仍然是一个对象, 它没有实现数组的其他方法, 使用 Array,isArray(obj) 会得到 false , 很多情况下这样够我们用了!
不过, 如果你觉得数组的其他操作也是需要的, 那么, 你可以进一步将 obj 转化为数组: obj = Array.prototype.slice.call(obj); 这样, Array,isArray(obj) 就得到 true 了!
相关文章推荐
- js点击 密码输入框密码显示隐藏
- 学习记录:浏览器JAVASCRIPT里的WINDOWS,DOCUMNET
- 区分javascript中的toString(),toLocaleString(),valueOf()方法
- JSON 数据格式
- JavaScript 函数惰性载入
- js获取及修改网页背景色和字体色的方法
- Javascript高级程序设计笔记 <第五章> 引用类型
- html中JavaScript实现两个子节点互换
- FastJSON 简介及其Map/JSON/String 互转
- js嵌套轮播图
- 深入理解javascript之闭包
- json
- JavaScript Prototype介绍
- JavaScript 之 弹出窗口总结
- 深入理解JavaScript系列文章集锦
- json基本概念
- Servlet&jsp
- JS内置对象、函数
- json对象
- Sencha cmd 5.1 生成EXTJS项目