【JS】引用类型之Array

Array类型                                                                                                                                 

声明方式：

//在使用new Array声明数组时可以省略new关键字

//方法1：
var colors = new Array();
colors.push("red");

//方法2：
var colors = new Array(1);
colors.push("red");

//方法3：
var colors = ["red"];

//方法4：
var colors = new Array("red");

常用的方法：

 1、检测对象是否是数组

//方法1：
//如果网页包含多个框架，那实际存在多个全局的执行环境(Array是window对象的一个属性)，如果跨执行环境调用检测将返回false
if(xx instanceof Array);

//方法2：
//此方法只在IE9+、FF4+、Safari5+、Opera10.5+、和Chrome中有效
if(Array.isArray(xx));

//方法3：
//最安全的方法
function isArray(value){
    return Object.prototype.toString.call(value)=="[object Array]";  
}

2、将数组对象转换成String

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

//toString()和toLocaleString()一般情况是返回相同的值，但当数组里的项自定义了toLocaleString时就会调用自定义的方法。


//join方法
//修改toString时的默认拼接字符(,号)
var colors = ["red","blue"];
alert(colors.join("|"));//red|blue
alert(colors.join("&"));//red&blue

 3、栈方法

也就是后进先出

var colors = new Array();
colors.push("red");//推入1项
colors.push("blue","yellow");//推入2项，方法可以接收N个参数

alert(colors.pop());//yellow  获取弹出的值 

alert(colors.toString());//red,blue

4、队列方法

也及是先进先出

方法1：正向（后面添加、前面弹出）

var colors = new Array();
colors.push("red");//推入1项
colors.push("blue","yellow");//推入2项，方法可以接收N个参数

alert(colors.shift());//red 获取第一个值

alert(colors.toString());//blue,yellow

方法2：反向（前面添加、后面弹出）

var colors = new Array();
colors.unshift("red");//在数组最前面推入1项
colors.unshift("blue","yellow");//在数组最前面推入2项，方法可以接收N个参数

alert(colors.pop());//red 获取最先压入的值

alert(colors.toString());//blue,yellow

 5、排序

sort（）默认根据数组元素的string形式进行升序，可以传入比较函数修改默认行为。

reverse（）将数组里的元素颠倒

默认排序：

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

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

通过比较函数进行排序：

function compare(value1,value2){
    if(value1 < value2){
        return -1; //负数表示第一个数应该在第二个数之前
    }else if(value1 > value2){
        return 1;//正数表示第一个参数应该在第二个数之后
    }else{
        return 0; //相等，不需要调换位置
    }
}
var arr = [0,1,10,5,15];
arr.sort(compare);
alert(arr); //0,1,5,10,15

//对于数字类型的排序的比较函数可以简写成下面这写法
function compare(value1,value2){
    return value1 - value2
}

 6、操作方法

复制、拼接数组的concat方法

//concat方法
var colors = ["red","blue","yellow"];
var colors2 = colors.concat();//["red","blue","yellow"]
var colors3 = colors.concat("black");//["red","blue","yellow","black"]
var colors4 = colors.concat("black","brown");//["red","blue","yellow","black","brown"]
var colors4 = colors.concat("black",["purple","green"]);//["red","blue","yellow","black","purple","green"]

alert(colors);//["red","blue","yellow"];

截取数组的slice方法

//slice方法
//当slice有2个参数时，第二个参数表示结束的索引，但不包括该值
var colors = ["red","blue","yellow","black"];
var colors2 = colors.slice(); //"red","blue","yellow","black"
var colors3 = colors.slice(1); //"blue","yellow","black"
var colors4 = colors.slice(1,3);//"blue","yellow" 

alert(colors);//red,blue,yellow,black

删除、插入、替换与一身的splice方法

不同操作的方法参数说明：

删除：指定2个参数：要删除的第一项的索引和要删除的项数，例如：splice(0,2)表示删除数组的前2项。

插入：指定3个参数：起始位置坐标,num(要删除的项数),要插入的项（这个参数可以有很多个）,例如：splice(2,0,"red","yellow")表示在当前索引为2的项前面插入red和yellow。

替换：指定3个参数：起始位置坐标,num(要删除的项数),要插入的项（这个参数可以有很多个）,例如：splice(2,1,"red")表示从包括索引为2的项开始删除1项，然后插入red。

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);              //remove the first item
alert(colors);     //green,blue
alert(removed);    //red - one item array
        
removed = colors.splice(1, 0, "yellow", "orange");  //insert two items at position 1
alert(colors);     //green,yellow,orange,blue
alert(removed);    //empty array

removed = colors.splice(1, 1, "red", "purple");    //insert two values, remove one
alert(colors);     //green,red,purple,orange,blue
alert(removed);    //yellow - one item array

 7、位置方法

//indexOf和lastIndexOf的第二个参数表示查找的起点索引
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

 8、内部迭代方法

支持的浏览器版本：IE9+、FF2+、Safari3+、Opera9.5+和Chrome

//every方法的函数迭代每一项都为true，结果才为true
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

//some方法的函数迭代到某一项为true，结果就为true
var someResult = numbers.some(function(item, index, array){
       return (item > 2);
});
alert(someResult);       //true

//filter方法返回满足参数方法里条件的所有的项的数组对象
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
      return (item > 2);
});
alert(filterResult);   //[3,4,5,4,3]

//map方法是用函数参数里的返回结果替换原来的项，原来的数组是只读的
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
      return item*2;
});
alert(mapResult);   //[2,4,6,8,10,8,6,4,2]

//forEach方法就是我们常用的循环的一个定义方法，可以在参数函数里执行我们自己的操作而不需要返回任何值
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
      //do you want do
});

9、缩小方法

也就是每次获得2项，每次循环得到2个项，并且将返回的结果值累计(+、-、*、/等)

支持的浏览器版本：IE9+、FF2+、Safari3+、Opera9.5+和Chrome

//reduce方法是每次循环得到2个项，并且将返回的结果值累计(+、-、*、/等)
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev * cur;//这里可以改变操作符
});
alert(sum);//120

var sum2 = values.reduce(function(prev, cur, index, array){
    return prev + cur;//这里可以改变操作符
});
alert(sum2);//15
        
//reduceRight方法是reduce的反方向循环操作
var sum2 = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;//这里可以改变操作符
});
alert(sum2);//15