现在应该使用的5个数组方法
ECMAScript 5 发布时,为数组提供了一些新的方法。然后,由于缺乏浏览器的支持,却迟迟未得到广泛的使用。
本文列举了9个ES5数组方法中的其中5个的使用方法和应用场景。
1)indexOf
indexOf()方法,返回指定元素在数组中首次出现的索引,如果在数组中未找到该元素,则返回-1。与字符串中的indexOf()方法类似。
使用场景:确认"orange"元素是否在数组中
不使用indexOf()的实现方法:
var arr = ['apple','orange','pear'],
found = false;
for(var i= 0, l = arr.length; i< l; i++){
if(arr[i] === 'orange'){
found = true;
}
}
console.log("found:",found);
使用indexOf()的实现方法:
var arr = ['apple','orange','pear'];
console.log("found:", arr.indexOf("orange") != -1);
2)filter()方法
filter()将通过测试条件的元素组成一个新的元素并返回,测试条件通过一个函数提供。
即对一个数组进行过滤,返回符合条件的元素;过滤掉不符合条件的元素。
使用场景:查找数组中所有name属性为"orange"的元素
不使用filter()的实现方法:
var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16},
];
var newArr = [];
for(var i= 0, l = arr.length; i< l; i++){
if(arr[i].name === "orange" ){
newArr.push(arr[i]);
}
}
console.log("Filter results:",newArr);
使用filter()的实现方法:
var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16},
];
var newArr = arr.filter(function(item){
return item.name === "orange";
});
console.log("Filter results:",newArr);
3)forEach()
forEach()在各个数组元素上执行一次操作,操作的具体内容由提供的函数指定。
使用场景:遍历数组
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);
});
forEach()方法是对for循环的一个重要升级,如果只有一个方法可以使用,那就用forEach()方法吧。
使用for循环的一个常见的问题就是在for循环中声明的变量不只局限在循环块中,在与for循环在同一个作用域的其它代码可能受到影响。
注意:for循环在性能上优于forEach。
4)map()方法
map()方法,对数组的每个元素上执行一个函数,并将结果组成一个新的数组返回
使用场景:对一个对象数组进行解析,并返回一个包含新属性"full_name"的对象数组。
不使用map()方法:
var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
function getNewArr(){
var newArr = [];
for(var i= 0, l = oldArr.length; i< l; i++){
var item = oldArr[i];
item.full_name = [item.first_name,item.last_name].join(" ");
newArr[i] = item;
}
return newArr;
}
console.log(getNewArr());
使用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());
5)reduce()
reduce()方法,
http://colintoh.com/blog/5-array-methods-that-you-should-use-today?utm_source=javascriptweekly&utm_medium=email