JavaScript中数组类型的属性和方法

川长思鸟来 2023-08-17 17:44 141阅读 0赞

除了Object，Array类型应该是ECMAScript中最常用的类型了。

ECMAScript的数组虽然也是数据的有序列表，但还是与其他语言中的数组有很大的区别。比如ECMAScript数组每一项都可以保存任何类型的数据，而且数组的大小可以随着数据的添加自动的增长以容纳新数据。

**1.创建数组**

创建数组的基本方式有两种：

1 //第一种，使用Array构造函数
    2 var arr1 = new Array();                       //创建空数组
    3 var arr2 = new Array(20);                     //创建数量为20的数组（即 arr.length=20）
    4 var arr3 = new Array("red", "blue", "grey");  //创建一个包含3个字符串值的数组
    5 
    6 //第二种，使用数组字面量表示法
    7 var arr = ["red", "blue", "grey"];            //数组项之间以逗号隔开

创建了数组后，可以使用方括号和基于0（从0开始）的数字索引读取和设置数组的值（如colors\[0\]）。访问数组时，如果索引值小于数组长度，则返回对应项的值。设置数组的值时语法相同，但会替换对应位置的值。

但如果索引值**大于或等于**数组长度，数组就会**自动增加**到该**索引值加1**的长度。如下所示：

1 var colors = ["red", "blue", "grey"];
    2 colors[9] = "green";
    3 alert(colors.length);                 //10

数组的长度变为10，但位置3至8实际都是不存在的，被访问时都将返回underfined。

另外，直接设置数组的length属性，可以从数组的末尾移除或添加项，即属性length是可读可写的：

1 //移除第3项（索引值为2）
    2 var colors = ["red", "blue", "grey"];
    3 colors.length = 2;
    4 alert(colors[2]);      //underfined

原数组中尾项已被移除，故已无法访问。但考虑到变量值为underfined有两种情况：**变量未被定义，或变量未初始化**。所以，当通过设置length值来增长数组长度时，新增的每一项的值也都是underfined。故无法通过访问具体一项数组的值来确定数组的长度是否被改变。

**2.检测数组**

上一篇说到ECMAScript提供instanceof操作符，检测对象具体是什么类型。但用于检测数组，instanceof只能在一个全局作用域中达到令人满意的效果。

在包含多个框架的网页中，存在两个以上不同的全局作用域，从而存在两个以上不同版本的Array构造函数。若从一个框架向另一个框架传入数组，那传入的数组与传入的框架中原生创建的数组具有不同的构造函数，instanceof可能将它们视作不同的对象。

所以，ECMAScript5新增了**Array.isArray()**方法，目的只为确定某值是不是数组（是则返回true），不考虑全局执行环境。

**3.转换字符串方法**

*  **toString()**
 *  **valueOf()**
    
        1 var colors = ["red", "blue", "grey"];
        2 alert(colors.toString());   //red,blue,grey
        3 alert(colors.valueOf());    //red,blue,grey
        4 alert(colors);              //red,blue,grey
    
    toString()方法返回数组中每个值的字符串形式拼接成的**以逗号隔开**的字符串。调用valueOf()方法返回的还是数组。而alert()会在后台调用toString()方法，所以会得到与直接调用toString()方法相同的结果。

*  **toLocaleString()**

调用toLocaleString()也会返回一个数组值的以逗号分隔的字符串，与toString()方法的区别在于它调用的是**数组每一项**的toLocaleString()方法。

*  **join()**
    
        var colors = ["red", "blue", "grey"];
        alert(colors.join());        //red,blue,grey
        alert(colors.join("&"));     //red&blue&grey
    
    join()方法可以接收一个**用作分隔符的字符串**为参数，以分隔数组值。当它不传入参数时，则默认使用逗号作为分隔符。

**4.栈方法**

ECMAScript为数组提供了push()和pop()方法，以实现类似栈的行为（从数组末尾添加和删除）。

