JavaScript之Array类型

1. 介绍

1.1 定义

//第一种方法：通过构造函数 Array //注：可以省略 new 关键字
var colors = new Array();
var colors = new Array(20);
var colors = new Array();
//第二种方法：数组字面量
var colors = [];
var colors = ["blue","black","green"];

1.2 使用和赋值

var colors = ["blue","black","green"];
alert(colors[0]);    //使用
colors[2] = "black"; //赋值
colors[3] = "brown"; //新增

1.3 length属性

length属性不是只读的！
通过设置此属性可以从数组的末尾添加或删除项，新增的项默认为undefined
利用length属性可以方便的向数组的末尾添加项。

var colors = ["blue","black","green"];
colors[colors.length] = "black";
colors[colors.length] = "brown";

colors[99] = "white";
alert(colors.length); //100

2. 检测数组：Array.isArray()

使用instanceof操作符的问题在于它是假定只有一个全局执行环境。如果项目中使用了多个框架，就存在两个以上的全局执行环境，从而存在两个以上版本的Array构造函数。
为了解决这个问题，ECMASsript5新增了Array.isArray()。这个方法的目的是最终确定某个值到底是不是数组。

var bool = value instanceof Array;
var bool = Array.isArray(value);

3. 转换方法：toLocaleString()、toString()、valueOf()、join()

JS中每个对象都有转换方法：toLocaleString()、toString()和valueOf()方法。

• toString() 返回由数组中每个值得字符串形式拼接而成的一个以逗号分隔的字符串，为了创建这个字符串，会调用每一项的toString()方法；
• toLocaleString() 返回由数组中每个值得字符串形式拼接而成的一个以逗号分隔的字符串，为了创建这个字符串，toLocaleString()方法；
• valueOf() 返回的还是数组；
• join() 可以使用不同的分隔符来构建数组字符串；

4.添加删除：push()、pop()、shift()、unshift()

• push() ：末尾添加
• pop() ：末尾删除
• shift()：前端移除
• unshift()：前端添加
• 栈 ：后进先出 (LIFO)，栈中项的操作只发生在一个位置——栈的顶部。可使用push()、pop()实现。
• 队列：先进先出 (FIFO)，末尾添加、前端移除。可使用push()、shift()实现。

5.重排序方法：reverse()、sort()

• reverse()：反转
• sort()：排序
  返回值是排序后的数组

最简单的例子：
var array = [1,2,3,4,5];
var first = array.reverse();  //[5,4,3,2,1]
var second = first.reverse();  //[1,2,3,4,5]

在上面的例子,reserse()方法直观明了，但不够灵活，不能满足我们自定义排序规则的需求。因此才有了sort()方法。sort()方法默认按照升序排列。为了实现排序，该方法会自动调用每个数组项的toString()方法，比较字符串进行排序。如：

var array = [0,1,5,10,15];
var result = array.sort(); //[0,1,10,15,5]
//在这里会得到以外的结果，因为并不是按照数字比较的

sort()方法强大之处在于其可以接受一个比较函数作为参数，从而实现我们自定义排序规则。比较函数接收两个参数，表示的是数组中的两项，暂用a,b表示，如果a应该位于b之前,则返回一个负数（表示不用交换位置）；如果a应该位于b之后,则返回一个正数（表示需要交换位置）；如果a等于b，则返回0。例：

//比较方法
function compare(a,b){
    if(a<b){
        return -1;
    } else if(a>b){
        return 1;
    } else {
        return 0
    }
}

//使用以上比较方法实现升序
var array = [0,1,5,10,15];
var result = array.sort(compare); //[0,1,5,10,15]

通过以上形式，可以实现更复杂的排序效果。

6.操作方法：concat()、slice()、splice()

• concat()：合并数组，不影响原数组
  concat()方法会先创建当前数组的一个副本，然后将接收到的参数添加到副本的末尾，最后返回新建的数组。

  var colors1 = ['red','green'];
  var colors2 = colors1.concat('yellow',['blue','black']);
  //colors2 = ['red','green','yellow','blue','black']
  

