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，以下操作将它转换为真数组：

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

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

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

遍历伪数组push到空数组里：
```
var arr = [];
for(var i = 0 ; i < arrL.length ; i ++){
    arr.push(arrL[i]);
}
console.log(arr);
```
此时，真数组arr已经拿到了伪数组arrL的所有数据，然后就可以对arr直接操作啦

数组的操作

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

最后编辑于：2019.12.03 10:28:48