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