JavaScript 中的数组

待我称王封你为后i 2022-04-15 07:15 157阅读 0赞

数组（Array）类型应该是我们开发过程中使用最多的类型了。数组在许多语言中都能看到，不过JavaScript中的数组更为强大。主要的特点在于：

*  数组长度可以动态调整
 *  数组提供了大量操作方法
 *  数组的每一项都可以存放任意类型的数据

首先我们从最基本的数组的创建说起，由于数组实际上是数组(Array)类型的实例对象，那么与Java、C\#等语言一样，数组可以用下面的形式创建

var array = new Array();    //创建一个空数组

也与Java、C\#等语言一样的是，创建数组的时候我们可以省略掉**new**关键字

var array = Array();    //与上述形式效果一样

如果说我们预先就知道数组中要存放多少个数据，我们也可以在创建数组时就给构造函数传递该数值。（这样创建的数组的长度依然是动态调整的，只是一开始有默认长度。）

var array = new Array(3);   //创建了一个长度为3的数组，其中的每一项都是undefined

我们还可以直接给构造函数传递所要保存的数据，例如

var array = new Array('data');  //创建了一个包含有一个数据项即‘data’的数组

除此之外，我们还可以使用一种叫做数组字面量表示法的方法来创建数组。如下所示：

var array1 = [];    //创建一个空数组
    var array2 = ["Apple", "Orange", "Banana"]; //创建一个包含3个字符串的数组

与其他语言一样，若要获取或修改数组数据，我们需要使用方括号和从0开始的数字索引。这一点没什么稀奇，也没什么可讲的。不同的在于如果我们使用了一个超出数组长度范围的索引值。如果是读取数据，则会返回一个undefined，如果是添加数据，那么数组就会自动增加到该索引加1的长度。

var array = ["Apple", "Orange", "Banana"];
    console.log(array[0]);  //Apple
    array[3] = "Grape"; //数组变为["Apple", "Orange", "Banana", "Grape"]
    array[99] = "Pear"; //从第5项到第99项都为undefined，长度为100

在上面的例子中，我们使用了索引值3，很显然索引值3引导到的将会是数组的第四项，然而数组的长度仅仅只有3。在这个时候，数组便会自动将所要添加的数据放入索引值所指定的位置，同时把数组的长度(length属性)改为索引值加1。

数组的长度并不只是一个只读的属性，它可以被修改，通过修改长度属性可以增加或者删除数组数据项。

var array = ["Apple", "Orange", "Banana"];
    array.length = 4;
    console.log(array[3]);  //undefined
    array.length = 2;
    console.log(array[2]);  //undefined
    array[array.length] = 'Banana'; //往数组尾部添加一个字符串"Banana"

在上述例子中，我们通过把长度值修改为4从而增加了一个数据项(undefined)，随后我们又把长度值修改为2，那么原本在数组第3位的"Banana"就被移除出了数组。最后我们把数组长度作为索引值来为数组添加数据，这样可以把数据添加到数组的尾部。

# 数组的方法 #

## 1.栈方法 ##

所谓栈方法，就是JavaScript为数组提供了栈最核心的两个方法，即**push和pop方法**。

var array = [];
    var length = array.push('Apple');
    console.log(length);    //1
    var fruit = array.pop();
    console.log(fruit); //Apple

## 2.队列方法 ##

除了有栈的push和pop方法，JavaScript还为数组提供了**shift和unshift方法**。shift方法是从数组前端取得一个数据，而unshift方法则是在数组最前端放入一个数据。也就是说，如果把shift和push方法搭配使用则可以跟队列一样使用数组，而把unshift和pop方法搭配使用则是反向队列。

var array = [];
    array.pop('Apple');
    var fruit = array.shift();
    console.log(fruit); //Apple

## 3.排序方法 ##

### （1）reverse方法 ###

顾名思义，我们可以猜到，数组的reverse方法实际上就是颠倒数组顺序。

var array = ['Java', 'C++', 'C#'];
    array.reverse();
    console.log(array); //['C#', 'C++', 'Java']

### (2)sort方法 ###

