ArrayLikeChangedToArray

发表于 | 分类于

类数组对象转换为数组对象的简单理解

一 : 关于类数组对象：只包含使用从零 0 开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象

JavaScript中有一些著名的类数组对象，它们看起来很像数组：

  • 拥有length属性 这里强调一下，必须有length属性，且length属性的值必须和元素键值对个数保持一致 如果没有length属性，那么就不是类数组
  • 元素按序保存在对象中，可以通过索引访问

但实际和数组又不是一回事：

  • 没有数组的很多方法
  • 也会有数组没有的方法(e.g. NodeList的item()方法)
  • 有些类数组对象是动态变化的(e.g. NodeList的值是基于DOM结构动态执行查询的结果)
1
2
3
4
5
6
7
8
9
var arrLike = {
       0:7,
       1:8,
       2:9,
       length:2   //length属性值小于3 最后一个9不会被添加进去
   }
   var arr1 = [1,2,3];
   arr1.push.apply(arr1,arrLike);
    console.dir(arr1);
1
2
3
4
5
6
7
8
9
var arrLike = {
       0:7,
       1:8,
       2:9,
       length:3   //length属性值等于3 
   }
   var arr1 = [1,2,3];
   arr1.push.apply(arr1,arrLike)
    console.dir(arr1);
1
2
3
4
5
6
7
8
9
var arrLike = {
        0:7,
        1:8,
        2:9,
        length:5	//length属性值大于3 
    }
    var arr1 = [1,2,3];
    arr1.push.apply(arr1,arrLike)
     console.dir(arr1);
1
2
3
4
5
6
7
8
var arrLike = {
       1:8,  
       2:9,
       length:5   //缺少索引为0 的键
   }
   var arr1 = [1,2,3];
   arr1.push.apply(arr1,arrLike)
   console.dir(arr1);

通过以上四种情况，大家可以在自己电脑上输出看下结果，类数组对象的定义大家应该会有一种新的认识；

二 : 将 类数组对象 转换为 数组对象

  • slice 和splice方法都可以，slice不会改变原数组，splice会将改变原数组
1
2
3
4
5
6
Array.prototype.slice.call(arraylike, 0);
Array.prototype.splice.call(arrLike,0);
Array.prototype.slice.apply(arrayLike,[0]) ;//注意咯，这里必须是 数组形式的参数,
Array.prototype.splice.apply(arrLike,[0]);
//参数会传递给slice或者splice方法
1
2
3
4
5
6
7
8
9
10
11
  var arrLike = {
        0:"name",
        1:"age",
        2:"address",
        length:3
    }
//    var ret = Array.prototype.slice.call(arrLike,0);
//    var ret = Array.prototype.splice.call(arrLike,0);
//    var ret = Array.prototype.slice.apply(arrLike,[0]);
//    var ret = Array.prototype.splice.apply(arrLike,[0]);
     console.dir(ret);
  • push + apply + 空数组(apply会将传入的数组或者类数组拆分开以单个元素的形式传递给push,然后push就可以正常的往数组里面加元素咯)
1
2
3
4
5
6
7
8
9
10
11
12
   var arrLike = {
        0:"name",
        1:"age",
        2:"address",
        length:3
    }
    var ret = [];
    Array.prototype.push.apply(ret,arrLike);
	//Array.prototype.push.call(ret,arrLike);  //这个会将arrLike作为一个整体直接push进ret数组中
//arrLike  必须是一个伪数组，length属性不可少，索引值必须从 0 开始递增，不是
    console.dir(ret);
//这个方法的关键还是要理解apply方法会对传入的数组进行拆分，这个真的很重要

以上的栗子，大家可以将类数组的length属性去掉试一下看看，就会发现这个属性对于类数组 定义的重要性了