现在应该使用的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
相关推荐
javascript基础知识总结,详细的介绍了基础知识
JavaScript基础知识总汇JavaScript基础知识总汇JavaScript基础知识总汇JavaScript基础知识总汇JavaScript基础知识总汇JavaScript基础知识总汇
JavaScript基础知识例子.zipJavaScript基础知识例子.zip
这份文件是一份前端十年经验的JavaScript基础知识大纲,主要是为了帮助前端开发者系统地学习和掌握JavaScript的基础知识。该大纲采用思维构图的方式,将JavaScript的基础知识按照不同的主题进行分类和整理,包括数据...
javascript基础知识大集锦javascript基础知识大集锦javascript基础知识大集锦javascript基础知识大集锦
javascript基础知识javascript基础知识javascript基础知识
这是一份关于javascript的文档,可以帮助大家更好的理解网页制作的基础知识内容
Javascript基础知识整理.doc
个人总结 对新学者有帮助,重点地方有颜色标记,好好学习 学无止尽
关于javascript基础知识ppt里头包括javascript最基础的知识
javascript基础知识大全 javascript API
资源名称:Javascript基础知识 中文word版 内容简介: Javascript是Netscape公司开发的一种脚本语言。该语言编程的程序可以被嵌入到HTML页面中,并直接在浏览器中解释执行。喜欢的朋友...
JavaScript学习笔记,javascript基础知识,基础语法整理.pdf
PHP-Javascript基础知识java sctipt学习不求人JS.CSS代码工具
JavaScript 基础知识介绍 JavaScript 基础知识介绍 JavaScript 基础知识介绍
JavaScript基础知识.docx
javascript基础知识2,初学者的有力工具
javaScript基础知识 javaScript入门PPT
JavaScript基础知识.md