ECMAScript 5中对Array中新增了9个方法

ECMAScript 5中对Array中新增了9个方法：

• 5个迭代方法（循环操作数组中的各个项）：forEach(),map(),filter(),every()和some()
• 2个归并方法（迭代数组所有项，最终返回一个值）：reduce()和reduceRight()
• 2个索引方法：indexOf()和lastIndexOf()

forEach(callbackFn[,thisArg])

遍历数组一次对数组中的各个项，依次执行 callbackFn 函数，第二个可选参数则可以为这个 callbackFn 指定执行上下文。

[1, 2 ,3, 4].forEach(alert);

以上代码等同于

var array = [1, 2, 3, 4];

for (var k = 0, length = array.length; k < length; k++) {
  alert(array[k]);
}
delete array[1]; // 移除 2
alert(array.length); // but the length is still 3

array.forEach(alert); // 依次弹出1、3、4
alert(array)  //  1,,3,4
array[7] = 8; 
alert(array.length); // 长度变为8
array.forEach(alert); // 依次弹出1、3、4、8

以上我们知道 forEach 不会循环 delete 掉的值

在这个 callbackFn 里可以使用三个参数：数组对象、元素索引以及数组本身，完整实例如下：

var sum = 0;

[1, 2, 3, 4].forEach(function (item, index, array) {
  console.log(array[index] == item); // true
  sum += item;
});

alert(sum); // 10

而 forEach()中的第二个参数可以改变执行上下文，实例如下：

var database = {

  users: ["Dmitry", "John", "David"],

  sendEmail: function (user) {
    if (this.isValidUser(user)) {
      /* sending message */
    }
  },

  isValidUser: function (user) {
    /* some checks */
  }

};

// send an email to every user

database.users.forEach(  // 在database数组内循环
  database.sendEmail,
  database               // 使 database 对象为了执行上下文对象
);

forEach实现break功能

forEach()无法像for循环那样使用相应的break语句。在《javascript权威指南》中给出将forEach()方法放在try模块中，如能抛出异常，则会提前终止。

var array = [1, 2, 3];
function foreach(a, f, t){
	try { 
		a.forEach(f, t); 
	} catch (e) {
		if ( e === foreach.break ) return;
		else throw e;
	}
}
foreach.break = new Error('stop')
foreach(array, function(v, i, a){
	console.log(v)
	if ( v > 1 ) {
		foreach.break;
	} else {
		a[i] = 0;
	}
})
console.log(array) // [0, 2 , 3]			

此外还可以使用变量开关，以及修改数组的方法，但是最完美的是使用以下要说到的 every 或者 some 方法

map(callbackfn[thisArg])

map()方法参数跟forEach()方法一样，此方法依次对数组中的各个元素引用callback函数，返回元素为函数结果的新的数组。

如下事例：

var arr1 = ['一','二','三','四','五','六'];
var arr2 = arr1.map(function(value, index){
	return index+1;
})
console.log(arr2) // [1, 2, 3, 4, 5, 6]

ps:callbackfn 需要return ，不然数组内所有项都是 underfined

项目应用中，我们可以利用map很方便获得数组中的一些特定属性值

var users = [
  {name: "Dmitry", "email": "dmitry@email.com"},
  {name: "John",   "email": "john@email.com"},
  {name: "David",  "email": "david@email.de"},
  // etc
];
var emails = users.map(function (user) { return user.email; });

alert(emails); // ["dmitry@email.com", "john@email.com", "david@email.de"]		

fliter(callbackfn[thisArg])

fliter()参数跟forEach()方法也一样，此方法依次对数组中的各个元素应用 callback 函数，并返回函数的返回值为 true 的元素所组成的新的数组。

接着以上 map 第一个事例，我们将筛选出数组中的偶数项目

var arr3 = arr2.filter(function(e){
	return e % 2 === 0
})
console.log(arr3) //[2,4,6]

ps:返回值只要弱等于== true/false而非强等于=== true/false

some(callbackfn[thisArg])

some()方法跟forEach()方法参数是一样的，此方法依次对数组中的各个元素应用 callback 函数。如果 callback 函数的结果为true，则终止。

var found = null;

var points = [
  {x: 10, y: 20},
  {x: 15, y: 53},
  {x: 17, y: 72}
];

points.some(function (point) {

  if (point.x > 10 && point.y < 60) {
    found = point; // found
    return true;
  }

  return false;

});

if (found) {
  alert("Found: " + found.x + ", " + found.y); // Found: 15, 53
}

every(callbackfn[thisArg])

every()依次对数组中的各个元素应用 callback 函数。在 callback 返回false后终止。

跟some()的区别就是：some是找出 true 的那一样，而every则是找出 false的那一项。可以理解为 some() 要找出对的，二 every() 要找出错的。

every()方法也我们这里要介绍的数组迭代方法中的最后一个方法了，此方法参数还是跟其他迭代方法一样。

function isQualified(element, index, array) {
  return (element >= 60);
}
console.log([61, 59, 81, 99, 44].every(isQualified)) // false
console.log([92, 74, 78, 88, 66].every(isQualified)) // true

reduce(callbak[, initialValue])

reduce()将数组的各个元素与之前的函数调用结果作为参数，依次调用 callback 函数，并返回函数调用的最终结果。

callbak 函数接受4个参数：前值，当前值，索引值，以及数组本身。initialValue 参数可选，表示初始值。若指定则当作第一次调用时的前值；如果没有，则使用数组的第一个元素作为前值，数组的第二个元素则是当前值。其实就是有 initialValue 比没有 initialValue 少一次操作。

var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) {
  return previous + current;
},0);
console.log(sum); // 10 以上 initialValue 为 0 跟 不设置 initialValue 结果相同

var product = [1, 2, 3, 4].reduce(function (previous, current, index, array) {
	return previous * current;
},1)
console.log(product) // 24 以上 缺省值 为 1 跟不设置 initialValue 结果相同

使用 reduce() 方法我们可以很轻松的将二维数组合并为一维数组：

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

alert(matrix[0][1]); // 2

// and now get the flatten array

var flatten = matrix.reduce(function (previous, current) {
  return previous.concat(current);
});

alert(flatten); // [1, 2, 3, 4, 5, 6]

reduceRight(callbak[, initialValue])

从数组末尾开始向前执行 reduce 操作。

indexOf(searchElement, [fromIndex])

返回第一个与 searchElement 一致的元素下标。也可以通过第2个参数来设置检索的起始下标。如果没有找到相符的结果，则返回-1

其实跟字符串的 indexOf 方法类似。

var data = [2, 5, 7, 3, 5];

alert(data.indexOf(5)); // 1
alert(data.indexOf(5, 3)); // 4 (start search from 3 index)

alert(data.indexOf(4)); // -1 (not found)
alert(data.indexOf("5")); // -1 (also not found since 5 !== "5")

lastIndexOf(searchElement, [fromIndex])

从后向前检索，返回第一个与 searchElement 一直的元素的下标。也可以通过第二个参数来设置检索的起始下标。如果没有找到则返回-1

var data = [2, 5, 7, 3, 5];

alert(data.lastIndexOf(5)); // 4
alert(data.lastIndexOf(5, 3)); // 1 (start search from 3 index)

if (data.indexOf(4) == -1) {
  alert("4 is not found");
}

Es5很多IE9以下浏览器都不支持，所以我们在低于IE9的浏览器中加入 es5-shim

原地址：http://www.html5jscss.com/es5-array-method.html