JavaScript高级程序设计(十)：数组类型

先导：

　　访问对象属性使用的都是点表示法。另外，我们还可以使用方括号表示法来访问对象的属性。在使用方括号的时候，应该将要访问的属性以字符串的形式放到方括号中。这两种方法没有什么区别。但是方括号的优点是可以通过变量来访问属性，还可以在属性名中包含导致语法错误的字符，或者属性名使用关键字或保留字，也可以使用方括号的方式来访问。例如：

var person={
   "first name":"yang",
   "last name":"mie"
};

//访问person的属性  属性中包含了空格，所以使用方括号访问方式
person["first name"]="yang";

　　数组类型

　　数组的每一项可以来保存任何类型的数据，数组长度可以自动调整。

一、数组的定义方式

1.new Array构造函数
var array=new Array();

2.Array构造函数，初始化固定长度
var array1=new Array(20);

3.构造函数时传递包含项
var array2=new Array("red","green","blue");

4.省略new构造数组
var array3=Array(3);
var array4=Array("red");

5.使用数组字面量表示法，数组字面量是由一对包含数组项的方括号表示，多个数组项之间用逗号隔开，例如：
var array5=["red","green","blue"];

二、数组的length属性

　　作用：1、获取数组的长度； 2、通过设置length属性的值，可以从数组的末尾移除项或向数组中新增项

//利用length属性对数组项移除
var colors=["red","green","blue"];   //包含3项的数组
colors.length=2;  //设置数组的长度为2
colors[2]=undefined;  //数组第三项就没有值了

//利用length属性对新增数组项
var colors=["red","green"];
colors[colors.length]='blue'; //新增第三项
colors[2]='blue';

三、数组的检测方法

　　如何检测一个数组的方法：1、instanceof() 2.Array.isArray()

var colors=["red","green","blue"];
console.log(colors instanceof Array);  //true


var colors=["red","green","blue"];
console.log(Array.isArray(colors));  //true

四、数组的转换方法

　　所有对象都有toString()、toLocaleString()、ValueOf()方法。

　　调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。而调用valueOf（）返回的还是数组。

var colors=["red","green","blue"];   
console.log(colors.toString())    // 返回字符串：“red,green,blue” 调用每一项的toString()方法

var colors=["red","green","blue"];  
console.log(colors.valueOf());   //返回数组：["red", "green", "blue"]

var colors=["red","green","blue"]; 
console.log(colors.toLocaleString());   //返回字符串：red,green,blue  调用每一项的toLoacleString()方法

数组在转换为字符串的时候，默认的情况下都是以逗号分隔的。而是用join()方法，我们就可以使用不同的分隔符来构建这个字符串。join()方法只接受一个参数，即用作分隔符的字符串，然后返回包含数组项的字符串。例如：

var colors=["red","green","blue"];   
console.log(colors.join("#"));   //返回结果：red#green#blue

五、数组的操作方法

　　1、实现类似栈行为的方法：push()和pop()。【栈是一种LIFO(last in fist out，后进先出)的数据结构，即最后添加的项最先被移除】

　　push()可以接受任意数量的参数；pop()方法则从数组末尾移除最后一项。

var colors=["red"];
colors.push("green","blue"); //add 两项

console.log(colors.toString());  //red,green,blue

console.log(colors.length);   //3

colors.pop();  //移除最后一项
console.log(colors.length);   //2

2、类似队列行为的方法：shift()和unshift()。【队列是FIFO（fist in fist out,先进先出），即从数组的前端对数组项进行操作】

　　shift():从数组的前端移除第一项并返回该项（移除的第一项值）；unshift()：从数组的前端新增任意项并返回新增数组的长度。

var colors=["red"];
var item=colors.shift();
console.log(item);  //red


