Javascript中的Array()类型(很全)

Array类型的介绍

Array()类型是Javascript中最常见的类型，但是Javascript中的数组类型和其他语言中的数组类型有着明显的区别：Javascript中的数组每一项可以保存任何类型的数据，不是固定的数据类型的数据。
例如：

var arr = ["第一个数据", 2, ["第二个数据", 33], {name : "名字", age:20}, true，undefined]

这种写完是可以的。其次，Javascript数组的大小是可以动态调整的，可以随着数据的添加自动增长。

创建数组的基本方式

1.使用Array()构造函数来创建数组

var arr = new Array()

该方法，如果我们提前知道我们要创建数组的数目大小，可以在Array()的()中输入数组的数目，例如如下代码，创建数组长度为20的数组：

var arr = new Array(20)

同时，我们也可以向Array()数组中传递数组中包含的项：

var arr = new Array("第一项","第二项","第三项")

2.使用数组的字面量表示法
如下所示：

var arr = ["第一项","第二项","第三项"]

通常，我们访问数组中的元素是通过arr[访问元素的索引]来访问的，如果我们要知道数组中一共包含的项数是多少(数组的长度),我们通常用数组的length属性。
例如：

var arr = [1,2,3,4];
console.log(arr.length)    //返回值为4

值得注意的是，数组的length属性有一个特点------它不是只读的，这就说明，我们可以通过数组的length属性，来实现数组的添加长度，和删除元素。例如：

var arr = ["第一项","第二项","第三项"]
arr.length = 2
console.log(arr)     //此时返回的是["第一项","第二项"]
arr.length = 4
console.log(arr[3])    //此时数组的长度为4，该结果是undefined

检测数组

我们该如何判断一个变量是否是数组类型呢？
这个时候我们有两种方式判断：instanceof操作符和Array.isArray()方法
例如如下的代码：

    var arr = [1,2,3];
    console.log(arr instanceof Array);   //输出的为true

    var bool1 = Array.isArray(arr);
    console.log(bool1);                        //输出为true

数组转换为字符串的方法

这里面有四种方法：valueOf()方法 , toString()方法 , toLocaleString()方法 , join()方法。

valueOf()方法：该方法返回并不是字符串(我也不是很清楚为什么把这个方法放到转换方法这里面来)，此方法返回的是该数组的本身。

    var arr1 = ["red","green","black"];
    console.log(arr1.valueOf());         //["red","green","black"]

toString()方法：调用数组的toString()方法会返回由数组中的每个值的字符串形式拼接成的一个以逗号分隔的字符串。

    var arr1 = ["red","green","black"];
    console.log(arr1.toString());         //red,green,black

    var arr2 = arr1.toString();
    console.log(arr2)							//red,green,black

toLocaleString()方法：该方法我不经常用，本人觉得跟toString()方法类似(具体的也是有一些区别的，这里面不说了，有兴趣百度一下~)

join()方法：该方法，我认为是一个特别重要的方法，与python中的用法是一样的，能将数组转换为字符串，但是它的好处是可以改变字符串中字符之间的符号，例如：

    var arr1 = ["red","green","black"];
    console.log(arr1.join("|||"))              //red|||green|||black

在join()的()内添加什么字符串，调用该方法的数组在转换成字符串的时候，其字符之间的符号就是()内显示的字符，如果()内没有任何值，或者传入的是undefined，那么默认用逗号(’,’)作为分隔符。

数组中的栈方法及队列方法

数组中的栈和队列一共有四种方法:push()方法 , pop()方法 , shift()方法 , unshift()方法。
栈的定义：栈是代表数组中只对一端(数组末端)进行插入和删除操作。遵循的原则是先进先出。
队列的定义：队列代表数组中插入和删除元素的时候，只由一端插入，一端删除。遵循的原则是先进先出。

与栈相关的方法：

1.push()方法：
push()方法可以在()内接收任意数量的参数，把它们按照从前到后的顺序依次添加到数组的末尾，并且最终返回修改后数组的长度。

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