<table> 
 <tbody> 
 <tr> 
 <td style="text-align:center;">方法</td> 
 <td style="text-align:center;">接收参数</td> 
 <td style="text-align:center;">对数组影响</td> 
 <td style="text-align:center;">返回值</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">push()</td> 
 <td style="text-align:center;">可以接收任意数量的参数</td> 
 <td style="text-align:center;">将参数逐个添加到数组末尾</td> 
 <td style="text-align:center;">返回修改后的数组的长度</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">pop()</td> 
 <td style="text-align:center;">不接收参数</td> 
 <td style="text-align:center;">从数组末尾移除最后一项，减少数组length值</td> 
 <td style="text-align:center;">返回移除的项</td> 
 </tr> 
 </tbody> 
</table>

**5.队列方法**

除栈方法外，还有shift()和unshift()方法，与push()和pop()结合，可以实现类似队列的行为。

<table> 
 <tbody> 
 <tr> 
 <td style="text-align:center;">方法</td> 
 <td style="text-align:center;">接收参数</td> 
 <td style="text-align:center;">对数组影响</td> 
 <td style="text-align:center;">返回值</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">shift()</td> 
 <td style="text-align:center;">不接收参数</td> 
 <td style="text-align:center;">移除数组中的第一项</td> 
 <td style="text-align:center;">返回移除的项</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">unshift()</td> 
 <td style="text-align:center;">可以接收任意数量的参数</td> 
 <td style="text-align:center;">将参数逐个添加到数组前端</td> 
 <td style="text-align:center;">返回修改后的数组的长度</td> 
 </tr> 
 </tbody> 
</table>

shift()和push()方法结合，可以在数组末尾添加，在头部删除。

而结合unshift()和pop()方法，可以从相反的方向模拟队列。

**6.重排序方法**

数组中存在两个可以直接用来重排序的方法：reverse()和sort()。

reverse()方法可以直接反转数组项的顺序，但也只有这一项功能：

1 var arr = [1,2,3,4,5];
    2 arr.reverse();
    3 alert(arr);             //5,4,3,2,1

sort()方法则可以灵活地对数组排序，默认情况下是按**升序**排列数组项。

sort()方法的原理是对数组每一项调用toString()转型方法，获得字符串后进行比较。所以不论数组项的数据是什么类型，sort()方法都是当做字符串比较。所以在某些情况下，sort()方法不能给出令人满意的效果，如下：

1 var arr = [10,2,13,4,5];
    2 arr.sort();
    3 alert(arr);              //10,13,2,4,5

改进后，sort()方法可以接收一个比较函数作为参数，比较函数则可以接收**两个进行比较的参数**。

若函数返回负数，表示参数1应该位于参数2之前；返回0，则表示相等；返回正数，则表示参数1应位于参数2之后。如下，是一个让sort()方法按**升序**排列的比较函数：

1 //比较函数
    2 function compare(value1,value2){
    3     return value1 - value2;
    4 } 
    5  
    6 var arr = [10,2,13,4,5];
    7 arr.sort(compare);
    8 alert(arr);              //2,4,5,10,13

**7.操作方法**

上文中提到push()方法、pop()方法、shift()方法和unshift()，可以对数组的头部和末尾进行添加或是删除的操作。对于包含在数组中的项的操作，ECMAScript也提供了一些方法。

**1) concat()方法**

此方法先创建一个当前数组的副本，若无参数，则只复制当前数组、返回该副本；若传入参数（参数可以是一或多个数组，或者直接是数据值），则将参数值都添加到副本数组中，并返回结果数组。

1 var colors1 = ["red", "blue", "grey"];
    2 var colors2 = colors1.concat("green", ["black", "white"])
    3 alert(colors1);        //red,blue,grey
    4 alert(colors2);        //red,blue,grey,green,black,white

需要注意，concat()方法不影响原来的数组。

**2) slice()方法**

slice()方法可以基于当前的数组中的一项或多项创建一个新数组，接收一个或两个参数。

接收一个参数时，返回从该**参数指定位置**到当前**数组末尾**的所有项；接收两个参数时，返回**起始位置**（参数1）到**结束位置**（参数2）的所有项，但返回的项中不包括结束位置对应的项，如参数为1和4时，表示复制当前数组从位置1到位置3的项。见下列例子：

1 var colors1 = ["red", "blue", "grey"， "green", "black", "white"];
    2 var colors2 = colors1.slice(1)；
    3 var colors3 = colors1.slice(1，4)；
    4 
    5 alert(colors2);        //blue,grey,green,black,white
    6 alert(colors3);        //blue,grey,green

