一、类数组定义:

而对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为“类数组对象”。总而言之,具有以下两点的对象:

  • 拥有length属性,其它属性(索引)为非负整数
  • 不具有数组所具有的方法

类数组示例:

以下是一个简单的类数组对象:
var o = {0:42, 1:52, 2:63, length:3}
console.log(o);

类数组的其他常见情况:以下是一个简单的类数组对象:
//1.在ECMAScript 5标准中,字符串string就是一个只读的类数组对象:
//2.在浏览器环境中,DOM方法的返回结果。如:document.getElementsByTagName()语句返回的就是一个类数组对象。
//3.在function调用中,function代码内的arguments变量(保存传入的参数)也是一个类数组对象。
 

二、类数组表现

与普通对象不同的是,类数组对象拥有一个特性:可以在类数组对象上应用数组的操作方法。

比如,在ECMAScript 5标准中,可以用以下方法来将上面的对象o合并成字符串:

console.log(Array.prototype.join.call(o));//"42,52,63"

也可以在类数组对象上使用slice()方法获取子数组:

console.log(Array.prototype.slice.call(o, 1, 2));//[52]

三、类数组判断:

《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 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
}

四、类数组对象转化为数组的几种方式:

方式一:利用数据原型方法Array.prototype.slice.call(arguments)

var a = {'0':1,'1':2,'2':3,length:3};
var arr = Array.prototype.slice.call(a);//arr=[1,2,3]

方式二:es5之前利用循环遍历

 // 伪数组转化成数组
var makeArray = function(obj) {
if (!obj || obj.length === 0) {
return [];
}
// 非伪类对象,直接返回最好
if (!obj.length) {
return obj;
}
// 针对IE8以前 DOM的COM实现
try {
return [].slice.call(obj);
} catch (e) {
var i = 0,
j = obj.length,
res = [];
for (; i < j; i++) {
res.push(obj[i]);
}
return res;
} };

方式三:es6新增扩展运算符

在浏览器环境中,document.getElementsByTagName()语句返回的就是一个类数组对象。
var a = document.getElementsByTagName('p');
var arr = ...a;
在ECMAScript 5标准中,字符串string就是一个只读的类数组对象:
var arr = ...“abc”;//['a', 'b', 'c'];
注意:es8新增扩展运算符对对象的支持。

javascript类数组:https://segmentfault.com/a/1190000000415572

javascript类数组的更多相关文章

  1. JavaScript类数组转换为数组 面试题

    1.JavaScript类数组转换为数组 (1)方法一:借用slice (2)方法二:Array.from 2.代码 <!DOCTYPE html> <html lang=" ...

  2. Javascript 类数组(Array-like)对象

    Javascript中的类数组对象(Array-like object)指的是一些看起来像数组但又不是数组的对象.Javascript中的arguments变量.document.getElement ...

  3. JavaScript类数组对象参考

    JavaScript和DOM中有很多类数组对象,它们有以下特点 1.有length属性 2.可以使用[]通过下标访问 3.部分类数组对象使用[]访问成员时不只可以使用下标,还可以使用id或name 4 ...

  4. javascript 类数组对象

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

  5. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

  6. JavaScript arguments类数组

    1. 什么是类数组 arguments 是一个类数组对象.代表传给一个function的参数列表.  我们来传一个实例. function printArgs() { console.log(argu ...

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

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

  8. JavaScript数组&类数组转换

    一.数组 在JavaScript中数组可以容纳任何类型的值,可以是数字.字符串.对象.甚至其他数组(多为数组) var a = [1,'2',[3]]; a.length;//3 a[0];//1 a ...

  9. javascript:类数组 -- 对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 类数组:本质是一个对象,只是这个 对象  的属性有点特殊,模拟出数组的一些特性. 一般来说,如果我们有一个 ...

随机推荐

  1. PHP 格式化公钥私钥(pem文件)

    <?php header("Content-Type: text/html; charset=utf-8"); $filename = dirname(__FILE__).& ...

  2. Linux 部署Nginx反向代理服务 使用openssl自生成证书并配置https

    1.安装Nginx编译所依赖的包 正常centos中可以使用yum安装一下依赖包: yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel ...

  3. JavaScript: 遍历Array的同时删除指定项

    一个简单的需求是,在遍历一个数组时,移除指定的项. 下列代码是不能正常工作的: var elements = [1, 5, 5, 3, 5, 2, 4]; for(var i = 0; i < ...

  4. 不止面试—jvm类加载面试题详解

    面试题 带着问题学习是最高效的,本次我们将尝试回答以下问题: 什么是类的加载? 哪些情况会触发类的加载? 讲一下JVM加载一个类的过程 什么时候会为变量分配内存? JVM的类加载机制是什么? 双亲委派 ...

  5. C++中对封装的语法支持——友元

    友元 1.友元就是授权给某个函数.每个成员函数.某个类具有访问类内部私有成员的权限. 2.为什么用友元?友元可以允许某个类.函数直接访问类内部私有数据,减少函数调用开销,提高效率. 3.友元函数不是成 ...

  6. 回声消除中的LMS和NLMS算法与MATLAB实现

    自适应滤波是数字信号处理的核心技术之一,在科学和工业上有着广泛的应用领域.自适应滤波技术应用广泛,包括回波抵消.自适应均衡.自适应噪声抵消和自适应波束形成.回声对消是当今通信系统中普遍存在的现象.声回 ...

  7. H5 - css3(学习c3的第一天)

    css3 中的转换:可以对元素进行移动.缩放.装懂.拉长或拉伸. 属性值:transform 每个浏览器的内核都不同,所以对应的前缀也不同,谷歌的是:  -webkit-  :  ie的是  -ms- ...

  8. django_2:模板

    使用模板变量: 在html文件中,{{title}}即为模板变量, 在view.py文件中,render函数,增加第三个参数,以字典形式给值. def index(req): return rende ...

  9. 图文详解基于角色的权限控制模型RBAC

    我们开发一个系统,必然面临权限控制的问题,即不同的用户具有不同的访问.操作.数据权限.形成理论的权限控制模型有:自主访问控制(DAC: Discretionary Access Control).强制 ...

  10. Spring Boot 2.X(十八):集成 Spring Security-登录认证和权限控制

    前言 在企业项目开发中,对系统的安全和权限控制往往是必需的,常见的安全框架有 Spring Security.Apache Shiro 等.本文主要简单介绍一下 Spring Security,再通过 ...