2.pop()方法：
pop()方法表示从数组的末尾移除最后一项，减少数组的length，最终返回的是移除的项的值

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

与队列相关的方法：

1.shift()方法：
shift()方法能够移除数组中的第一个项，并且返回该项，同时数组的长度减1。

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

2.unshift()方法：
unshift()方法能够在数组的前端添加任意个项，并且返回数组的长度。

    var arr = [1,2,3,4,5]
    arr.unshift(3,5,6,7)
    console.log(arr)                      //[3, 5, 6, 7, 1, 2, 3, 4, 5]

因此如果我们想用来模拟队列的操作，我们可以同事使用unshift() 和 pop(),或者从相反的角度，使用push() 和 shift()。

数组中重排序的方法

在Javascript中给了我们排序的方法，sort()方法和reverse()方法。sort()方法可以按照升序排列数组项，reverse()会将已有的数组元素反转。
这两个方法都是很实用的方法，但是我们在用到sort()方法的时候会存在一定的问题，如下：

    var arr = [2,5,10]
    console.log(arr.sort())         //[10,2,5]

上述代码，由于sort()是升序排列，我们得到的结果正常应该是[2,5,10]，但是最终的结果却是[10,2,5],这个问题很多初学者应该十分困惑。具体原因是这样的，Javascript中的sort()方法，虽然是升序排列，但是sort()方法会调用数组的toString()方法，将数组中的每一项都转换成字符串，因此上述例子中的数组就变成的字符串数组，我们在比较的时候“1”是小于“2”和“5”的，所以，我们得到的结果是[10,2,5]。
有上述问题可知，sort()排序方法在很多时候不是最佳的解决方案，那么我们如何优化这个方法呢？我们将在sort()这个方法中传递一个比较函数，这个比较函数接受两个参数，如果第一个参数在第二个参数之前，则返回-1；如果两个参数相等，则返回0；如果第一个参数在第二个参数之后，则返回1。
接下来就是比较函数：

function compare(value1,value2){
	if(value1>value2)
		return -1
	else if(value1 < value2)
		return 1
	else
		return 0
}

我们将上述的比较函数传入sort()方法中，如下图所示：

    function compare(value1,value2){
        if(value1>value2)
            return -1;
        else if(value1 < value2)
            return 1;
        else
            return 0
    }
    var arr = [2,5,10];
    arr.sort(compare)
    console.log(arr);        //[2,5,10]

数组的几种操作方法

1.concat()方法：
concat()表示可以基于当前数组中的所有项创建一个新数组。该方法的执行过程是：先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新的数组。
值得注意的是：该方法不会改变原来的数组！！！

    var arr1 = ["red","green","black"];
    var arr2 = arr1.concat("yellow",["black","blue"]);
    console.log(arr1)          //["red", "green", "black"]
    console.log(arr2)          //["red", "green", "black", "yellow", "black", "blue"]

2.slice()方法：
slice()相当于切片，它基于当前的数组中的一项或者多项创建一个新数组。slice()方法可以接收一个或者两个参数，表示返回项的起始位置和结束位置。在一个参数的情况下，slice()返回的是：从起始位置一直到原数组末尾的所有元素组成的数组。在两个参数的情况下，slice()返回的是：从起始位置到结束位置(不包括结束位置元素)的项组成的数组。
值得注意的是：该方法不会改变原来的数组！！！

    var arr1 = ["red","green","black"];
    var arr2 = arr1.slice(1);
    var arr3 = arr1.slice(1,2)
    console.log(arr2)							//["green", "black"]
    console.log(arr3)							//["green"]

