JavaScript中的Array类型详解

时间：2022-01-01 14:32:55

与其他语言中的数组的区别：

1.JavaScript数组的每一项都可以保存任何类型的数据，一个数组的数组元素可以是不同类型的数据。

2.数组的大小是动态调整的，可以随着数据的添加自动的增长。

1.两种方法构建数组

JavaScript中的数组有两种构建方式：

第一种是使用Array构造函数：

    var colors = new Array(3); //创建一个包含3项的数组，参数3表示创建的数组大小

    var names = new Array("Greg","Bobi"); //创建数组

第二种是使用数组字面量表示法，数组字面量由一对包含数组项的方括号表示，多个数组项之间以逗号隔开。

    var colors = ["red","blue","green"]; //创建一个包含3个字符串的数组

    var names = []; //创建一个空数组

不管用什么方式创建的数组都有下面要讲的一些方法.

查看数组的长度，检查数组的长度可以使用length属性。通过length属性可以得到数组的长度，因为数组的长度永远比数组的索引坐标大1，所有，还可以通过length往数组最后一位添加元素，甚至减少数组长度



        //使用length查看数组长度

        var colors = ["red","blue","green"];

        var count = colors.length;

        alert(count);//3

        //使用length舍去数组元素

        colors.length = 2; //设置数组长度为2，最后一个元素被舍去

        alert(colors); //red,blue

        alert(colors.length); //2

        //使用length向数组添加元素

        colors[colors.length] = "yello"; //项数组中增加元素

        alert(colors);  //red,blue,yello

        alert(colors.length); //3

2.检测数组

检查一个值到底是不是数组，使用Array.isArray()方法

var colors = ["red","blue","green"];

if (Array.isArray(colors)){

    alert(true);  //true

}

3.转换方法

Array也是一个对象，所以也拥有toLocaleString(),toString()和valueOf()方法。

toString():方法会返回由数组中每个元素字符串形式拼接成的一个由逗号分隔的字符串

valueOf():方法返回的还是数组，但是如果使用alert(colors.valusOf())返回的跟toString()返回的完全一样，因为alert（）接收到valueOf()传送来的数组，会再次调用toString（）方法

toLocaleString()：方法要而经常会返回与上面两个方法返回的值相同

4.栈方法

数组可以模拟栈的方法，具体就是先进后出，提供push()方法接收不定的参数，从数组后面压入数组，提供pop()方法从数组末尾移除最后一项。

需要注意的是：push()方法返回值时修改后数组的长度，pop()返回值是移除的项。



var colors = ["red","blue","green"];

var count = colors.push("yello","black");//压入

alert(count); //5

var item = colors.pop(); //取得最后一项

alert(item); //black

5.列队方法

列队方法区别于栈方法，栈方法是先进后出，列队方法是先进先出。

列队方法提供push()函数向数组末尾添加元素，返回值时修改后数组的长度。提供shift()方法移除数组中的第一个项.

列队方法还提供unshift()方法在数组的前端添加任意个项并返回新数组的长度，以此构成了双向列队。

//创建新数组，长度为3

var colors = ["red","blue","green"];

//使用push()向末尾添加两个元素，长度为5

var count = colors.push("yello","black");//压入

alert(count); //5

//移除数组前端的元素，长度为4

var item = colors.shift();

alert(item);  //red

//使用unshift()方法在前端添加一个元素，长度为5

var unCount = colors.unshift("white");

alert(unCount); //5

6.重排序方法

数组的重新排序主要有两种方法：

reserve()：方法会反转数组的排血顺序。

sort():会按照升序排列数组，由于这个升序是按照字典顺序来的，所以可接收一个参数来指定排列顺序，这个参数是函数，函数接收两个值进行比较，如果第一个参数应该位于第二个之前则返回一个负数。

注意：reserve()和sort()方法的返回值是经过排序之后的数组

7.操作方法

操作方法有几个常用的方法：

contact():方法可以基于当前数组中的所有项创建一个新数组

slice():方法是切片操作，接收两个参数，起始和结束为止，只有一个参数时，表示这个参数开始到结束。

