【JavaScript学习】Array类型

ECMAScript中的数组与其他多数语言的数组有很大的区别。
1、ECMAScript数组的每一项可以保存任何类型的数据。
2、ECMAScript数组的大小可以动态调整，即可以随数据的添加自动增长以容纳新增数据。

创建数组的基本方式：
1、使用Array构造函数。

var colors = new Array();
var colors = new Array(20);   //创建length值为20的数组
var colors = new Array("red","blue","green"); //创建数组应该包含的项的数组

//也可以省略new操作符
var colors = Array();
var colors = Array(20); 
var colors = Array("red","blue","green");

2、数组字面量表示法。

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

数组的项数保存在length属性中，这个属性很有意思——不是只读的，可以修改。因此，可以通过设置这个属性，从数组的末端移除项或添加新项。

var colors = ["red","blue","green"];
colors.length = 2;
alert(color[2]); // undefined

var colors = ["red","blue","green"];
colors.length = 4;
alert(color[3]); // undefined

//利用length可以在末尾添加新项
var colors = ["red","blue","green"];
colors[color.length] = "black"; //在位置3添加一种颜色

var colors = ["red","blue","green"];
colors[99] = "black"; //在位置99添加一种颜色
alert(color.length); // 100

检测数组

对于一个网页或一个全局作用域，使用instanceof即可：

if(value instanceof Array){
    //执行操作
}

对于网页中包含多个框架，即存在两个以上不同的全局执行环境，则使用Array.isArray()：（支持此方法的浏览器有IE9+、Firefox4+、Safari5+、Opera10.5+、Chrome）

if(Array.isArray(value)){
    //执行操作
}

转换方法

var colors = ["red","blue","green"]; 
alert(colors.toString()); //red,blue,green
alert(colors.valueOf());  //red,blue,green
alert(colors);            //red,blue,green

可以使用join()方法使用不同的分隔符来构建字符串。

var colors = ["red","blue","green"]; 
alert(colors.join(",")); //red,blue,green
alert(colors.join("||")); //red||blue||green

栈方法 push()、pop()

var colors = new Array(); 
var count = colors.push("red","blue");
alert(count); // 2
var item = colors.pop();
alert(item); // blue

队列方法 push()、shift()、unshift()

var colors = new Array(); 
var count = colors.push("red","blue");
alert(count); // 2

var item = colors.shift();
alert(item); // red

//unshift()从前端添加任意个数项并返回新数组长度
count = colors.unshift("red","green");
alert(count); //2
alert(colors); //red green blue

重排序方法 reverse()、sort()

//reverse()反转数组项顺序
var values = [1,2,3,4,5];
values.reverse();
alert(values); //5,4,3,2,1

sort()默认为升序排列数组->调用每个数组项的toString()方法，然后比较得到的字符串。

var values = [0,1,5,10,15];
values.sort();
alert(values); //0,1,10,15,5

默认的sort()比较的是字符串。而要自定义比较的方法，可以给sort()加上一个比较函数。
tips：我认为可以这样理解，比较函数的返回值大于0，那么说明前后两个参数要交换位置；否则，位置不变。

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
//更简单的比较函数
function compare(value1,value2){
    return value1-value2;
}

var values = [0,1,5,10,15];
values.sort(compare);
alert(values); //0,1,5,10,15

操作方法concat()、slice()、splice()

//concat()：创建当前数组的一个副本，然后将接收到的参数添加到副本的末尾
var values = [0,2,1];
var values2 = values.concat(1,[3,4]);
console.log(values);  //0,2,1
console.log(values2); //0,2,1,1,3,4

/* slice()：基于当前数组中的一或多个项创建一个新数组。
 * param：①一个参数 ②两个参数（要返回项的起始和结束位置）
 * return：①返回从该参数指定位置开始到当前数组末尾的所有项
 *         ②返回起始和结束位置之间的项——不包括结束位置的项
 * 若参数有负数，则用数组长度加上该数来确定相应的位置。例如：
 * length=5,slice(-2,-1)等价于slice(3,4)
 * 若结束位置小于起始位置，则返回空数组
 */
 var values = [0,1,2,3,4];
 var values2 = values.slice(1); //1,2,3,4
 var values3 = values.slice(1,4); //1,2,3