在默认状况下，sort方法按升序排列数组，不过在不传排序规则给sort方法的情况下，sort方法默认是以字典序排序。

var array = [1,3,4,2,34,6];
    array.sort((a, b)=>{
        return a-b;
    });
    console.log(array); //[ 1, 2, 3, 4, 6, 34 ]

在上面代码中，我给sort方法传入了一个函数，也就是前面提到的所谓“排序规则”。

**注：上述两个方法都是直接对原数组进行修改。**

## 4.操作方法 ##

### (1)concat方法 ###

该方法可以用来连接一个乃至多个数组。具体来讲，该方法会先创建当前数组的一个副本，然后把接收到的参数添加到该副本末尾，最后返回这个新构建的数组。若没有给concat方法传递参数，那么将直接返回数组副本。若传递给concat方法的不是数组，则直接将给数据直接添加到数组副本末尾。

var array = ['C++'];
    array = array.concat(['Java', 'C#']);
    console.log(array); //['C++', 'Java', 'C#']
    array = array.concat('JavaScript');
    console.log(array); //['C++', 'Java', 'C#', 'JavaScript']

### (2)slice方法 ###

slice方法顾名思义就是对数组进行裁剪，该方法接受两个参数，第一个参数是裁剪开始位置的索引值，第二个参数则是结束位置的索引值（第二个参数若省略则返回从开始位置到数组末尾元素组成的数组，若不省略则返回从开始位置到结束位置前一个元素所组成的数组）。

var array = ['C++', 'Java', 'C#'];
    array = array.slice(1);
    console.log(array); //['Java', 'C#']
    array = array.slice(0, 1);
    console.log(array); //['Java']

### (3)spilice方法 ###

这个方法估计是数组方法里最强大的一个了，它可以做到对数组进行删除，插入，替换的操作。  
这个方法可以接受多个参数，其中前两个参数不可省略。第一个参数指定操作开始的位置，第二个参数表明从开始位置起要删除的元素数量。

*  删除

var array = ['C++', 'Java', 'C#'];
    array = array.splice(0,1);
    console.log(array); //['Java', 'C#']

*  插入

var array = ['C++', 'Java', 'C#'];
    array = array.splice(0, 0, 'Python');
    console.log(array); //['C++', 'Python','Java', 'C#']

*  替换

var array = ['C++', 'Java', 'C#'];
    array = array.splice(0, 1, 'Python');
    console.log(array); //['Python','Java', 'C#']

**注：上述方法都不会修改原数组。**

## 5.位置方法 ##

位置方法有indexOf和lastIndexOf，区别在于前者从数组前端开始向后查找，后者则是从数组尾部。数组的位置方法是用来查找数组中是否有与传入的数据相同的数据，若有返回其在数组中的索引值（是找到的第一个相同元素的索引），若没有则返回-1。

var array = ['C++', 'Java', 'C#'];
    console.log(array.indexOf('C++'));   //0
    console.log(array.indexOf('Python'));   //-1

## 6.迭代方法 ##

所谓迭代方法，就是该方法会对数组中没一个元素都执行一次传入给迭代方法的函数。迭代方法共有5种：

*  every: 如果函数对每一项都返回true，则返回true
 *  filiter：返回该函数会返回true的元素组成的数组
 *  forEach:仅运行函数，不返回值
 *  map：返回每次函数调用的结果组成的数组
 *  some：如果该函数对数组的任一项返回true，则返回true

## 7.归并方法 ##

归并方法主要有两个，**reduce和reduceRight**。两个在功能上是相同的，不同之处在于遍历的方向，前者从头往后，后者从后往前。归并方法会迭代数组所有元素，然后构建一个最终返回的值。这两个方法都接受两个参数，第一个是在每一项上调用的函数，第二个是作为归并基础的初始值（可选）。而传入的函数又会接受4个参数，分别是：第一个值，第二个值，元素的索引和数组对象。这个函数返回的任何值都会作为第一个参数返回给下一项。

var array = [1,2,3,4,5,6];
    var sum = array.reduce((prev, cur, index, array)=>{
       return prev + cur; 
    });
    console.log(sum);   //21