splice()：方法是切片方法的升级，主要用途是向数组的中部插入元素，接收三个参数，第一个参数是起始位置，第二个参数是要删除的元素项数，第三个参数可以是任意数量的，如果有的话就插入到前面两个参数的位置

//创建新数组

var colors = ["red","blue","green","red","black"];

//concat()方法

var colors1 = colors.concat();

var colors2 = colors.concat("1","2");

alert(colors1); //red,blue,green,red,black

alert(colors2); //red,blue,green,red,black,1,2

//slice()方法

var colors3 = colors.slice(1,3);

alert(colors3); //blue,green

//splice()方法

//使用splice()方法删除

var removed = colors.splice(0,1);//删除第一项

alert(removed);//red 返回的数组中只包含一项

使用splice()方法插入

removed = colors.splice(1,0,"1","2");//从位置1开始插入两项

alert(colors); //red,1,2,blue,green,red,black

alert(removed); //返回一个空数组

//使用splice()方法替换

removed = colors.splice(1,2,"Rocco","Bobi");//插入两项，删除两项项

alert(colors);//red,Rocco,Bobi,red,black

alert(removed);//blue，green 返回的数组包含两项

8.位置方法

位置方法主要有两个，全都接收两个参数，要查找的项和可选的表示查找起点位置的索引。如果查找到就返回要查找的项在数组中的下标，如果没有找到就返回-1

indexOf():从数组的开头开始向后查找

lastIndexOf():从数组的末尾开始向前查找

//创建新数组

var colors = ["red","blue","green","red","black"];

//从前往后查找

alert(colors.indexOf("red"));//0

//从后往前查找

alert(colors.lastIndexOf("red"));//3

9.迭代方法

数组的迭代方式比较多，可以使用for循环的两种不同使用方法，还可以使用属于数组的5个迭代方法

首先看for循环迭代数组

//创建新数组

var colors = ["red","blue","green","red","black"];

//第一种for循环

for (var i=0; i<colors.length; i++){

    alert(colors[i]);

}

//第二种for循环

for (var i in colors){

    alert(colors[i]);//此处的i也是索引，不是数组的元素

}

数组定义的5个迭代方法

every():对数组中的每一项运行给定的函数，如果数组中的每一个元素在该函数中都返回true，则返回true。

some():对数组中的每一项运行给定函数，如果该函数对任一项返回true，就会返回true。

filter():对数组中的每一项运行给定的函数，返回该函数会返回true的元素项组成的新数组。

forEach():对数组中的每一项运行给定的函数，这个方法没有返回值。

map():对数组中的每一项运行给定函数，返回每次函数调用的劫夺组成的数组。

var numbers = [1,2,3,4,5,4,3,2,1];

//every()

var everyResult = numbers.every(function (item,index,array) {

    return (item > 2);//只有每一个元素都大于2，结果才会返回true

});

alert(everyResult);//false

//some()

var someResult = numbers.some(function (item,index,array) {

    return (item >2);//只要有一个元素大于2，结果就返回true

});

alert(someResult);//true

//filter()

var filterResult = numbers.filter(function (item,index,array) {

    return (item > 3);//收集满足大于3的元素，组成一个新数组

});

alert(filterResult);//[4,5,4]

//map()

var mapResult = numbers.map(function (item,index,array) {

    return item*2;

});

alert(mapResult);//[2,4,6,8,10,8,6,4,2]

//forEach()

var forEachResult = numbers.forEach(function (item,index,array) {

//            alert(item);

    //对数组的每一项执行该函数，没有返回值

})

10.归并方法

数组的归并有两种两个函数，使用方法是一样的，不同之处在于一个是从前向后，一个是从后向前。

reduce():从数组第一个开始，逐个遍历到最后

reduceRight():从数组的最后一个开始，逐个遍历到第一项

以上两个方法都接收4个参数，分别是：前一个值，当前值，项的索引，数组对象。每一次的遍历都会把结果传递到下次操作的前一个值上

var values = [1,2,3,4,5];

var sum = values.reduce(function (prev,cur,index,array) {

    return prev+cur;

});

alert(sum);//15

以上是reduce()的使用方法，reduceRight()使用方法相同，只是从后向前迭代。

相关文章