2018-8-3 最近很常使用类数组对象,写一下自己的所得
先简单列一下自己遇到的类数组对象
1. Arguments
- 个人接触的第一个类数组,就是
arguments元素
以前写的arguments的简单介绍,点这儿
看看arguments在控制台的输出:
JavaScript :
function gaara(val1,val2,val3,val4,val5){
console.log(arguments);
}
gaara(1,2,3,4,5);
输出 :
2. HTML Collection
HTML Collection也是比较常见的一种特殊类数组对象,在使用js获取页面元素时,如果是通过类名或者标签名,就会得到一个HTML Collection我们可以很轻易的通过使用的方法名来知道我们将得到的是元素,还是元素集
getElementById( ) --element 获取元素
getElementsByClassName( ) --elements获取元素集
getElementsByTagName( ) --elements获取元素集
看看HTML Collection在控制台的输出:
JavaScript :
var col = document.getElementsByTagName('div');
console.log(col);
HTML :
<div>1</div> <div>2</div>
<div>3</div> <div>4</div>
<div>5</div>
输出 :
回到正题:
类数组对象如何作为数组使用
先看看arguments:
- 我在介绍
arguments的文章中记录了从MDN摘抄的arguments转数组的方法:
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
// ES2015
//The Array.from() method creates a new Array instance
// from an array-like or iterable object.
const args = Array.from(arguments);
- 前两个方法都是使用了同一种方法:
数组的slice方法.call ( arguments )
call()方法是干什么的?
在MDN中是这样介绍的:
可以让call()中的对象调用当前对象所拥有的function点这儿可以看看我个人对
call()方法的一点理解结合上面的例子:
var args = [].slice.call(arguments);
call()中的对象 : arguments
当前对象 : []
- 这时我们就很容易理解这句语句了:
让arguments调用数组的slice( )方法,并且将调用后的返回值赋给args语句,可以理解为下面这条语句:
var args = arguments.slice()- 虽然我们可以如此理解,但却不能这样写代码,因为
arguments并不是一个数组,没有数组的slice方法,但又因为它是类数组的,因此它可以使用slice方法
此时我们便不需要专门为arguments定义一个slice方法,call方法的作用便在于此
上面的问题有了结果
凭借着
call方法,我们可以让目前操作的对象(arguments)去使用别的对象(array)的方法
说完了arguments,再来看HTML Collection就简单多了
HTML Collection如何当做数组处理
- 在获取到对应的元素集之后,我们可能需要遍历该元素集来进行操作
我们可以使用for循环来正确的遍历这个元素集,得到我们想要的东西
var col = document.getElementsByTagName('div');
for( var i = 0; i < col.length; i ++){
console.log(col[i]);
}
输出 :
在上面的函数中,我们用到了col.length以及col[0],这些难道不是数组的方法吗?HTML Collection本身就是数组吗?
修改一下上面的代码:
var col = document.getElementsByTagName('div');
console.log(typeof col);
col.forEach(function(val){
console.log(val);
});
输出 :
- 可以看出,元素集的类型是对象,也没有数组的方法,查看下MDN中对它的介绍,发现它只有一个只读的
length属性以及两个方法item()与namedItem(),并没有forEach()方法,这便解释了上面的代码为何不能运行
- 结合上面的arguments的例子,我们便可以写出HTML Collection使用数组方法的代码:
JavaScript :
var col = document.getElementsByTagName('div');
[].forEach.call(col,function(val){
console.log(val);
});
输出 :
