JavaScript之引用类型（Array类型）

Posted 2020-10-16 sminocence

除了Object类型，Array是ECMAScript中最常用的类型了。
与其他语言不同的是，ECMAScript数组的每一项可以保存任何类型的数据。
而且,ECMAScript数组的大小是可以动态调整的，可以随着数据的添加，数组的长度自动增长。

创建数组的方式

1.使用Array构造函数

var colors1 = new Array();
var colors2 = new  Array(20);
var colors3 = new Array("ggr",11,"grr");

2.使用数组字面量表示法

var colors = ["red","gren"];
var values = [1,2,];//强烈建议不要这样使用，因为在不同浏览器下，实现方式不同
//在IE中，第三个值为undefined，在其他浏览器中，只会创建包含1和2的数组。

数组的length属性

这个属性不是只读的，可以设置这个属性，可以从数组的末尾移除项或向数组中添加新项。

var colors = ["res","rer","gege"];
colors.length = 2;
alert(colors[2]);//undefined

检测数组

1.在一个网页或者全局作用域中，使用instanceof就能搞定。

value instanceof Array

2.如果网页中出现多个框架，实际上就存在两个以上不同的全局执行环境。为了解决这个问题，提供了Array.isArray(value)的方法。支持Array.isArray()的方法浏览器有IE9+,Firefox4+。

下面总结一下数组的这些方法

根据我自己的情况，比较熟的方法，就列举一下，就不详细说明了。
1.转换方法
所有对象都具有toLocaleString(),toString(),valueOf()方法，其中tostring()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
而调用valueOf方法返回的还是数组。如果没有显示调用toString()方法，还是会在后台调用toString()方法。这三种方法在默认情况下都会以逗号分隔的字符串的形式返回数组项，如果使用join()方法，则可以使用不同的分隔符。数组的join方法只接受一个参数，即用作分隔符的字符串。
2.类似栈的方法：pop和push，栈的添加和删除都在栈顶进行操作，所以是一个后进先出的数据结构。
push（推入）：可以接受任意数量的参数，然后返回修改后的数组的长度。
pop（弹出）：可以从数组末尾移除最后一项，减少数组的长度，返回删除的项。
3.当然除了类似栈的方法，还有类似队列的方法：shift和push。队列是先进先出，添加是在队尾，移除是在队首。
shift：移除数组中的第一项，并返回该项。
push：是在数组的末尾逐个添加。
结合使用shift和push可以像队列一样使用数组。
unshift：在数组前端添加任意个元素，并返回数组的长度。
pop：在数组末尾删除一项，返回删除的项。
结合使用unshift和pop可以反向模拟队列。
4.重排序方法：reverse和sort，这两个返回的是排序过后的数组。
reverse：顾名思义，就是将数组的顺序进行反转。
sort方法：在默认情况下，sort方法进行排序是按升序排列数组项，会调用每个数组项的toString()方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort方法比较的也是字符串。
所以在进行数字排序的时候会出现一些问题，可以接受一个函数。

5.操作方法
concat():会基于当前数组中的所有项创建一个新数组，最开始，先创建这个数组的一个副本，然后将接受到的参数添加到这个副本中，最后返回一个新构建的数组。

var colors = ["ff","ffff"];
var colo = colors.concat();
console.log(colors);
console.log(colo);
console.log(colors === colo);

slice():切片，接受一个或两个参数。
如果只有一个参数，就返回这个参数指定位置到数组末尾的所有项。
如果有两个参数，就是起始位置和结束位置，返回起始位置到结束位置的所有项，但是不包括结束位置那一项。
slice也不会改变 原数组。

var colors = ["ff","ffff"];
var colo = colors.slice(0,1);
console.log(colors);
console.log(colo);

如果参数是个负数，那么就用数组长度加上每个参数，再进行返回。
如果第一个参数大于第二个参数，那么就返回空数组。

splice()方法：这个方法是最强大的方法了。主要用途是向数组的中部插入项。
（1）删除：两个参数：删除的起始位置，删除项数。
（2）插入：可以向指定位置插入任意数量的项。三个参数，起始位置，0（要删除的项数），要插入的项。如果插入多个项，可以传入第四，第五歌参数。

colors.splice(2,0,"geet","grrg")

（3）替换：可以向指定位置插入任意数量的项，且会删除任意数量的项。三个参数：起始位置，要删除的项数，要插入的任意数量的项。
要插入的项和删除的项数不一定相等。
总的来说，这三个方法的参数含义大概相同，可以找个比较好的方法来记忆。第一个是起始位置（删除或者添加），删除的项数，插入的项数。
这个方法对数组的改变，会直接影响到原数组。splice返回的是删除的项，如果没有就返回一个空数组。

6.位置方法:indexOf(),lastIndexOf().
既然是位置方法，当然返回的是元素在数组中的位置。这两个方法都接受两个参数，要查找的项，（可选的）要开始查找的起始位置的索引。
indexOf是从数组开头进行查找，lastIndexOf是从数组末尾开始向前进行查找。最后返回项在数组中的索引。如果没有找到，就返回-1.
支持这两个方法的常用浏览器有：IE9+,Firefox2+，chrome。

7.迭代方法
一共有5个迭代的方法。
every（），
filter（），
forEach(),
map(),
some(),
都接受这样一个函数参数：

function(item,index,array){
    ...//
}

支持这些迭代方法的常用浏览器有IE9+,Firefox2+，chrome。

8.归并方法
reduce(),reduceRight().这两个方法的区别在于reduce从数组前面进行迭代，一直到最后。reduceRight()是从数组后面进行迭代，到数组的开头。
下面通过这个例子来说明

var values = [1,5,4,7];
var sum = values.reduce(function(prev,cur,index,array){
    return prev+cur;
});
console.log(sum);//17

支持这两个归并方法的常用浏览器有：IE9+,Firefox3+，chrome。