类数组的概念:

类数组(ArrayLike)是指:和“数组”类似,有length属性,并且可以通过下标进行访问内部的元素且在写法上跟数组一样,但是不能直接使用数组方法。比如arguments,函数的第一个参数是argument[0],写法上跟数组一样,但是不是数组,他的原型是Object,获取dom元素的集合合适类数组。

操作类数组的方式

// 获取类数组中的元素
function abc(){for(var x = 0; x < arguments.length; x++){console.log(arguments[x]);}
}
abc(1, 3, 4,6, 8, 9);

可以看到类数组可以向数组一样通过遍历来得到类数组中的每一项的值。我们也可以看到类数组的下标也是从0开始,并且类数组也有length属性,表示类数组中元素的个数。虽然类数组和数组很相似,但是类数组并不能使用数组的方法进行操作,一般情况下我们想要类数组能够使用数组的一些截取添加等方法,需要把类数组转换成真的数组。我们可以通过一下几种方式信息转换:

类数组转换成数组的方法

通过遍历复制给新数组

var oDiv = document.getElementsByTagName('div');
var arr = [];
for(x in oDiv){arr.push(oDiv[x]);
}

上边的方式先定义一个空数组,然后通过遍历类数组对象,把类数组中的每一项push到空数组中,这样就得到了一个新的有类数组项组成的新数组。

通过数组的提供的能够返回新数组的方法改变

function fun(){/*通过使用Array的原型上的clice方法调用*/// var args = Array.prototype.slice.call(arguments);/*通过数组示例的slice方法调用*/var args = [].slice.call(arguments);// 这里我们也可以使用其他方法,如:splice \ concat \ map \ filter \ 等// var args = [].splice.call(arguments, 0);// var args = Array.prototype.concat.apply([], arguments);// var args = [].map.call(function(v){return v});// var args = [].map.call(function(v){return v});console.log(args);
}
fun(1, 2, 3, 4, 5, 6);

通过数组from方法

function fun() {let arr = Array.from(arguments);console.log(arr);
}
fun(1,32,43,4);

Array.from():是数组对象中的一个静态方法,是ES6新增的方法,他可以从类数组对象或者可迭代对象中创建一个新的数组实例。注意: IE 11(及更早版本)不支持from方法。
更多关于Array.from的介绍可以看:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

通过使用ES6的展开用算符(…)

function fun() {let arr = [...arguments];console.log(arr);
}
fun(1,32,43,4);

扩展运算符实际上调用的是遍历器接口,如果一个对象没有部署此接口就无法完成转换。

我们也可以借助第三方类库提供的方法来转换

jquery的makeArray(obj)方法

// 通过使用makeArray方法,将获取的dom元素组转换成数组。
var arr = jQuery.makeArray(document.getElementsByTagName("div"));

我们还可以通过另一种方式来让类数组对象使用数组提供的方法

var li = document.getElementsByTagName('li');
[].forEach.call(li,  function(v, i){console.log('value', v, 'index:' , i);
});

将类数组转换成数组的方法相关推荐

  1. 怎么根据css类将html转换成数组,JavaScript_js中将HTMLCollection/NodeList/伪数组转换成数组的代码,这里把符合以下条件的对象称 - phpStudy...

    js中将HTMLCollection/NodeList/伪数组转换成数组的代码 这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等 ...

  2. 如何将伪数组转换成数组

    如何将伪数组转换成数组 如何将伪数组转换成数组?这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内 ...

  3. Byte数组转换成string 的方法积累

    .net的加密算法,返回的都是byte[] 类型,在存贮起来让人非常头疼,最简单的方法就是把byte[]转换成string来存贮,当然如果数据量大的话,另当别论. 所以我就把byte[]转换成stri ...

  4. 将数组转换成字符串的方法

    方法1:使用stringbuffer进行转换 代码如下: int  []x= {1,5,7,4,2}; StringBuffer sb=new StringBuffer();       for(in ...

  5. php数组转xml文件,php数组转换成xml格式的实现方法

    php数组转换成xml的方法:首先创建一个PHP示例文件:然后定义一个"array_Xml"方法:接着通过foreach循环遍历以及"is_array"等函数实 ...

  6. 将数组转换成字符串php,php怎么将数组转换成字符串

    php将数组转换成字符串的方法:可以利用内置函数implode()来进行转换.implode()函数用于返回一个由数组元素组合成的字符串,例如:[implode(',', $str)]. php为我们 ...

  7. doctrine find的对象转换成数组_「ES6基础」Array数组的新方法(上)

    在日常工作中我们经常会与数组打交道,因此需要熟练掌握数组操作的相关方法,ES6中关于数组的操作,又给我们带来了哪些惊喜呢,Array数组操作又添加了哪些新方法? 本篇文章将从以下几个方面进行介绍: A ...

  8. 浅谈集合转换成数组的方法--toArray()与toArray(T[] a)

    众所周知,ArrayList 集合的底层是通过数组来实现的,但是集合与数组还是有一些区别的,简单来说,集合的长度是可变的,而数组的长度是不可变的,通过这点可以引发出一点效率上的差异,当所处理的数据长度 ...

  9. Java字节数组转换成十六进制字符串的几种方法

    前言 最近在项目中需要将字节数组转换成十六进制字符串,而Java内置的库中并没有相关工具可用,因此查了一下byte数组转hex字符串的相关方法,列出如下,需要可以直接拿来使用. 方法1:使用Strin ...

最新文章

  1. Ubuntu16.04 python2.7升级python3.5
  2. 《最强蜗牛》运营分析:这个奇葩放置游戏的乐趣在哪里?
  3. .NET6之MiniAPI(二十二):HttpClient
  4. PAT_1007(中文)_素数对猜想
  5. java字符串笔试题_五道Java常见笔试题及答案汇总
  6. 在MongoDB的MapReduce上踩过的坑
  7. 论文笔记_S2D.73_2019_BTS_从大到小:多尺度局部平面引导的单目深度估计
  8. LINUX-VIM编辑器常用命令大全(超全)
  9. 如何免费下载DEM数据
  10. 用python完成《商务与经济统计(第13版)》课后练习——第7章和第8章
  11. Java图片上传Base64 类型上传 后台转换工具类
  12. 第十届蓝桥杯大赛软件类省赛 Java 大学 B组 试题H:人物相关性分析
  13. Unity中使用模板测试模拟Mask组件效果
  14. JAVA:实现线性丢番图方程求解器算法(附完整源码)
  15. 蓝牙耳机气传导哪个牌子好,试试这几款不入耳的气传导耳机
  16. ClickHouce 常用字符串函数
  17. MATLAB矩阵的建立
  18. 依据象限搜索及混合预计耗费的A*改进算法,包含8邻域及24邻域的改进
  19. DASCTF X CBCTF 2022九月挑战赛 WriteUp
  20. revit二次开发lookup和addin的详细安装教程

热门文章

  1. AIGC(AI Generated Content,人工智能生成内容)
  2. 2022:创造是根本,欣赏只是增补
  3. 敏捷开发领域里的 Epic 以及和 User Story 的关联关系
  4. 试验1:观察Windows的内核模块、数据结构和函数
  5. DR的背景、DR的作用以及DR选举规则
  6. C++11中type_traits中的基石 - integral_constant
  7. 2018秋招历程之海康威视篇
  8. java用this指向_java中的this指向?
  9. python连接oracle数据库 插入clob类型数据
  10. luffcc项目-06-使用容联云发送短信、Celery