slice()方法同样不影响原本的数组。

**3) splice()方法**

splice()方法可以说十分强大，可以对数组中的任意位置进行删除、插入和替换。

**删除**：传入两个参数——要删除的第一项的位置、要删除的项数，如colors.splice(0,2)会删除数组的前两项。

**插入**：传入3个以上参数——起始位置、0、要插入的任意数量的项。**第二项固定为0，表示删除0项**。如colors.splice(2,0,"red", "black")会在数组位置2开始插入字符串。

**替换**：结合删除和插入功能，在被删除的项的位置插入新的项，就可以达到替换的效果，可接收3个以上参数——起始位置、要删除的项数、要插入的任意数量的项。

见如下例子：

1 var colors1 = ["red", "blue", "grey"];
    2 var colors2 = colors1.splice(0,1)；                      //删除
    3 var colors3 = colors1.splice(1, 0, "green", "black")；   //插入
    4 var colors4 = colors1.splice(1, 1, "white")；            //替换
    5  
    6 alert(colors2);        //blue,grey
    7 alert(colors3);        //red, green, black, blue,grey
    8 alert(colors4);        //red, white, grey

**8.位置方法**

ECMAScript5新增了indexOf()和lastIndexOf()两个位置方法，接收两个参数——要查找的项、查找起点位置的索引（可不选）。indexOf()从数组头部向后查找，lastIndexOf()则是从数组末尾向前查找，返回的都是要查找的项在数组中的位置（若未找到则返回-1）。

需要注意的是，比较要查找的项和数组中的每一项时，会使用全等操作符（===），表示要查找的项必须严格相等（类型和值都一致）。

**9.迭代方法**

ECMAScript5提供的5个迭代方法，都是接收两个参数——在数组每一项上运行的函数、运行该函数的作用域对象（可不选）。而作为参数的函数又可以接收三个参数——数组项的值、该项在数组中的位置、数组对象本身。

<table style="width:602px;"> 
 <tbody> 
 <tr> 
 <td style="text-align:center;">方法</td> 
 <td style="text-align:center;">返回</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">every()</td> 
 <td style="text-align:center;">参数函数对数组每一项都返回true，则返回true</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">filter()</td> 
 <td style="text-align:center;">返回该参数函数返回true的项组成的数组</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">forEach()</td> 
 <td style="text-align:center;">无返回值，只对数组每一项运行参数函数</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">map()</td> 
 <td style="text-align:center;">返回每次参数函数调用的结果组成的数组</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">some()</td> 
 <td style="text-align:center;">参数函数对数组有任何一项返回true，就返回true</td> 
 </tr> 
 </tbody> 
</table>

举一例：

1 var numbers = [10, 2, 23, 14, 7,18];
    2 
    3 var filterResult = number.filter(function(item, index, array){
    4     return (item > 10);
    5 });
    6 
    7 alert(filterResult);       //23,14,18

**10.归并方法**

ECMAScript新增了reduce()和reduceRight()两个方法，用以归并数组。两个方法都接收两个参数——在数组每一项上调用的函数、作为归并基础的初始值。传入的函数又可以接收4个参数——**前一个值、当前值、项的索引和数组对象**，用以迭代数组所有的项。

reduce()方法从数组第一项开始向后遍历，reduceRight()则是从相反方向遍历。见如下求和例子：

1 var numbers = [10, 2, 23, 15];
    2 var sum = numbers.reduce(function(pre, cur, index, array){
    3     return (pre + cur);
    4 });
    5 alert(sum);        //50

两个归并方法迭代数组所有的项，然后只构建一个最终返回的值，这是和5个迭代方法最大的差别。

--------------------

上一篇中对ECMAScript中变量的基本类型值和引用类型值进行了探讨，接下来本来想对引用类型进行讨论。但由于引用类型中数组类型的内容较多，所以先做单独讨论（如此也大概写了差不多一个下午的时间QAQ），可能有些啰嗦，再接再厉吧！

转载于:https://www.cnblogs.com/Livia-Peng/p/js\_Array.html