文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

javascript如何定义类数组对象

2024-04-02 19:55

关注

这篇文章主要介绍“javascript如何定义类数组对象”,在日常操作中,相信很多人在javascript如何定义类数组对象问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascript如何定义类数组对象”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

javascript定义类数组对象的方法是:1、首先创建一个空对象;2、为对象直接定义数字下标的属性;3、关键点,为对象设置length属性和splice属性为数字和函数。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

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

例: arguments , NodeList , HTMLCollection , jQuery 等

类数组对象特性

1、拥有 length 属性

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

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

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

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() 方法转换类数组对象

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 ] );

到此,关于“javascript如何定义类数组对象”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