1. 媒介
ES5中新增的一些处置惩罚数组(Array)的要领, 关于用JavaScript处置惩罚数据异常有效。我总结了一下,给这些要领分了类,大致以下:
2个索引要领:indexOf() 和 lastIndexOf();
5个迭代要领:forEach()、map()、filter()、some()、every();
2个合并要领:reduce()、reduceRight();
下面我们来细致看一看这些要领怎样用吧!
2、索引要领
索引要领包括indexOf()和lastIndexOf()两个要领,这两个要领都吸收两个参数,第一个参数是要查找的项,第二个参数是查找出发点位置的索引,该参数可选,假如缺省或是花样不正确,那末默以为0。两个要领都返回查找项在数组中的位置,假如没有找到,那末返回-1。区分就是一个夙昔今后找,一个从后往前找。
让我们来看一个细致列子吧,起首定义一个数组:
var dataArray = [1, 7, 5, 7, 1, 3];
indexOf():该要领从数组的开首最先向后查找。
console.log(dataArray.indexOf(7)); // 1 缺省, 从第一项最先查找
lastIndexOf(): 该要领从数组的末端最先向前查找。
console.log(dataArray.lastIndexOf (7)); // 3 缺省, 从末端第一项最先查找
值得注重的是,在比较第一个参数与数组中的每一项时,会运用全等操纵符, 请求必需完整相称,不然返回-1。
console.log(dataArray .lastIndexOf ('7')); // -1,由于这里是字符串,并非数值范例
三、迭代要领
迭代要领包括some()、every()、filter()、map()和forEach()
五个要领,这些要领都吸收两个参数,第一个参数是一个函数,他吸收三个参数,数组当前项的值、当前项在数组中的索引、数组对象自身
。第二个参数是实行第一个函数参数的作用域对象,也就是上面说的函数中this所指向的值。注重,这几种要领都不会转变原数组。
every()和 some() 要领有些相似,我们放在一同比较。
every(): 该要领对数组中的每一项运转给定函数,假如该函数对每一项都返回 true,则返回true。
some(): 该要领对数组中的每一项运转给定函数,假如该函数对任何一项返回 true,则返回true。
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.some( function( item, index, array ){
console.log( 'item=' + item + ',index='+index+',array='+array );
return item > 3;
}));
console.log( arr.every( function( item, index, array ){
console.log( 'item=' + item + ',index='+index+',array='+array );
return item > 3;
}));
能够看到,some要领是遇到一个返回true的值时刻就返回了,并没有继承往下运转,而every也一样,第一个值就是一个false,所以背面也没有举行下去的必要了,就直接返回效果了
filter() : 该要领对数组中的每一项运转给定函数,返回该函数会返回 true 的项构成的数组。运用这个要领可对数组元素举行过滤挑选。
var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 5},
];
var newArr = arr.filter(function(item){
return item.name === "orange";
});
console.log("Filter results:",newArr);
[{"name":"orange", "count": 5},{"name":"orange", "count": 5}]
grep(array, function[, invert])要领,另有一个特征,当invert缺省或是为false,和filter要领一样,平常我用filter
map(): 对数组的每一个元素举行肯定操纵(映照)后,会返回一个新的数组
var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
function getNewArr(){
return oldArr.map(function(item,index){
item.full_name = [item.first_name,item.last_name].join(" ");
return item;
});
}
console.log(getNewArr());
-------------
{first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
{first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
{first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}
forEach(): 该要领对数组中的每一项运转给定函数。这个要领没有返回值。这个要领实在就是遍历轮回,和for轮回没有太大差异。jquery()也供应了响应的要领each()要领。
var arr = [1,2,3,4,5,6,7,8];
// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}
console.log("========================");
//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});
四、合并要领
合并要领包括reduce()和reduceRight()两个要领,这两个要领都邑迭代数组中的一切项,然后天生一个终究返回值。他们都吸收两个参数,第一个参数是每一项挪用的函数,函数接收是个参数分别是初始值,当前值,索引值,和当前数组,函数须要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,假如缺省,初始值为数组第一项,从数组第一个项最先叠加,缺省参数要比平常传值少一次运算。
reduce():该要领从数组的第一项最先,逐一遍历到末了一项。
用for轮回来写
var arr = ["apple","orange","apple","orange","pear","orange"];
function getWordCnt(){
var obj = {};
for(var i= 0, l = arr.length; i< l; i++){
var item = arr[i];
obj[item] = (obj[item] +1 ) || 1;
}
return obj;
}
console.log(getWordCnt());
运用reduce
var arr = ["apple","orange","apple","orange","pear","orange"];
function getWordCnt(){
return arr.reduce(function(prev,next){
prev[next] = (prev[next] + 1) || 1;
return prev;
},{});
}
console.log(getWordCnt());
reduce 传入。reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)。假定函数它有个传入参数,prev和next,index和array。prev和next你是必须要相识的。
平常来说prev是从数组中第一个元素最先的,next是第二个元素。然则当你传入初始值(initialValue)后,第一个prev将是initivalValue,next将是数组中的第一个元素。
var arr = ["apple","orange"];
function noPassValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);
return prev + " " +next;
});
}
function passValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);
prev[next] = 1;
return prev;
},{});
}
console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());
望文生义,reduceRight()就是末了一名往前面算,就不细致说了。
五、兼容性问题
ES5里这些处置惩罚数组的新要领,在IE6-IE8浏览器还未获得支撑,所以我们须要在IE这些低版本浏览器中引入这个es5-shim补丁,如许我们就能够运用它了。