类数组对象

Posted 2020-09-19 小丸子的城堡

javascript中有一些看起来像却又不是数组的对象，我们称之为类数组。

定义

类数组对象具有两个特性：

1）具有：具有index和length属性；

2）不具有：不具有数组的操作方法，比如push，shift等。

js中有两个最典型的类数组对象：arguments和htmlCollection集合（即通过getElementByTagName这类方法获得的集合）。以下以arguments为例，讲解类数组对象的一些用法。

常见用法

【index和length】

index和length用法很简单，和数组一样。

arguments.length;//返回类数组的长度
arguments[0];//返回类数组的第一项

【使用数组方法】

类数组不具有数组的方法，但我们经常希望其可以操作数组的方法，比如如果想返回一个arguments的每一项*2的数组，使用for循环似乎有些麻烦，我们看看如何可以简便一些实现：

function fn() { 
  var newArr = Array.prototype.map.call(arguments, function (item, index, array) {
     return item*2; 
 }); 
  return newArr;
}
console.log(fn(1,2,3,4));//[2,4,6,8]

观察会发现，像map这一类的方法接受3个参数item，index，array，而类数组对象均可以满足。所以虽然类数字对象不具有这些方法，但我们可以通过call/apply将函数map的this指向arguments，从而实现arguments对数组方法的调用。

【扩展】

事实上，数组的很多方法都可以被其他类型对象调用，只需要对象满足指定数组方法需要满足的条件即可。比如：

var obj={x:1,y:2};
Array.prototype.push.call(obj,3);
console.log(obj);//{0:3,x:1,y:2,length:1}

普通对象obj原本没有length属性，对其应用push方法后，在位置[0]上push了3，并自动以0为初始值增加了length属性。

转换为数组

有时候我们希望可以直接把类数组当做数组来处理，这时候我们可以将其转换为数组。

Array.prototype.slice.call(arguments);

这种方法十分有用，比如可以用来参数拼接：

function outer(){
  var args= Array.prototype.slice.call(arguments);
  var inner =  function(){
    return args.concat(Array.prototype.slice.call(arguments));
  }
  return inner;
}
var foo = outer(1,2,3);
console.log(foo(4,5,6));//[1,2,3,4,5,6]