js- 类数组对象
JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法。
而对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的 length 属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为 “类数组对象” 。
var o = {0:42,1:52,2:63,length:3}
console.log(o); // 返回:{0: 42, 1: 52, 2: 63, length: 3}
console.log(o.length); // 返回3
与普通对象不同的是,类数组对象拥有一个特性:可以在类数组对象上应用数组的操作方法。比如,在ECMAScript 5标准中,可以用以下方法来将上面的对象o合并成字符串:
var o = {0:42,1:52,2:63,length:3}
console.log(Array.prototype.join.call(o));// “42,52,63”
将类数组对象转换成普通数组,下面分别介绍两种方法:
法一: 可以使用 Array.prototype.slice.call() 方法。
// ES5的写法
var o = {0:42,1:52,2:63,length:3}
console.log(Array.prototype.slice.call(o)); // [42, 52, 63]
法二: Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
// ES6的写法
var o = {0:42,1:52,2:63,length:3}
console.log(Array.from(o)) // [42,52,63]
在浏览器环境中,document.getElementsByTagName()语句返回的就是一个类数组对象。在function调用中,function代码内的arguments变量(保存传入的参数)也是一个类数组对象。
在ECMAScript 5标准中,字符串string就是一个只读的类数组对象:
var s = "History";
console.log(s[3]); // t
console.log(s.length) //
console.log(Array.prototype.join.call(s, " ")); // H i s t o r y
扩展运算符(...)也可以将某些数据结构转为数组。扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。
Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
上面代码中,Array.from返回了一个具有三个成员的数组,每个位置的值都是undefined。扩展运算符转换不了这个对象。
Array.from()可以将各种值转为真正的数组,并且还提供map功能。这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然后转成规范的数组结构,进而就可以使用数量众多的数组方法。
Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']
js- 类数组对象的更多相关文章
- js 类数组对象arguments
function Add() { for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]); } } Add( ...
- js之数组,对象,类数组对象
许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...
- 浅谈js的类数组对象arguments
类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比(转载)
在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array ...
- js中的节点遍历+类数组对象
firstChild 第一个子元素 lastChild 最后一个子元素 childNodes[n] = childNodes.item(n) 第n+1个子元素 parentNode ...
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- [Effective JavaScript 笔记]第58条:区分数组对象和类数组对象
示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...
- 浅谈JavaScript和DOM中的类数组对象
JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...
随机推荐
- Oracle 11.2.0.4.0 Dataguard部署和日常维护(2)-Datauard部署篇
1. primary库设置dataguard相关参数 1.1. 强制primay库在任何状态下必须记录日志 SYS@userdata>select FORCE_LOGGING from v$ ...
- Python迭代和列表生成器
使用for循环遍历list和tuple,这种遍历成为迭代 在如C语言中都是通过下标拿到值,for...in这种方式其实是相同的. 在函数的一节,这样说--->‘求和函数sum(),sum(ite ...
- bool类型为什么可以当做int
实际上bool型变量占用了一个字节的内存,当值为false的时候,实际存储的是0x00,为true时实际存储的是0x01,因此可以作为int整型使用 bool型只分0与非0,0为false,其余的包括 ...
- 快速搭建springboot框架以及整合ssm+shiro+安装Rabbitmq和Erlang、Mysql下载与配置
1.快速搭建springboot框架(在idea中): file–>new project–>Spring Initializr–>next–>然后一直下一步. 然后复制一下代 ...
- localStorage 设置本地缓存
var timestamp = parseInt(Date.parse(new Date()));var btn = document.getElementById("close" ...
- Matlab远程调试 转
Matlab的调试总体分为,直接调试和间接调试.1.直接调试:(1)去掉句末的分号:(2)单独调试一个函数:将第一行的函数声明注释掉,并定义输入量,以脚本方式执行 M 文件:(3)适当地方添加 ...
- ie浏览器get url返回404问题
昨晚同事说之前给的接口不能get方式的,直接在ie浏览器访问返回404,说明是参数有问题. 同样的接口使用curl和postman请求都正常,其他ie之外的浏览器也都正常响应. 记录下排查过程: 问题 ...
- U启动安装原版Win7系统教程
1.制作u启动u盘启动盘2.下载原版win7系统镜像并存入u盘启动盘3.硬盘模式更改为ahci模式 第一步: 将准备好的u启动u盘启动盘插在电脑usb接口上,然后重启电脑,在出现开机画面时通过u盘启动 ...
- day24-python操作数据库四
#!/usr/bin/env python # -*- coding:utf-8 -*- # @time: 2017/11/23 23:10 # Author: caicai # @File: dem ...
- 【资料收集】Converting Between cv::Mat and QImage or QPixmap
参考: 方法一 Convert between cv::Mat and QImage 两种图片类转换 - Grandyang - 博客园 http://www.cnblogs.com/grandyan ...