前言

关于什么是js的类数组对象这里不再赘述。可以参考这个链接,还有这里

js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法。

例: arguments , NodeList , HTMLCollection , jQuery 等

类数组对象特性

1、拥有 length 属性

var a=document.getElementsByTagName("div");
a.__proto__;// HTMLCollection {} 属于类数组对象
a.length;//

2、可以使用数字下标的方式访问对象

a[0];//<div class=​"aspNetHidden">​…​</div>​

3、不能使用数组原型的方法(如 slice , pop 等)

a.slice;//undefined Error!
a.pop;//undefined Error!

4、使用 instanceof 操作不属于 Array

[] instanceof Array;//true
a instanceof Array;//false

5、可以转换为真数组对象

var arr = Array.prototype.slice.call(a);
arr instanceof Array;//true

PS:注意在IE8下部分对象无法使用slice方法转换为真数组对象。

建议使用jquery提供的 $.makeArray() 方法转换类数组对象

// results is for internal usage only
makeArray: function( arr, results ) {
var ret = results || []; if ( arr != null ) {
if ( isArraylike( Object(arr) ) ) {
jQuery.merge( ret,
typeof arr === "string" ?
[ arr ] : arr
);
} else {
core_push.call( ret, arr );
}
} return ret;
},
merge: function( first, second ) {
var l = second.length,
i = first.length,
j = 0; if ( typeof l === "number" ) {
for ( ; j < l; j++ ) {
first[ i++ ] = second[ j ];
}
} else {
while ( second[j] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
} first.length = i; return first;
}

jQuery.makeArray源码

function isArraylike( obj ) {
var length = obj.length,
type = jQuery.type( obj ); if ( jQuery.isWindow( obj ) ) {
return false;
} if ( obj.nodeType === 1 && length ) {
return true;
} return type === "array" || type !== "function" &&
( length === 0 ||
typeof length === "number" && length > 0 && ( length - 1 ) in obj );
}

jQuery的isArraylike判定方法

6、通常可定义有其他自定义属性

a.item;//function item() { [native code] }

类数组对象优点

关于优点我相信不用太多描述,可以让js和其他后台语言拥有相同的操作方式。

如C#的某些list集合,可以使用数字下标 list[0] 来访问或是使用字符串名称 list['name'] 来访问同一对象

同时还拥有各种自定义方法,自定义属性,看jquery对象的优雅的访问方式即可知是如此美妙的对象。

如何手动创建类数组对象

回归主题,如何手动创建类数组对象。

1、首先创建一个空对象

var array_like = {};//创建一个空对象

2、为对象直接定义数字下标的属性,这在其他语言里是绝对不允许的,对象属性不能使用数字开头,但JS里是可以的,甚至使用中文都可以

array_like[ 0 ] = "test 0";
array_like[ 1 ] = "test 1";
array_like[ 2 ] = "test 2";
array_like[ 3 ] = "test 3";

3、关键点,为对象设置length属性和splice属性为数字和函数

//关键点
array_like.length = 4;//为对象设置length属性
array_like.splice = [].splice;//同时设置splice属性为一个函数

PS:设定splice属性其实是为了欺骗浏览器的控制台,另其显示出数组的模样,可以参考这里

4、测试

//设定自定义属性
array_like.test0=array_like[0];
array_like.test1=array_like[1];
//直接输出
console.log( array_like );//['test 0','test 1'...]
//类型
console.log( $.type( array_like ) );//"object"
//数字下标访问
console.log( array_like[ 0 ] );//"test 0"
//自定义属性访问
array_like.test0;//"test 0"
//不是数组对象
array_like instanceof Array;//false
//转换为真数组对象
var Arr=Array.prototype.slice.call(array_like);
Arr instanceof Array;//true

5、全部代码:

var array_like = {};

array_like[ 0 ] = "test 0";
array_like[ 1 ] = "test 1";
array_like[ 2 ] = "test 2";
array_like[ 3 ] = "test 3"; array_like.length = 4;
array_like.splice = [].splice; console.log( array_like );
console.log( $.type( array_like ) );
console.log( array_like[ 2 ] );

TypeScript中创建使用类数组对象

详见 这篇文章

相关链接:

http://stackoverflow.com/questions/11886578/creating-array-like-objects-in-javascript

https://gist.github.com/elijahmanor/4759928

http://xahlee.info/js/js_convert_array-like.html

原文地址-小小沧海:http://www.cnblogs.com/xxcanghai/p/4834683.html

如何在JavaScript中手动创建类数组对象的更多相关文章

  1. Effective JavaScript Item 51 在类数组对象上重用数组方法

    Array.prototype对象上的标准方法被设计为也能够在其他对象上重用 - 即使不是继承自Array的对象. 因此,在JavaScript中存折一些类数组对象(Array-like Object ...

  2. 【转载】 C#中手动创建一个DataTable对象并写入数据

    在C#操作集合数据的过程中,有时候需要手动创建一个DataTable对象,并手动设置DataTable对象的Columns列名等信息,最后再往手动创建的DataTable对象中写入相应的数据信息,此时 ...

  3. 什么是“类数组对象”,在jquer中怎样将类数组对象转换为数组对象

    类数组对象的定义: 所谓"类数组对象"就是一个常规的Object对象,如$("div")但它和数组对象非常相似:具备length属性, 并以0.1.2.3……等 ...

  4. javascript 类数组对象

    原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做 ...

  5. 在 QML 中使用 C++ 类和对象

    Qt Quick 技术的引入,使得你能够快速构建 UI ,具有动画.各种绚丽效果的 UI 都不在话下.但它不是万能的,也有很多局限性,原来 Qt 的一些技术,比如低阶的网络编程如 QTcpSocket ...

  6. 浅谈JavaScript和DOM中的类数组对象

    JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...

  7. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

  8. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

    原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...

  9. Javascript数组与类数组对象

    问题来由: 之前面试X公司的时候,问我关于原型链知道多少,于是我就开始说了一些有关于原型链的东西,面试官问Array的原型是什么,我说是对象,毕竟Array.prototype===array.__p ...

随机推荐

  1. 迁移学习与fine-tuning有什么区别

    假设你要处理一个新数据集,让你做图片分类,这个数据集是关于Flowers的,问题是,数据集中flower的类别很少,数据集中的数据也不多,你发现从零开始训练CNN的效果很差,很容易过拟合,怎么办呢,于 ...

  2. Oracle监控的关键指标

    1.监控事例的等待 select event, , , )) "Prev", , , )) "Curr", count(*) "Tot" f ...

  3. MySQL新加用户和开启慢查询

    mysql>grant select on *.* to read@'%' identified by 'j';  //给予read用户只读全部库的权限 mysql>grant selec ...

  4. git-【二】本地git操作提交、版本回退

    一.创建版本库,提交文件 什么是版本库?版本库又名仓库,英文名repository,你可以简单的理解一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改,删除,Git都能跟踪,以便任 ...

  5. How To Mine Bitcoins 比特币挖矿

    linux 下查看 gpu 的信息: sudo lshw -C display windows下查看cuda信息:In directory C:\Program Files\NVIDIA Corpor ...

  6. html基础之css标签

    css style: 里面的写的就叫做css,每一个样式的间隔用英文分号, 全部相同的时候引用class. css有三种写法: 1.在head标签中增加style标签,在style标签中去写css样式 ...

  7. Swagger2 生成 Spring Boot API 文档

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.本文主要介绍了在 Spring Boot 添加 Swagger 支持, 生成可自动维护的 A ...

  8. PAT 1082 Read Number in Chinese[难]

    1082 Read Number in Chinese (25 分) Given an integer with no more than 9 digits, you are supposed to ...

  9. [ABP项目实战]-后台管理系统-目录

    学习ABP也有一段时间了,但是总是学习了后面的忘记了前面的,为了巩固所学到的知识以及记录所学到的东西,因此有了本系列的诞生. ABP ASP.NET Boilerplate Project(ABP.N ...

  10. django-生成随机验证码

    Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 1   1 pip3 install pillow 基本使用 1.创建图片 from PIL impo ...