Array 中各类函数如何使用

对于web开发过程中的JS对象 Array ，我们真的充分使用了么？是不是理解了Array的全部？能够在合适的地点调用合适的函数，使用合适的属性？ 接下来我们一起走进JS原生对象Array的世界中.

Array如何创建

1.空数组

     var array = new Array();

我们可以通过new指令直接创建一个空的数组，返回一个length为0的数组，并赋值给array变量，这是常见的创建方式之一。

2.指定长度数组

    var array = new Array(size);

通过传递size参数，指定数组的长度，返回一个length为size的数组，赋值给变量array。

3.指定内容的数组

    var array = new Array(element1,element2,element3...);

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

4.单维数组

    var array = [元素1,元素2,元素3...];

5.多维数组

    var array = [[元素a1,元素a2..],[元素b1,元素b2..],[元素c1,元素c2..]...

Array 有哪些属性

constructor : 返回创建此对象的数组函数的引用 length : 返回该数组的长度 prototype :　通过他增加属性和方法定义进行拓展数组定义

constructor : 返回引用，同时可以通过他来判断是否是某个对象

    var a= new Array();
    if(a.constructor == Array){
      console.log('this is an array');
    }

prototype : 能够向Array原型中添加自定义属性和方法

    Array.prototype.mytest = function(){
      alert(this.length);
    }
    var array = new Array();
    array.mytest();//alert "0"

这样我们就可以丰富Array原型的方法和属性了。

Array 基本操作

1. 存取数组元素

• 单维数组：数组名[下标索引] var array = ['a','b','c']; console.log(array[0]);// logs 'a'
• 多维数组：数组名[外层下标索引][内层下标索引] var array = [['a','b','c'],['d','e','f'],['g','h','j']]; console.log(array[0][1]);//logs 'b'

同单维一样，先取出其中的数组元素，在根据内层下标取出想要的值。 特点：

数组的长度是弹性的，可以自由伸缩 var array = new Array(); //长度为 0 array.push(1);//长度为1 数组下标从0开始 下标类型： 　数值：array[1]; 直接取出第二个元素 　非数值：array['1']; 　当下标为非数值的时候通常会转化为字符串或者直接作为对象的属性的名字

2. 增加数组 通过”[]“运算符指定一个新下标 通过自带函数增加元素：push/unshift/concat

3. 删除数组 delete 数组名[下标] 通过自带的函数删除元素：pop /shift

4. 遍历数组 for ( var 数组元素变量 in 数组名) for(var index=0;index<数组名.length;index++)

Array的函数

先列一下都有哪些函数。 push() : 在数组末尾添加数组 unshift() : 在数组头部添加元素 concat() : 合并两个数组 pop() : 删除并返回数组的最后一个元素 **shift()**： 删除并返回数组的第一个元素 slice() : 从已有数组中选取部分元素构成一个新的数组 splice(): 1.删除任意数量的元素；2.在指定位置插入指定的元素；3.替换任意数量的元素 reverse():颠倒数组中元素的顺序 sort() : 对数组中的元素按照一定的特性进行排序 join() : 通过指定的分隔符分割数组中的元素组成字符串返回

indexOf():从数组的起始位置开始查找元素（ECMAScript5） lastIndexOf():从数组的结束位置开始查找元素（ECMAScript5） every() : 如果该函数对每一项都返回true,则返回true（ECMAScript5） filter():返回值为true的所有数组成员（ECMAScript5） forEach():遍历循环数组中的元素（ECMAScript5） map():返回每次函数调用的结果数组 some(): 有任意一项返回true,则返回true（ECMAScript5） reduce():从数组起始位置开始遍历（ECMAScript5） reduceRight():从数组结束位置开始遍历（ECMAScript5）

根据上面列出的函数，每一个都附带1~2个例子帮助理解。

１.push(item,item2,item3..) 描述：每添加一个新的元素都会在数组的末尾位置。 参数：

var array = new Array();
array.push('a');
console.log(array);//logs ["a"]
array.push(new Object());
console.log(array);//logs ["a", Object]
var arrayLength = array.push('a','b','c');
console.log(array);//logs ['a',Object,'a','b','c']
console.log(arrayLength);//logs 5

2.unshift(item,item2,item3...) 描述：每添加一个新的元素都会在数组的起始位置，该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推(见例子)。 参数：

var array = new Array();
array.push('a');
console.log(array);//logs ['a']
array.unshift('b');
console.log(array);//logs ['b','a']
array.unshift('c','d');
console.log(array);//logs ['c','d','b','a']

3.concat(array,array2,array3...) 描述：用于两个或者多个数组进行连接，该方法并不会改变原有的数组结构，而是返回一个新的数组。 参数:

var array = ['a','b'];
var array1 = ['c','d'];
var resultArray = array.concat(array1,'e');
console.log(resultArray);//logs ["a", "b", "c", "d", "e"]
resultArray = array.concat();
console.log(resultArray); //logs ["a", "b"],并不会添加新的元素，也不会改变原有的数组

4.pop() 描述：该函数没有参数，删除并返回数组的最后一个元素，如果是空数组则返回undefined 参数：无 例子;

var array =  ['a','b'];
var result = array.pop();
console.log(result);//logs 'b'
console.log(array);//logs ['a']
var array2 = [];
var result2 = array2.pop();
console.log(result2);//logs undefined
console.log(array2);//logs []

5.shift() 描述：该函数没有参数，删除并返回数组的第一个元素，如果是空数组则返回undefined 参数：无 例子：

var array = ['a','b'];
var result = array.shift();
console.log(result);//logs 'a'
console.log(array);//logs ['b']
var array2 = [];
var result2 = array2.shift();
console.log(result2);//logs undefined
console.log(array2);//logs []

6.slice(start,end) 描述：从已存在的数组中返回start到end的元素，并组成一个新的数组，该函数并不会修改原有的数组。 参数：

例子：

var array = ['a','b','c','d'];
var res1 = array.slice(0,2);
console.log(res1);//logs ['a','b']
var res2 = array.slice(2);
console.log(res2);//logs ['c','d']
var res3 = array.slice(-1);
console.log(res3);//logs ['d']
//slice 不会向前取值，如果start=-1（倒数第一个）,end<倒数第一个的时候，返回值为空[]

7.splice(index,howMany,element1,element2...) 描述：删除任意数量的元素，在指定位置插入指定的元素，替换任意数量的元素,该函数会修改原有的数组。 参数：

var array = ['a','b','c','d','e'];
var result = array.splice(1,2);//从第一个元素开始，删除两个元素，不添加任何元素。
console.log(result);//logs ['b','c']
console.log(array);//logs ['a','d','e']
var result2 = array.splice(1,0,'m');//从第一个位置开始，删除0个元素，添加一个'm'元素。
console.log(result2);//logs []
console.log(array);//logs ['a','m','d','e']

8.reverse() 描述：颠倒数组中元素的顺序，该函数没有参数，同时会修改原有的数组并进行返回。 参数：无 例子：

var array = ['a','b','c','d','e'];
var result1 = array.reverse();
console.log(array);//logs ['e','d','c','b','a']
console.log(result1);//logs  ['e','d','c','b','a']

9.sort(sortby) 描述：针对数组元素进行排序，可以根据默认排序，也可以自定义排序。该函数会修改原有数组。如果参数不填，则会按照字母顺序对数组元素进行排序。 参数：

var array = ['1','2','3','4'];
array.sort();
console.log(array);//logs ['1','2','3','4']
// 按照升序进行排列，如果想对对象元素进行排序需要传递函数参数。
var array2 = [
{
name : 'boyuyun',
title : '博育云首页',
sortNum : 1
},
{
name : 'app',
title : '应用首页',
sortNum : 2
},
{
name : 'menu',
title : '菜单首页',
sortNum : 3
}];
array2.sort(function(preObject,nextObject){//preobject：为第一个元素，nextObject：为下一个元素
    var preV = preObject.sortNum,nextV = nextObject.sortNum;
    if(preV > nextV){
        return -1;
    }else if(preV == nextV){
        return 0;
    }else{
        return 1;
    }
});
console.log(array2);//下图为打印输出结果

10.join(separator) 描述：将数组所有元素放入字符串，并通过分隔符进行分割，默认分隔符为逗号“，”。该函数不会修改原有数组对象。 参数：

var array = ['a','b','c','d'];
var str = array.join();
console.log(str);//logs 'a,b,c,d';
var str1 = array.join('&');
console.log(str1);//logs 'a&b&c&d'

11.indexOf(item,start) 描述：在数组中查找符合条件的元素，并返回索引，如果没有找到则返回-1，start则为从数组的哪个位置开始查找。 参数:

var array = ['a','b','c','d','e'];
var index = array.indexOf('c');
console.log(index);//logs 2
var index2 = array.indexOf('c',3);
console.log(index2);//logs -1

12.lastIndexOf(searchvalue,fromindex) 描述：返回指定字符串在数组中最后出现的位置，索引从后向前搜索，如果找不到则返回 -1，找到返回位置索引。该函数对大小写敏感。 参数：

var array = ['a','b','c','d','e','a','b','c'];
var i = array.lastIndexOf('a');
console.log(i);//logs 5
var ii = array.lastIndexOf('a',4);//从第四个开始向前检索
console.log(ii);//logs 0

13.every(fn) 描述：如果该函数对每一项都返回true,则返回true,主要是遍历数组所有元素，判断是否全部符合某一标准。 参数：

var array = [50,60,70,80,90];
//检查所有学生的成绩是否全部及格
function isPass(score){
    if(score>=60){return true;}return false;
}
if(array.every(isPass)){
    console.log('全部及格');
}else{
    console.log('有不及格的学生');
}
//logs '有不及格的学生'

14.filter(fn) 描述：返回符合fn的条件的数组元素并组成一个数组返回。fn为函数，遍历数组中的所有元素，通过函数fn检查是否符合条件进行过滤。对原有数组不进行修改，返回新的数组（包含符合过滤条件的元素）。 参数:

var array = [50,60,70,80,90];
//返回所有及格的成绩>= 60
var getPass = function(value){return value>=60;}
var result = array.filter(getPass);
console.log(result);//logs [60,70,80,90]
//当然在函数中我们可以定义更加复杂的过滤条件

15.forEach(fn) 描述：数组的循环遍历函数,参数为函数，函数参数为item,index，分别为数组元素和索引。 参数：

var array = ['a','b','c','d'];
array.forEach(function(item,index){
    console.log(item);
});
//logs 'a' 'b' 'c' 'd'

16.map(fn) 描述：循环遍历数组，对每一个元素进行函数的修改，比如所有元素+1. 参数：

var array = [3,5,7,9];
//将所有元素+1
var result = array.map(function(item,index,array){
    return item+1;
});
console.log(result);//logs [4,6,8,10]

17.some(fn) 描述：同every类似，只要数组中有 一个元素符合fn的过滤条件，则返回true 参数：

var array = [50,60,70,80];
//查看所有学生成绩是否有不及格的
var isPass = function(value){
    return value < 60;
}
if(array.some(isPass)){
    console.log('有不及格的学生');
}else{
    console.log('没有不及格的学生');
}
//logs '有不及格的学生'

18.reduce() 描述： 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 参数：

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});
//logs 10

//这两个还不太理解，很少用到。

19.reduceRight() 描述:同reduce ，只不是方向从结束位置开始的。

上面的是属于我的理解，有不正确的地方欢迎指正！ 主要用于自己的一个知识复习，也算是一个备忘，同时分享给大家，互相交流！