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- 类数组对象的更多相关文章

  1. js 类数组对象arguments

    function Add() { for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]); } } Add( ...

  2. js之数组,对象,类数组对象

    许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...

  3. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

    原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...

  4. 浅谈js的类数组对象arguments

    类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...

  5. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比(转载)

    在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array ...

  6. js中的节点遍历+类数组对象

    firstChild  第一个子元素 lastChild  最后一个子元素 childNodes[n]  =   childNodes.item(n)    第n+1个子元素 parentNode  ...

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

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

  8. [Effective JavaScript 笔记]第58条:区分数组对象和类数组对象

    示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...

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

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

随机推荐

  1. 2017-6-5/MySQL分库分表

    分库分表,顾名思义,就是把原本存储于一个库一张表的数据分块存储到多个库多张表上.对于大型互联网应用来说,当一张表的数据量达到百万.千万时,数据库每执行一次查询所花的时间会变多,并且数据库面临着极高的并 ...

  2. MongoDB 教程(三):MongoDB 的下载、安装和配置

    一.下载 下载地址:https://www.mongodb.com/download-center#community(这里是Windows 版,其他版本也可以在该网页进行下载) 版本选择: Mong ...

  3. 本地仓库有jar包maven依然报错的原因

    本地Maven仓库有所需jar包依然报错,missing……………… 既然有这个jar包为什么还会报错呢? 找到本地仓库后发现里面有一个_remote.repositories文件 问题在_remot ...

  4. zzw原创_expdp及impdp中的exclude及include参数的那点事

    zzw原创:转载请注明出处 在oracle的expdp 及imdpd命令中,exclude及include参数还是有一些要注意的地方,特别是涉及选择性条件时. 一.通用 1.exclude及inclu ...

  5. Oracle Log Block Size

    Although the size of redo entries is measured in bytes, LGWR writes the redo to the log files on dis ...

  6. springmvc静态资源处理

    1.配置springmvc拦截规则,注意不能拦截 /*,这样的话,会对所有请求默认拦截,而应该拦截 /, 这样servlet会先走默认的拦截规则,默认拦截规则找不到后,才会走 / 这个规则,这样静态资 ...

  7. Java 正则校验整数,且只能是非0开头

    function checkNum(obj){ //修复第一个字符是小数点 的情况. if(obj.value !=''&& obj.value.substr(0,1) == '.') ...

  8. boost库的安装

    1.网上下载boost_1_67_0.zip,解压 2.双击boost_1_67_0/bootstrap.bat文件,生成bjam.exe,b2.exe. 3.打开命令行运行 bjam stage - ...

  9. JS--理解参数,argument,重载

    ECMAScript函数的参数与大多数其他语言函数的参数不同.ECMAScript函数不介意传递进来多少个参数,也不在乎传递进来的参数是什么数据类型. 原由在于,ECMAScript中的参数在内部是用 ...

  10. 学习笔记-AngularJs(五)

    之前的页面太丑了,后来我引入了bootstrap.css,把样式进行修了一番,如下图(一不小心,插入个链接,忽略,http://t.cn/RUbL4rP): (链接:http://www.live08 ...