• slice()：剪切数组，不影响原数组
  slice()基于当前数组的一个或多项组建新数组。接受一个或者两个参数.

  var colors1 = ['red','green','yellow','blue','black'];
  //若只有一个参数，则返回从该参数指定位置到结束位置之间项的数组
  var colors2 = colors1.slice(1);     //['green','yellow','blue','black']
  //若有两个参数，则返回第一个参数指定位置项至第二个参数指定项(不包含)之间的项的数组
  var colors3 = colors1.slice(1,4);   //['green','yellow','blue']
  //若参数中有负数，则用数组长度加上该参数确定位置
  var colors4 = colors1.slice(-4,-1); //['green','yellow','blue']
  //若第二个参数小于第一个参数，则返回空数组
  var colors5 = colors1.slice(2,1);   //[]
  
  

• splice()：剪接(删除、插入、替换)，对原数组操作
  使用splice可以实现对原数组的删除、插入、替换操作，始终返回一个数组，该数组中包含从原始数组中删除的项。

  • 删除：接收两个参数：要删除的第一项位置和要删除的项数；
  • 插入：接收三个以上参数：起始位置、0（要删除的项数）、要插入的项；
  • 替换：接收三个以上参数：起始位置、要删除的项数、要插入的项；

    var colors = ['red','green','yellow','blue','black'];
    //删除
    var removed = colors.splice(0,1);  //['red']
    //colors = ['green','yellow','blue','black']
    
    //插入
    var removed = colors.splice(1,0,'white','orange'); //[]
    //colors = ['green','white','orange','yellow','blue','black']
    
    //替换
    var removed = colors.splice(1,1,'red'); //['white']
    //colors = ['green','red','orange','yellow','blue','black']
    

7.位置方法：indexOf()、lastIndexOf()

EXMAScript增加了两个位置方法。这两个方法都接收两个参数：要查找的项和开始查找的位置索引。返回值是要查找的项在数组中的位置，没找到返回-1.在查找的过程中使用全等操作符。

• indexOf() 正序

• lastIndexOf() 反序

  var number = [1,2,3,4,5,4,3,2,1];
  alert number.indexOf(4);       //3
  alert number.lastIndexOf(4);   //5
  alert number.indexOf(4,4);     //5
  alert number.lastIndexOf(4,4); //3
  

8.迭代方法：every()、filter()、forEach、map()、some()

5个迭代方法，都接收两个参数：要在每一项上运行的函数和运行该函数的作用域对象（影响this）。传入的函数接收三个参数：当前数组项的值，该项在数组中位置，数组本身。

• every() ：对数组中每一项运行给定函数，若结果全都是true，则返回true；

• some() ：对数组中每一项运行给定函数，有一项结果为true就返回true；

• filter() ：对数组中每一项运行给定函数，返回结果为true的数组项组合的新数组；

• forEach() ：对数组中每一项运行给定函数，没有返回值；

• map() ：对数组中每一项运行给定函数，返回每一项的运行结果数组；
  以上方法都不会修改原数组

  var number = [1,2,3,4,5,4,3,2,1];
  var everyResult =  number.every(function(item,index,array){
      return (item>2);
  });   //false
  
  var someResult = number.some(functon(item,index,array){
      return (item>2);
  });   //true
  
  var filterResult = number.filter(function(item,index,array){
      return (item>2);
  })   //[3,4,5,4,3]
  
  var mapResult = number.map(function(item,index,array){
      return (item*2);
  });  //[2,4,6,8,10,8,6,4,2]
  
  //forEach方法没有返回值
  number.forEach(function(item,index,array){
      //执行操作
  });
  

9.归并方法：reduce()、reduceRight()

ECMAScript5新增方法。这两个方法都会迭代数组所有项，构建一个最终返回值。接受两个参数：一个在每一项上调用的函数和作为归并基础的初始值。其中接受的第一个参数是函数，它接收4个参数：==前一个值，当前值，项索引，数组对象==；这个函数返回的任何值都会作为第一个参数自动传给下一项.两个函数执行方向不同，除此之外完全相同。

• reduce() 正序
• reduceRight() 反序

  //数组求和：
  var number = [1,2,3,4,5];
  var sum = number.reduce(function(prev, cur, index, array){
      return prev + cur;
  });    //15
  
  var sum = number.reduceRight(function(prev, cur, index, array){
      return prev + cur;
  });    //15
  

image