3.splice()方法：
该方法有多种用法，主要的用途是向数组的中部插入项。
该方法的使用规则：
(1).删除：可以删除任意数量的项，指定两个参数：要删除的第一个项的位置，删除的项数。
例如：splice(0,2)代表：从第0项开始删除，一共删除两个项。
(2).插入：可以向指定的位置插入任意数量的项，指定三个参数：起始位置，0(要删除的项数),和要插入的项。如果说要插入多个项，则可以有第四个，第五个，以及任意多个项。
例如：splice(0,0,“red”,“green”,“blue”)代表从第0个位置开始插入3个项
(3).替换：可以向指定的位置插入任意数量的项，并且同时删除任意数量的项。指定三个参数：起始位置，要删除的项数，和要插入的任意数量的项。插入的项数与删除的项数不一定相同。
例如：splice(0,2,“red”,“green”,“blue”)代表，删除从第0个位置开始的两个项，并且在第0个位置后插入3个项。

数组的索引位置相关的方法

indexOf()方法 和 lastIndexOf()方法：
这两个方法都接收两个参数：要查找的项，和(可选)表示查找起点位置的索引，这两个方法的区别是：indexOf()是从头开始，lastIndexOf()是从尾开始
indexOf()方法

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

lastIndexOf()方法与此相反。

数组中的迭代方法

Javascript定义了5中迭代方法。每个迭代方法都接受两个参数：每一项上运行的函数和(可选)运行该函数的作用域对象----影响this的值。这5个方法中的函数都会接受3个参数：数组项的值，该项在数组中的位置，和数组对象本身。我将这5个方法分成3组进行介绍

第一组：every()方法和some()方法

1.every()方法：对数组中的每一项运行给定的函数，如果该函数的每一项都返回true，则最终的结果返回true。(个人认为相当于“与”)。
2.some()方法：对数组中的每一项运行给定的函数，如果该函数的任一项都返回true，则最终的结果返回true。(个人认为相当于“或”)。

    arr4 = [1,2,3,4,5,6,7,8,9,10];
    var everyResult = arr4.every(function (item,index,arr4){
        return item>=2;
    });
    console.log(everyResult)                    //false
    
    var someResult = arr4.some(function (item,index,arr4) {
        return item>2
    })
    console.log(someResult)                     //ture

第二组：filter()方法和map()方法

1.filter()方法：返回的是一个数组，是利用指定的函数确定是否在返回的数组中包含某一项。相当于过滤，具体看例子。
2.map()方法：返回的是一个数组，这个数组的每一项都是在原始数组中的对应的项上进行运算之后得到的结果，相当于一起进行运算，具体看例子。

    arr4 = [1,2,3,4,5,6,7,8,9,10];
    var filterResult = arr4.filter(function (item,index,arr4) {
        return item>2
    })
    console.log(filterResult)                   //[3, 4, 5, 6, 7, 8, 9, 10]

    var mapResult = arr4.map(function (item,index,arr4) {
        return item>2
    })
    var mapResult1 = arr4.map(function (item,index,arr4) {
        return item*2
    })
    console.log(mapResult)                //[false, false, true, true, true, true, true, true, true, true]
    console.log(mapResult1)              //[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

第三组：forEach()方法
该方法与for循环的作用相同，不具体讲述。大致的执行效果如下：

var arr = [1,2,3,4,5]
arr.forEach(function(item,index,array){
//要执行的程序
})

写了好久终于写完了Javascript中Array()类型的一些操作和方法，以上的这些可能不是很全面，但是我认为掌握了以上这些，基本上对于数组方面的问题应该没什么困难了。

接下来的一段时间，我还会继续做Date(),Function(),对象，正则表达式，等等关于JS的笔记。已经做前端有一段时间了，框架用过Vue,Element,Echarts，但是越来越能感觉到JS的重要性，虽然现在好多前端都直接套模板就可以了，但是总觉得少了点什么，JS的知识掌握的也越来越不牢固，希望重新的这一次复习能让我重拾JS。

后续也会继续的更新，觉得慢慢会养成更新的习惯。虽然更的很累，但是还蛮有成就感了，还能加深一下印象，造福广大初入前端的同志们，何乐而不为？