JavaScript数组常用方法详解：从基础操作到ES5高级遍历

JavaScript数组基础方法概述

Array.prototype对象中封装了大量用于操作数组的方法，本节重点介绍ECMAScript 3标准中定义的基础功能。

Array.join()方法

1. Array.join()方法

该方法用于将数组中的所有元素转换为字符串，并按照指定的分隔符连接成一个完整的字符串并返回。该方法接受一个可选参数，用于指定连接元素时的分隔符，若未提供则默认使用逗号（,）作为分隔符。

var ay = [1,2,3];
ay.join();       // =>"1,2,3" 
ay.join("+");     // => "1+2+3" 
ay.join(" ");     // =>"1 2 3"
ay.join("");      // =>"123"

var by = new Array(10) //新建一个长度为10的空数组
by.join("-");      //=> "---------" 连接10个空元素

Array.reverse()方法

2. Array.reverse()方法

此方法用于将数组中的元素顺序颠倒，并返回逆序后的数组引用。需要注意的是，该方法会直接修改原始数组，而不会创建一个新的数组实例。

var a = [1,2,3];
a.reverse().join(); //=>"3,2,1" ,此时a=[3,2,1]

Array.sort()方法

3. Array.sort()方法

该方法用于对数组元素进行排序，并返回排序后的数组。当sort()方法未接收参数时，数组元素会按照字母表顺序（字符串比较）进行排序；若数组中包含undefined元素，这些元素会被放置在数组的末尾。

var as = ["banana","cherry","apple"];
as.sort();
as.join("+ "); //=>"apple+ banana+ cherry"

此外，我们可以向sort()方法传入一个比较函数作为参数，从而指定自定义的排序逻辑。比较函数的返回值决定了元素的相对位置：若返回值小于0，则第一个参数排在前面；若返回值大于0，则第二个参数排在前面；若返回值为0，则两个元素的相对位置保持不变。

var sy = [1111,222,4,33];
sy.sort(); //=>"1111,222,33,4"
sy.sort(function(a,b){
return a-b;
}); //=> "4,33,222,1111"

注：此处使用匿名函数最为合适，因为该函数仅被调用一次，无需定义具名函数。

Array.concat()方法

4. Array.concat()方法

该方法用于创建并返回一个新数组，新数组由原数组的元素与方法参数中的元素连接而成。需要注意的是，concat方法不会递归地合并嵌套数组，而是将嵌套数组作为一个整体元素添加到新数组中。

var a = [1,2,3];
a.concat(4,5); //=>"1,2,3,4,5"
a.concat([4,5]); //=>"1,2,3,4,5"
a.concat([4,5],[6,7]); //=>"1,2,3,4,5,6,7"
a.concat(4,[5,[6,7]]); //=>"1,2,3,4,5,[6,7]"

Array.slice()方法

5. Array.slice()方法

该方法用于返回原数组的一个片段或子数组。它接受两个参数，分别指定片段的起始位置和结束位置。返回的新数组包含起始位置的元素，但不包含结束位置的元素。如果只提供一个参数，则返回从该位置到数组末尾的所有元素。参数支持负值，表示相对于数组最后一个元素的位置。此方法不会修改被调用的原始数组。

var d =[1,2,3,4,5];
d.slice(1,2); //=>"2"
d.slice(1,-1); //=>"2,3,4"
d.slice(3); //=>"4,5"
d.slice(-3,-1); //=>"3,4"

Array.splice()方法

6. Array.splice()方法

这是数组中用于插入或删除元素的通用方法，它会直接修改原始数组。该方法支持多个参数：第一个参数指定插入或删除的起始索引；第二个参数指定要删除的元素数量，若省略则从起始位置开始删除所有后续元素；后续参数指定要插入到新数组中的元素。该方法返回一个由被删除元素组成的数组。

var e = [1,2,3,4,5,6];
e.splice(4);          //=> 返回[5,6] ; e是[1,2,3,4]
e.splice(1,2);         //=> 返回[2,3] ; e是[1,4]
      
var f = [1,2,3,4,5];
f.splice(2,0,"a","b");   //=>返回[]; f是[1,2,a,b,3,4,5]
f.splice(2,2,[6,7],3);   //=>返回[a,b]; f是[1,2,[6,7],3,4,5]

栈操作：push()、pop()、unshift()与shift()

