javascript类数组
一、类数组定义:
而对于一个普通的对象来说,如果它的所有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类数组的更多相关文章
- JavaScript类数组转换为数组 面试题
1.JavaScript类数组转换为数组 (1)方法一:借用slice (2)方法二:Array.from 2.代码 <!DOCTYPE html> <html lang=" ...
- Javascript 类数组(Array-like)对象
Javascript中的类数组对象(Array-like object)指的是一些看起来像数组但又不是数组的对象.Javascript中的arguments变量.document.getElement ...
- JavaScript类数组对象参考
JavaScript和DOM中有很多类数组对象,它们有以下特点 1.有length属性 2.可以使用[]通过下标访问 3.部分类数组对象使用[]访问成员时不只可以使用下标,还可以使用id或name 4 ...
- javascript 类数组对象
原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做 ...
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- JavaScript arguments类数组
1. 什么是类数组 arguments 是一个类数组对象.代表传给一个function的参数列表. 我们来传一个实例. function printArgs() { console.log(argu ...
- 浅谈JavaScript和DOM中的类数组对象
JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...
- JavaScript数组&类数组转换
一.数组 在JavaScript中数组可以容纳任何类型的值,可以是数字.字符串.对象.甚至其他数组(多为数组) var a = [1,'2',[3]]; a.length;//3 a[0];//1 a ...
- javascript:类数组 -- 对象
在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 类数组:本质是一个对象,只是这个 对象 的属性有点特殊,模拟出数组的一些特性. 一般来说,如果我们有一个 ...
随机推荐
- egret inspect插件安装失败处理方法
egret inspect插件安装失败处理方法谷歌浏览器版本太高不兼容了 换个69就行了 然后点击加载已解压的扩展程序选择EgretInspector-v2.5.5这个文件夹 就安装成功了 重启下浏览 ...
- 012.Kubernetes二进制部署worker节点Flannel
一 部署flannel 1.1 安装flannel kubernetes 要求集群内各节点(包括 master 节点)能通过 Pod 网段互联互通.flannel 使用 vxlan 技术为各节点创建一 ...
- 如何在 PHP 和 Laravel 中使用 Traits
事实上,PHP 作为一门编程语言存在的问题之一,就是你只能使用单继承.这意味着一个类只能从另一个类中继承.例如,可能希望从几个不同的类继承方法,以防止代码重复.在 PHP 5.4 中 一个新的语言特性 ...
- Appium+python自动化(四十二)-Appium自动化测试框架综合实践- 寿终正寝完结篇(超详解)
1.简介 按照上一篇的计划,今天给小伙伴们分享执行测试用例,生成测试报告,以及自动化平台.今天这篇分享讲解完.Appium自动化测试框架就要告一段落了. 2.执行测试用例&报告生成 测试报告, ...
- nyoj 77-开灯问题 (倍数遍历)
77-开灯问题 内存限制:64MB 时间限制:3000ms 特判: No 通过数:13 提交数:24 难度:1 题目描述: 有n盏灯,编号为1~n,第1个人把所有灯打开,第2个人按下所有编号为2 的倍 ...
- 【Mac】【SoupUI】许可证损坏问题
近期参考 https://www.cnblogs.com/shuaijie/articles/5913750.html#top 安装破解SoupUI 破解方法如下: 截至2014-10-9:SoapU ...
- deepin安装pip
sudo apt install python3-venv python3-pip 升级最新版 pip3 install --upgrade pip 更新完以后就报错网上的解决办法没有好使的 退回版 ...
- alpha week 2/2 Scrum立会报告+燃尽图 01
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9798 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩昊 ...
- Elasticsearch系列---全面了解Document
概要 本篇主要介绍一下document的知识,对document的元数据和基本的语法进行讲解. document核心元数据 前面入门实战一节有简单介绍过document数据示例,这次我们来详细了解一下 ...
- Liunx 安装配置zsh和oh-my-zsh 替换 bash
一.前言 本文将基于 Liunx 环境安装配置zsh 和 oh-my-zsh 替换 bash oh my zsh Liunx默认shell是单调的bash,而zsh比较高大上,bash有的功能,zsh ...