var colors=["red"];
var length=colors.unshift("green","blue");
console.log(length;   // 3

3、数组的排序方法：reverse()和sort()

　　reverse（）会反转数组项的顺序；sort()方法按照升序排列数组项：sort()会调用每个数组项的toString()转型方法，然后比较所得到的字符串，以确定如何排序。即使这一组都是数值，sort()也会按照字符串进行排序的。

//reverse()数组项的反转
var arr=[1,5,3,6,9];
arr.reverse();   //[9, 6, 3, 5, 1] 单纯的反转

//sort()按照字符串进行数组排序
var arr=[1,5,3,6,9];
arr.sort();   //[1, 3, 5, 6, 9]

var arr2=[1,15,2,16,8];
arr2.sort();  // [1, 15, 16, 2, 8] 字符串排序

如何使sort()排序方法使用于大多数据类型呢？sort()可以接受一个比较函数做为参数：

function compare(val1,val2){
    if(val1<val2){
       return -1;
    }else if(val1>val2){
       return 1;
    }else{
       return 0;
    }  
}
var arr2=[1,15,2,16,8];
arr2.sort(compare);   //[1, 2, 8, 15, 16]  数值按照大小排序，非字符串  修改compare（）方法可以实现降序排列

　　4、操作方法：

　　　　A、concat()：在原数组的基础重新构建一个新的数组，先将原数组创建一个副本，然后将接收到的参数添加到副本的末尾，并返回副本。传递给concat的参数是一个或多个数组。

　　　　原数组的值保持不变。

var colors=["red"];
var colors2=colors.concat("yellow",["blue","green"]); //参数是一个字符串和一个数组，添加到原数组副本的末尾，形成新的数组
//"red","yellow","blue","green"

　　　　B、slice():基于当前数组的一项或多项创建一个新的数组。slice()可以接受一个或两个参数，即返回项的起始位置和结束位置。slice()操作不会影响原数组项。

var colors=["red","yellow","blue","green"];
//只有一个参数 起始位置为0
var colors1=colors.slice(1); //从第二项到结尾：["yellow", "blue", "green"]

//两个参数
var colors2=colors.slice(2,4);  //["blue", "green"]

　　注意：如果slice()参数中含有一个负数，则用数组长度加上该数来确定相应的位置。例如，在一个包含5项的数组上调用slice(-2,-1)与调用slice(3,4)得到结果相同。

　　C、splice():向数组中部插入项：删除、插入、替换。

　　　　删除：可以删除数组任意数量的项，只需指定2个参数：要删除的第一项的位置和删除的项数。

　　　　插入：可以向指定位置插入任意数量的项，只需指定3个参数：起始项，0（若大于0的话，是删除原先位置的项数，然后再插入项），要插入的项；

var colors=["red","yellow","blue","green"];
//删除 返回删除的数组
var item=colors.splice(1,0);
console.log(colors);   //["yellow","blue","green"];
console.log(item);  //["item"]

//插入不删除任一项，返回空数组
var item2=colors.splice(1,0,"black"); //从第一个位置插入一项
console.log(colors);  //["black","red","yellow","blue","green"];
console.log(item2); //(空的)

//替换插入
var item3=colors.splice(2,1,"black","whilte"); //从第二个位置插入二项
console.log(colors);  //["red","black","whilte","blue","green"];
console.log(item3); //(空的)

　　D、位置方法：lastIndexOf()和IndexOf();

　　 lastIndexOf():从数组的末尾开始向前查找；indexOf()：从数组的开头开始向后查找。两个方法都返回要查找的项在数组中的最后匹配项的位置，否则返回-1。查找遵循的规则是：全等操作符，即要求查找项必须严格相等。

var nums=[1,2,3,4,5,4,6];
console.log(nums.indexOf(4));  //5(从起始开始向后查询)
console.log(nums.lastIndexOf(4));  //3(从末尾开始向前查询)

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

　　　　every() 和some()相似，都用于查询数组中的项是否满足某个条件。

　　　　对于every()来说，传入的函数必须对每一项返回true，这个方法才会返回true，否则返回false。

　　　　对于some()来说，传入的函数对数组中某一项返回true，该方法就返回true，否则返回false。

var nums=[1,2,3,4,5,4,6];

var everRs=nums.every(function(item,index,arr){
    return (item>2);
});
//返回 false(1<2的,有一项不满足就返回false)

var someRs=nums.some(function(item,index,arr){
    return (item>2);
});
//返回true（有一项满足就返回true）

　　　　filter():对数组中的每一项运行给定函数，返回该函数会返回true的项的数组。

　　　　map():对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

　　　　forEach():对数组中的每一项运行给定函数，该方法没有返回值。

var nums=[1,2,3,4,5,4,6];
//filter():返回所有大于3的数组
var arr=nums.filter(function(item,index,arr){
    retrun item>3;    
});
//[4,5,4,6]

//map():数组中每一项加上3，返回运算后的结果数组。
var mapRs=nums.map(function(item,index,arr){
      return (item+3);
});
//[4,5,6,7,8,7,9]

//forEach():本质同for循环数组
nums.forEach(function(item,index,arr){
    //执行某些操作，如遍历数组
   console.log(item);
});
//1,2,3,4,5,4,6 (数组每一项的输出)

　　F、缩小方法：reduce()和reduceRight()：两个方法都会迭代数组的所有项，然后构建一个最终值返回。reduce()方法从数组的第一项开始，向后遍历；而reduceRight()则是从数组的最后一项开始，向前遍历。　　　两个方法的函数都会接收4个参数：前一项，当前项，项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。

var nums=[1,2,3,4,5,4,6];

var sum=nums.reduce(function(prev,cur,index,arr){
    return pev+cur;
});
console.log(sum);   //25(返回所有项的和)

//reduceRight()遍历所有值得方向相反，其他操作相同。

JavaScript高级程序设计(十)：数组类型

推荐阅读