JavaScript 数组与伪数组简介

JavaScript-数组与伪数组简介

本文章面向小白

数组与伪数组的概念

• 数组与伪数组从何而来

  在JavaScript的数据结构中，没有真正意义上的数组，五种基本的数据类型之外的东西都是对象！所以数组和伪数组都是由对象而改变成的列表结构。而JS中的列表结构大体有两种：

  1. key : value => 无序列表

     在 key : value 结构中，key是可以自定义的值。

     例如对象

  2. index : value => 有序列表

     在index : value 结构中，index是下标（数据索引），是自增的。

     例如数组。

• 数组

  1. 数组的定义

     不多比比，看代码：

     var arr = [0,1,2,3,4,5];
     

     这就是一个数组。

  2. 数组的取值(index)

     数组具有一个很便捷的特征：index，也就是索引。数组中的每一项都有一个对应的index表示它在该数组(列表)中的位置。就像快递员拥有了目标的地址一样，可以轻松地访问到对应的index中的项：

     var arr = [0,1,2,3,4,5];
     console.log(arr[0]); // 0
     console.log(arr[3]); // 3
     

  3. 数组的遍历(length)

     我们为什么对操作列表结构如此青睐？因为它们都有一个好东西：length属性。顾名思义，length就是该数组(列表)的长度，你有几个元素，length就是多少，所以它为我们的遍历省去了不少麻烦：

     var arr = [0,1,2,3,4,5];
     for(var i = 0 ; i < arr.length ; i ++){
         console.log(arr[i]);
     }
     // 0,1,2,3,4,5
     

• 伪数组

  什么是伪数组？听起来花里胡哨的很难理解，实际上就是一个特殊的列表结构，它具有数组的数据结构，也有length，也可以通过index获取对应的项的数据，但是不具备数组配套的操作方法！让我们举一些例子来了解它：

  1. arguments就是伪数组。

     function add(){
        var res = 0;
         for(var i = 0 ; i < arguments.length ; i ++){
             res += arguments[i];
         }
         return res;
     }
     var sum = add(1,2,3,4,5); 
     console.log(sum); //15
     

     arguments在编程中很常见，它作为一个伪数组出现在不定参函数中。

  2. 群组选择符的返回结果也是伪数组。

     var divs1 = document.getElementsByTagName("div");
     var divs2 = document.getElementsByClassName("div");
     var divs3 = document.querySelectorAll("div");
     

     上述divs1、divs2、divs3都是伪数组

伪数组转真数组

我们知道伪数组是没有真数组配套的操作方法的，为了在编程中让代码听话，能更灵活地操作伪数组，这里列举一些伪数组转真数组的方法。

假设我们得到了一个伪数组arrL，以下操作将它转换为真数组：

1. 通过call改变数组方法的指向的方法：

   var arr = [].slice.call(arrL); 
   //或者 var arr = Array.prototype.slice.call(arrL);
   console.log(arr);
   

   此时，arr已经成为真数组。

2. 遍历伪数组push到空数组里：

   var arr = [];
   for(var i = 0 ; i < arrL.length ; i ++){
       arr.push(arrL[i]);
   }
   console.log(arr);
   

   此时，真数组arr已经拿到了伪数组arrL的所有数据，然后就可以对arr直接操作啦

数组的操作

熟练使用数组的方法对学好JavaScript来说非常重要，见下个章节^ ^