/* splice()：向数组的中部插入项
 * 总共有三种用法：
 * ①删除：splice(param1,param2)
 * param：param1表示要删除的第一项的位置；param2表示要删除的项数
 * return：返回删除的项数组
 * ②插入：向指定位置插入任意数量的项
 * splice(param1,0,value1,...)
 * param：param1表示起始位置；value1,...表示要插入的项
 * return:返回空数组
 * ③替换：向指定位置插入任意数量的项，且同时删除任意数量的项
 * splice(param1,param2,value1,...)
 * param：param1表示起始位置；param2表示要删除的项数；
 *        value1,...表示要插入的项
 * return：返回删除的项数组
 */
 var values = [0,1,2,3,4];
 var removed = values.splice(0,2);
 console.log(values);  //2,3,4
 console.log(removed); //0,1

 var values = [0,1,2,3,4];
 var removed = values.splice(1,0,5,6);
 console.log(values);  //0,5,6,1,2,3,4
 console.log(removed); //空数组

 var values = [0,1,2,3,4];
 var removed = values.splice(1,3,5,6);
 console.log(values);  //0,5,6,4
 console.log(removed); //1,2,3

位置方法 indexOf()、lastIndexOf()

/* indexOf()：从数组的开头（位置0）开始向后找
 * lastIndexOf()：从数组的末尾开始向前找
 * param：param1要查找的项，param2（可选）查找起点位置的索引
 * return：返回查找项在数组中的位置，没找到返回-1
 * 要求：查找的项必须严格相等（使用全等操作符比较）
 * /
 var numbers = [1,2,3,4,5,4,3,2,1];
 alert(numbers.indexOf(4));      //3
 alert(numbers.lastIndexOf(4));  //5

 alert(numbers.indexOf(4,4);     //5
 alert(numbers.lastIndexOf(4,4); //3

 var person = {name:"Nicholas"};
 var people = [{name:"Nicholas"}];

 var morePeople = [person];

 alert(people.indexOf(person));     //-1
 alert(morePeople.indexOf(person)); //0

 /* 解释上面的-1与0：
  * 用indexOf()查找的时候，所比较的是对象。在 people 这个数组中的这个
  * {name:"Nicholas"} 和 person 并不是同一个对象，而 morepeole 中和
  * person 是同一个对象（因为直接引用了它）。
  * 因此第一个会返回 -1（无法找到），第二个是 0。
  * person==people[0]或者person===people[0] 都是不成立的（false）
  */

迭代方法：5种

这5种迭代方法分别是：
every()：对数组中每一项运行给定函数，若该函数对每一项都返回true，则返回true。
filter()：对数组中每一项运行给定函数，返回该函数会返回true的项组成的数组。
forEach()：对数组中每一项运行给定函数。无返回值。
map()：对数组中每一项运行给定函数，返回每次函数调用的结果组成的数组。
some()：对数组中每一项运行给定函数，若该函数对任一项返回true，则返回true。

/* 迭代方法的参数：param1要在每一项运行的函数 function，
 *               param2（可选）运行该函数的作用域对象
 * 要运行的function函数参数：
 * param1：数组项的值
 * param2：该项在数组中的位置
 * param3：数组对象本身
 */

 var numbers = [1,2,3,4,5,4,3,2,1];
 var everyResult = numbers.every(function(item,index,array){
     return (item>2);
 });
 alert(everyResult); //false

 var someResult = numbers.some(function(item,index,array){
     return (item>2);
 });
 alert(someResult); //true

 var filterResult = numbers.filter(function(item,index,array){
     return (item>2);
 });
 alert(filterResult); //[3,4,5,4,3]

 var mapResult = numbers.map(function(item,index,array){
     return (item>2);
 });
 alert(mapResult); //[2,4,6,8,10,8,6,4,2]

 numbers.forEach(function(item,index,array){
     //执行某些操作
 });

归并方法reduce()、reduceRight()

/* reduce()：从数组的第一项开始，逐个遍历到最后
 * reduceRight()：从数组的末尾开始向前遍历到第一项
 * param：param1要在每一项运行的函数 function，
 *        param2（可选）作为归并基础的初始值
 * 
 * 要运行的function函数参数：
 * param1：前一个值
 * param2：当前值
 * param3：项的索引
 * param4：数组对象
 * return：这个函数的返回值会作为第一个参数自动传给下一项。
 * /
 var values = [1,2,3,4,5];
 var sum = values.reduce(function(prev,cur,index,array){
     return prev + cur;
 });
 alert(sum); //15