7. push()和pop()方法

这两个方法将数组模拟为栈结构使用。push()方法在数组尾部添加一个或多个元素，并返回更新后的数组长度；pop()方法删除并返回数组的最后一个元素，同时减少数组长度。

8. unshift()方法和shift()方法

这两个方法用于在数组头部进行添加和删除操作。unshift()方法在数组头部添加一个或多个元素，并返回更新后的数组长度；shift()方法删除并返回数组的第一个元素。

var a=[];     //[]
a.push(1,2);  //[1,2]
a.pop();      //[1]

a.unshift(2,3); //[2,3,1]
a.shift();      //[3,1]

字符串转换：toString()与toLocaleString()

9. toString()和toLocaleString()方法

这两个方法用于将数组转换为字符串。toString()方法将每个元素转换为字符串，并用逗号连接输出；toLocaleString()方法则调用每个元素的toLocaleString()方法将其转换为字符串，并使用本地化的分隔符进行连接。

ECMAScript 5 高级数组方法

接下来介绍几个ECMAScript 5中特有的数组方法。在详细讲解之前，先对这些方法的共性做一个大致了解：大多数方法的第一个参数接受一个函数，该函数会对数组中的每个元素调用一次。对于稀疏数组，不存在的元素不会触发函数调用。在大多数情况下，回调函数接收三个参数：数组元素、元素的索引以及数组本身。

forEach()方法

1. forEach()方法

该方法从头到尾遍历数组，对每个元素调用指定的回调函数。在遍历完所有元素之前，该方法不会终止。如果需要提前终止遍历，必须将forEach()置于try块中，并通过抛出异常来实现。

var data=[1,2,3,4,5]
var sum = 0;
data.forEach(function(value){   //=>value为数组元素
  sum+=value;
})                        //=>15

data.forEach(function(value,i,a){ //=>三个参数分别指代数组元素，元素索引和数组
  a[i] = v+1;
})                        //=>data=[2,3,4,5,6]

map()方法

2. map()方法

该方法将数组的每个元素传递给指定的回调函数，并返回一个新数组，新数组的元素是原数组元素调用回调函数后的返回值。如果原数组是稀疏数组，返回的新数组也将保持相同的稀疏结构。

var a=[1,2,3];
var b=a.map(function(v){
  return v*v;
})  //=> b=[1,4,9]

filter()方法

3. filter()方法--类似于条件筛选

该方法返回原始数组的一个子集。传入的回调函数用于执行逻辑判断，返回true或false。如果回调函数返回true（或可转换为true的值），则当前数组元素被添加到返回的新数组中。该方法会自动跳过稀疏数组中的空元素。

var a=[5,4,3,2,1]
var smalla=a.filter(function(v){
  return v<3; 
})                         //=>返回[2,1]
var everya=a.filter(function(v,i){ //=>i表示元素索引
  return i%2==0; 
})                         //=>返回[5,3,1]

every()和some()方法

4. every()和some()方法

这两个方法用于对数组进行逻辑判定，它们对每个元素应用指定的回调函数，并根据结果返回true或false。 every()方法要求数组中所有元素调用判定函数都返回true时，才返回true，否则返回false。 some()方法只要数组中至少有一个元素调用判定函数返回true，就返回true，否则返回false。

这两个方法都具有短路特性，一旦确认返回值，便不再继续遍历剩余数组元素。

reduce()和reduceRight()方法

5. reduce()和reduceRight()方法

这两个方法使用指定的回调函数将数组元素进行组合，最终生成单个值。 reduce()方法接收两个参数：第一个是执行化简组合操作的回调函数，第二个是组合的初始值。与其他方法不同，这里的回调函数接收2到4个参数：前两个参数分别是到目前为止的计算结果和当前数组元素，后续参数为元素索引和数组本身。 如果针对空数组调用reduce()且未指定初始值，将会导致类型错误异常。 reduceRight()方法的工作原理与reduce()相同，不同之处在于它按数组索引从高到低的顺序进行处理（即从右向左进行合并）。

indexOf()和lastIndexOf()方法

6. indexOf()和lastIndexOf()方法

这两个方法用于在整个数组中搜索给定的值，并返回第一个匹配元素的索引；若未找到则返回-1。indexOf()方法从头到尾进行搜索，而lastIndexOf()方法从尾到头进行搜索。