伪数组(ArrayLike)
伪数组(ArrayLike)
伪数组的定义和特性
伪数组 (ArrayLike) ,又称类数组。是一个类似数组的对象,但是有如下几个特征。
按索引方式储存数据
0: xxx, 1: xxx, 2: xxx...
具有
length
属性- 但是length属性不是动态的,不会随着成员的变化而改变
不具有数组的
push()
,forEach()
等方法arrayLike.__proto__ === Object.prototype; //true arrayLike instanceof Object; //true arrayLike instanceof Array; //false
常见的典型伪数组,包括jQuery中通过 $()
获取的DOM元素集, 函数中的的 arguments
对象, 以及字符串String
对象。
例子:
var arrLike = {0: 'a',1: 'b',2: 'c',length: 3,}arrLike[1]; //'a'arrLike.length; //3arrLike.push('d'); //Uncaught TypeError: arrLike.push is not a function
伪数组转化成真数组的方法
var arrLike = {0: 'a',1: 'b',2: 'c',length: 3,};
1.遍历添加入一个空数组
var arr = [];for(var i = 0; i < arrLike.length; i++){arr.push(arrLike[i]);}
比较简单易懂,但是步骤略显繁琐。
2.利用数组的slice()方法 【推荐】
;[].slice.call(arrLike);
或者
Array.prototype.slice.apply(arrLike);
使用slice()
返回一个新的数组,用call()
或apply()
把他的作用环境指向伪数组。
注意这个返回的数组中,不会保留索引值以外的其他额外属性。
比如jQuery中$()
获取的DOM伪数组,里面的context属性在被此方法转化之后就不会保留。
模拟一下slice()
的内部实现
Array.prtotype.slice = function(start, end){var result = new Array();var start = start | 0;var end = end | this.length;for(var i = start; i < end; i++){result.push(this[i]);}return result;}
3.修改原型指向
arrLike.__proto__ = Array.prototype;
这样arrLike就继承了Array.prototype中的方法,可以使用push()
,unshift()
等方法了,length
值也会随之动态改变。
另外这种直接修改原型链的方法,还会保留下伪数组中的所有属性,包括不是索引值的属性。
4.ES2015中的Array.from()方法
Array.from()
方法从一个类似数组或可迭代对象中创建一个新的数组实例。
可以参考MDN的Array.from()
var arr = Array.from(arrLike);
得到的结果与第二种方法类似,只保留索引值内的属性。
参考文献
- http://javascript.ruanyifeng....
- https://www.cnblogs.com/NTWan...
- https://www.cnblogs.com/guora...
- https://developer.mozilla.org...
伪数组(ArrayLike)相关推荐
- java 真数组 伪数组_伪数组(ArrayLike)
伪数组的定义和特性 伪数组 (ArrayLike),又称类数组.是一个类似数组的对象,但是有如下几个特征: 按索引方式储存数据: 0: xxx, 1: xxx, 2: xxx... 具有length属 ...
- JavaScript中的数组与伪数组的区别
在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function). 基本数据类型:String,boolean,Number,Undefined, Null 引用数 ...
- JavaScript 伪数组和数组
定义 数组:一种类列表对象,它的原型中提供了遍历和修改元素的相关操作. 伪(类)数组:只有length属性.不具有Array对象方法且按索引方式存储的对象. 常见的伪数组 函数的参数对象argumen ...
- jQuery 对象及伪数组
1.概念 jQuery对象 是一个包含所有匹配的任意多个元素的伪数组对象 也就是说,jQuery对象是一个伪数组 下面我们来证明一下为什么jQuery对象是一个伪数组 <body>< ...
- 如何将伪数组转换成数组
如何将伪数组转换成数组 如何将伪数组转换成数组?这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内 ...
- JavaScript 函数 伪数组 arguments
一.函数 函数:函数就是将一些语言进行封装,然后通过调用的形式,执行这些语句. 函数的作用: 1.将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动 2.简化编程,让变 ...
- python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...
昨日内容回顾 1.三种引入方式1.行内js <div onclick = 'add(3,4)'></div>//声明一个函数function add(a,b){}2.内接js& ...
- 前端学习(2537):vue源码解析2伪数组转换为真数组
/*1[].slice.call(lis)*//*伪数组 */const lis=document.getElementsByTagName('li')/*判断数组 false*/console.lo ...
- php伪数组转换为数组,JavaScript伪数组用法实例
在Javascript中什么是伪数组?伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们.本文实例讲述了JavaScript伪数组用法, ...
最新文章
- 不同版本GCC编译器之间的切换
- 如何通过递归找父节点或子节点详解
- java8和9兼容吗_甲骨文限制 Java 9 到 Java 8 的向后兼容性
- IdentityServer4 指定角色授权(Authorize(Roles=amp;quot;adminamp;quot;))
- VB常用内部函数大全一览表(建议收藏)
- mysql 5.7.17 源码安装_mysql5.7.17源码安装
- Linux - Redis介绍以及安装 (简易版本)
- Shell nohup 命令详解
- 西门子1200 PLC程序 通讯对象:PLC、CNC、机械手、RFID标签读写器、打标机、分布式远程IO模块、MES中控系统、AGV光通讯
- 微信网页授权关于state
- 城市聚焦:全球十二大性感之城
- #Java教程:集合 #Collection、List、Set #ArrayList、LinkedList、Vector、HashSet、TreeSet #一个斗地主小游戏@FDDLC
- 已知x=[[1]]*3,那么执行语句x[0][0]=5之后,变量x的值为 _____。
- 家用洗地机买什么牌子好一点?家用洗地机推荐
- 4.Matplotlib多子图,文字和注释以及自定义坐标轴
- SQLSTATE[HY000] [1049] Unknown database
- python打包总出错,解决Pyinstaller打包软件失败的一个坑
- 出生小镇、高考不顺、复旦执教、闯荡硅谷,59 岁陆奇为何如此“幸运”?
- 跳转到App Store 指定的app
- 从头认识多线程-4.1 对象的发布(Publish)、逸出(Escape)以及逸出的解决方案
热门文章
- 使用JavaMail发送邮件
- python 内置函数
- Spring PropertyPlaceholderConfigurer
- hadoop 提高hdfs删文件效率----hadoop删除文件流程解析
- mysql 索引 死锁,由不同的索引更新解决MySQL死锁套路
- 双11大返厂,用Python打造最强告白代码,单身节脱单靠自己
- oracle00214,oracle添加控制文件,ORA-00214: 错误
- python列表嵌套字典取值_Python基础语法:你不得不知的几种变量类型
- 简单解析C++基于Boost库实现命令行
- android百度地图更换定位图标,android百度地图定位,改变MyLocationOverlay默认图标(原始为蓝色点)(两种方法)...