类数组对象如何作为数组使用 ---(call方法)

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(),且这两个方法可以用中括号来简写,这便解释了上面的代码为何能运行

---

• 结合上面的arguments的例子,我们便可以写出HTML Collection使用数组方法的代码:

JavaScript :

var col = document.getElementsByTagName('div');
[].forEach.call(col,function(val){
  console.log(val);
});

输出 :