JavaScript之Array类型
Array类型
Array类型的特点
（1）是一个有序列表
（2）数组的每一项可保存任何类型的数据
（3）数组的大小使可动态调整的，随着数据的添加自动增长以容纳新增数据
数组的创建
（1）方式一：
var colors = new Array();
var colors = new Array(20);//设置数组的大小
var colors = new Array("red","blue","green");//设置好数组中包含的项
var colors = Array();//可以省略new操作符
如果给构造函数Array()只传递一个值，如果这个值是数值，那么就会创建一个该数值大小的数组，如果这个值是其他类型，那么就会创建包含那个值的只有一项的数组。
（2）方式二：数组字面量表示法
数组字面量由一对包含数组项的方括号表示，多个数组项之间以逗号隔开。
var colors = ["red","blue","green"];//每个数据之间使用逗号分隔
var names = [];//创建一个空数组
var values = [1,2,];//这是不规范的！！随着使用的浏览器的不同，其会被解析为包含2或3项的数组
var values = [,,,,];//也是不规范的！！同上数组的访问
读取和设置数组的值时，使用方括号并提供相应值（基于0的数字索引）
如果读取某个值的索引超过了数组现有的项数，也是不会出错的，只是访问的位置是undefined的。
如果设置某个值的索引超过了数组现有的项数，数组就会自动添加到该索引值加1的长度。
数组中有一个length属性，记录了数组的长度。且length属性不只是可读的。通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项，且新加入的项为undefined的。
检测某个对象是否为数组
判断某个对象是否为数组类型：Array.isArray(对象名)
在ECMAScript中，所有对象都可以看做是Object的实例，所有对象都具有toLocaleString(),toString()和valueOf()方法。
调用数组的toString()方法会返回有数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
调用valueOf()返回的还是数组。
<!DOCTYPE html>
<html>
<body>
<script>
var aName = ["red","blue","green"];
//alert(aName.toString());
document.write(aName.toString()+"<br>");
//alert(aName.valueOf());
document.write(aName.valueOf());
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<script>
var person1 = {
toLocaleString:function(){
return "nik";
},
toString:function(){
return "niktostring";
}
};
var person2 = {
toLocaleString :function(){
return "haha";
},
toString:function(){
return "hahatostring";
}
};
var people = [person1,person2];
document.write(people+"<br>");
document.write(people.toString()+"<br>");
document.write(people.toLocaleString()+"<br>");
</script>
</body>
</html>
分析：在上面的代码中，定义了两个对象：person1和person2。而且在每个对象中定义了toString()方法和toLocaleString()方法，这两个方法返回不同的值。创建一个包含前面定义的两个对象的数组。在将数组传递给document.write（）时，实际上是调用了数组每一项的toString（）方法，所以结果与下一行显示调用toString（）方法得到的结果相同。而当调用数组的toLocaleString()方法时，实际是调用了数组每一项的toLocaleString()方法。
使用join（）方法，可以使用不同的分隔符来构建输出的字符串。join()只接受一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。
document.write(people.join("*")+"<br>");//niktostring*hahatostring<!DOCTYPE html>
<html>
<body>
<script>
var person1 = {
toLocaleString:function(){
return "nik";
},
toString:function(){
return "niktostring";
}
};
var person2 ;
var people = [person2,person1];
document.write(people.join("*")+"<br>");
document.write(people.toString()+"<br>");
document.write(people.toLocaleString()+"<br>");
</script>
</body>
</html>栈方法
ECMAScript为数组提供了push()和pop()方法，以便实现类似栈的行为。
push()可以接受任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
pop()从数组末尾删除最后一行，减少数组的length值，然后返回移除的项。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var colors = new Array();
var count = colors.push("red","white");
document.write(count+"<br>");
var white1 = colors.pop();
document.write(white1+"<br>");
document.write(colors.length);
</script>
</body>
</html>队列方法
ECMAScript为数组提供了方法，使其实现队列的功能（先进先出）。
shift()方法能够移除数组中的第一个项并返回该项，同时将数组长度减1。
unshift()方法能够在数组前端添加任意个项并返回新数组的长度。
push()方法向数组末端添加项，返回数组长度。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var colors = new Array();
var count = colors.push("red","white");
document.write(count+"<br>");
var white1 = colors.shift();
document.write(white1+"<br>");
document.write(colors.length);
</script>
</body>
</html>
重排序方法
数组中已经存在的两个直接用来重新排序的方法：reverse(）和sort()。
reverse（）方法只是会反转数组项的顺序。
sort()方法按照升序排列数组项，即最小的值位于最前面，最大的值排在最后面。为了实现排序，sort()方法会调用每个数组项的toString(）转型方法，然后比较得到的字符串，以确定如何排序。
由于sort()方法是根据测试字符串的结果改变原来的顺序。所以虽然5小于10，但是作为字符串比较时，“10”会位于“5”的前面，所以数组的排序结果不符合数字大小的顺序。
因此sort()方法可以接收一个比较函数作为参数，以便指定哪个值位于哪个值的前面。比较函数接收两个参数，如果一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个之后则返回一个整数。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var nums = [0,3,4,5,3];
nums.reverse();
document.write(nums.join("#")+"<br>");
nums.sort();
document.write(nums.join("#")+"<br>");
nums.reverse();
document.write(nums.join("#"));
</script>
</body>
</html>
使用比较函数进行排序
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var nums = [0,3,40,5,3];
nums.reverse();
document.write(nums.join("#")+"<br>");
nums.sort(compare);
document.write(nums.join("#")+"<br>");
nums.reverse();
document.write(nums.join("#"));
function compare(value1,value2)
{
if(value1 - value2 > 0)
{
return 1;
}else if(value1 - value2 === 0)
{
return 0;
}else{
return -1;
}
}
</script>
</body>
</html>
操作方法
1.concat():先创建当前数组的一个副本，然后将接受到的参数添加到这个副本的末尾，然后返回新构建的数组。如果concat()没有传入参数，那么只会复制当前数组并返回副本。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow",["hell","world"]);
document.write(colors+"<br>");
document.write(colors2);
</script>
</body>
</html>
2.slice(startIndex,endIndex)
可以截取数组连续的部分元素，返回的为截取的片段。其中传入参数的个数可以为0个，1个，2个。
如果不传入参数，表示截取的是整个数组；如果传入一个参数，该参数作为截取的起始下标，截取至数组的末尾；如果传入的是两个参数，那么第一个参数为其实下标，第二个参数为截止下标，且不包括截止下标那一个元素。如果传入的参数超出了数组的长度，也不会报错，只是会截止到数组的末位。
如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。
如果结束位置小于起始位置，则返回空数组。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var colors = ["red","green","blue","yellow","pink","purple"];
var colors1 = colors.slice();
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
var colors4 = colors.slice(1,8);
var colors5 = colors.slice(-4,-3);
var colors6 = colors.slice(4,3);
document.write(colors1+"<br>");
document.write(colors2+"<br>");
document.write(colors4+"#");
document.write(colors3+"<br>");
document.write(colors5+"<br>");
document.write(colors6+"**");
</script>
</body>
</html>
结果
3.splice()
splice()方法的使用方式：
（1）删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。
（2）插入：可以向指定位置插入任意数量的项，只需指定3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。
（3）替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必和删除的项数相等。
splice(）最后会返回一个数组，该数组中包含从原始数组中删除的项。同时被处理的原数组是会发生变化的。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var colors = ["red","green","blue","yellow","pink","purple"];
var colors1 = colors.splice(1,2);
document.write(colors+"<br>");
document.write(colors1+"<br>");
var colors2 = colors.splice(1,0,"hello","world","other");
document.write(colors+"<br>");
document.write(colors2+"<br>");
var colors3 = colors.splice(1,1,"newcolor1","newcolor2");
document.write(colors+"<br>");
document.write(colors3+"<br>");
</script>
</body>
</html>
位置方法
位置方法用来查找某项在数组中的位置
indexOf():接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。从数组的开头（位置0）开始向后查找。返回查找项在数组中的位置，如果不存在与数组中则返回-1。
lastIndexOf():接收两个参数：要查找的项（可选的）表示查找起点位置的索引。从数组的末尾开始向前查找。返回查找项在数组中的位置，如果不存在与数组中则返回-1。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var colors = ["red","green","blue","yellow","red","pink","red","purple"];
var redIndex = colors.indexOf("red");
document.write(redIndex+"<br>");
var redLastIndex = colors.lastIndexOf("red");
document.write(redLastIndex+"<br>");
var noHell = colors.indexOf("hell");
document.write(noHell+"<br>");
var red1 = colors.indexOf("red",1);
document.write(red1+"<br>");
var red2 = colors.lastIndexOf("red",5);
document.write(red2+"<br>");
</script>
</body>
</html>
结果
迭代方法
ECMAScript5为数组定义了5个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象（影响this的值）。
传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。
every():对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
some():对数组中的每一项运行给定函数，如果该函数对其中的某些项的执行结果为true，则返回true。
filter():对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。
forEach():对数组中的每一项运行给定函数。该方法没有返回值。并且对原数组不会产生影响，只是可以获得数组中的每一项进行操作。
map():对数组中的每一项运行给点函数，返回每次函数调用的结果组成的数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>迭代方法</title>
<script>
var numbers = [1,2,3,4,5,4,3,2,1];
document.write("everyResult:");
document.write("<br>");
var everyResult = numbers.every(function(item,index,array){
return (item > 2);
});
document.write(everyResult);
document.write("<br>");
document.write("someResult");
document.write("<br>");
var someResult = numbers.some(function(item,index,array){
return (item > 2);
});
document.write(someResult);
document.write("<br>");
document.write("filterResult");
document.write("<br>");
var filterResult = numbers.filter(function(item,index,array){
return (item > 2);
});
document.write(filterResult);
document.write("<br>");
document.write("foreachResult");
document.write("<br>");
var foreachResult = numbers.forEach(function(item,index,array){
return item = item * 2;
})
document.write(foreachResult);
document.write("<br>");
document.write(numbers);
document.write("<br>");
document.write("mapResult");
document.write("<br>");
var mapResult = numbers.map(function (item, index, array) {
return item * 2;
});
document.write(mapResult);
document.write("<br>");
</script>
</head>
<body>
</body>
</html>结果
缩小方法
EMCAScript5新增的两个缩小数组的方法：reduce()和reduceRight()。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。
其中，reduce（）方法从数组的第一项开始，逐个遍历到最后。
reduceRight()方法则从数组的最后一项开始，向前遍历到第一项。
这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为缩小基础的初始值。传给reduce()和reduceRight（）的函数接收4个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传递给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二参数就是数组的的第二项。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<script>
var value = [1,2,3,4,5];
var sum = value.reduce(function(pre,cur,index,array){
return pre + cur;
});
document.write("reduce");
document.write("<br>");
document.write(sum);
</script>
</head>
<body>
</body>
</html>上一篇： 程序员表白程序，开放源码在此！