类数组对象

一、什么叫做类数组对象

JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法。

而对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为“类数组对象”。

二、类数组对象的特性

类数组对象具有两个特性

  1. 具有:具有index和length属性;
  2. 不具有:不具有数组的操作方法,比如push,shift等。

常见的类数组对象:

  • HTMLCollection ,在浏览器环境中,document.getElementsByTagName()语句的返回值是一个类数组对象。
  • arguments ,在function调用中,function代码内的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]

var leiarr={
    
    0:42,1:52,2:63,length:3}
console.log(Array.prototype.join.call(leiarr));//“42,52,63”
console.log(Array.prototype.slice.call(leiarr,1,2));//[ 52 ]
//操作相同的变量的时候可以按住shift,全部选中
 
//在ECMAScript 5标准中,字符串string就是一个只读的类数组对象
var s = "Object";
console.log(s[3]);//e
console.log(Array.prototype.join.call(s, " "));//O b j e c t

猜你喜欢

转载自blog.csdn.net/qq_43000315/article/details/125361333
今日推荐