前言
本文主要介绍数组常见遍历方法：foreach、map、filter、find、every、some、reduce，它们有个共同点：不会改变原始数组。
一、foreach：遍历数组
var colors = [red,blue,green];// es5遍历数组方法for(var i = 0; i < colors.length; i++){ console.log(colors[i]);//red blue green}
// es6 foreachcolors.foreach(function(color){ console.log(color);//red blue green});
我们再来看个例子：遍历数组中的值,并计算总和
var numbers = [1,2,3,4,5];var sum = 0;numbers.foreach(number=>sum+=number)console.log(sum)//15
二、map：将数组映射成另一个数组
map通过指定函数处理数组的每个元素，并返回处理后新的数组，map 不会改变原始数组。
foreach和map的区别在于，foreach没有返回值。
map需要返回值，如果不给return，默认返回undefined
使用场景1
假定有一个数值数组(a),将a数组中的值以双倍的形式放到b数组
var numbers = [1,2,3];var doublednumbers = [];// es5写法for(var i = 0; i < numbers.length; i++){ doublednumbers.push(numbers[i] * 2);}console.log(doublednumbers);//[2,4,6]
// es6 map方法var doubled = numbers.map(function(number){ return number * 2;})console.log(doubled);//[2,4,6]
使用场景2 假定有一个对象数组(a),将a数中对象某个属性的值存储到b数组中
var cars = [ {model:"buick",price:"cheap"}, {model:"bmw",price:"expensive"}];var prices = cars.map(function(car){ return car.price;})console.log(prices);//["cheap", "expensive"]
三、filter：从数组中找出所有符合指定条件的元素
filter() 检测数值元素，并返回符合条件所有元素的数组。 filter() 不会改变原始数组。
使用场景1：假定有一个对象数组(a),获取数组中指定类型的对象放到b数组中
var porducts = [ {name:"cucumber",type:"vegetable"}, {name:"banana",type:"fruit"}, {name:"celery",type:"vegetable"}, {name:"orange",type:"fruit"}];// es5写法var filteredproducts = [];for(var i = 0; i < porducts.length; i++){ if(porducts[i].type === "fruit"){ filteredproducts.push(porducts[i]); }}console.log(filteredproducts);//[{name: "cucumber", type: "vegetable"}, {name: "celery", type: "vegetable"}]
// es6 filtervar filtered2 = porducts.filter(function(product){ return product.type === "vegetable";})console.log(filtered2);
使用场景2：假定有一个对象数组(a),过滤掉不满足以下条件的对象
条件: 蔬菜 数量大于0,价格小于10
var products = [ {name:"cucumber",type:"vegetable",quantity:0,price:1}, {name:"banana",type:"fruit",quantity:10,price:16}, {name:"celery",type:"vegetable",quantity:30,price:8}, {name:"orange",type:"fruit",quantity:3,price:6}];products = products.filter(function(product){ return product.type === "vegetable" && product.quantity > 0 && product.price < 10})console.log(products);//[{name:"celery",type:"vegetable",quantity:30,price:8}]
使用场景3：假定有两个数组(a,b),根据a中id值,过滤掉b数组不符合的数据
var post = {id:4,title:"javascript"};var comments = [ {postid:4,content:"angular4"}, {postid:2,content:"vue.js"}, {postid:3,content:"node.js"}, {postid:4,content:"react.js"},];function commentsforpost(post,comments){ return comments.filter(function(comment){ return comment.postid === post.id; })}console.log(commentsforpost(post,comments));//[{postid:4,content:"angular4"},{postid:4,content:"react.js"}]
四、find：返回通过测试（函数内判断）的数组的第一个元素的值
它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
使用场景1
假定有一个对象数组(a),找到符合条件的对象
var users = [ {name:"jill"}, {name:"alex",id:2}, {name:"bill"}, {name:"alex"} ];// es5方法 var user; for(var i = 0; i < users.length; i++){ if(users[i].name === "alex"){ user = users[i]; break;//找到后就终止循环 } } console.log(user);// {name:"alex",id:2}
// es6 finduser = users.find(function(user){ return user.name === "alex";})console.log(user);// {name:"alex",id:2}找到后就终止循环
使用场景2：假定有一个对象数组(a),根据指定对象的条件找到数组中符合条件的对象
var posts = [ {id:3,title:"node.js"}, {id:1,title:"react.js"}];var comment = {postid:1,content:"hello world!"};function postforcomment(posts,comment){ return posts.find(function(post){ return post.id === comment.postid; })}console.log(postforcomment(posts,comment));//{id: 1, title: "react.js"}
五、every&some
every：数组中是否每个元素都满足指定的条件
some:数组中是否有元素满足指定的条件
使用场景1：计算对象数组中每个电脑操作系统是否可用，大于16位操作系统表示可用,否则不可用
//es5方法var computers = [ {name:"apple",ram:16}, {name:"ibm",ram:4}, {name:"acer",ram:32}];var everycomputerscanrunprogram = true;var somecomputerscanrunprogram = false;for(var i = 0; i < computers.length; i++){ var computer = computers[i]; if(computer.ram < 16){ everycomputerscanrunprogram = false; }else{ somecomputerscanrunprogram = true; }}console.log(everycomputerscanrunprogram);//falseconsole.log(somecomputerscanrunprogram);//true
//es6 some every var every = computers.every(function(computer){ return computer.ram > 16;})console.log(every);//falsevar some = computers.some(function(computer){ return computer.ram > 16;})console.log(some);//true
一言以蔽之：every: 一真即真；some: 一假即假
使用场景2：假定有一个注册页面,判断所有input内容的长度是否大于0
function field(value){ this.value = value;}field.prototype.validate = function(){ return this.value.length > 0;}//es5方法var username = new field(henrywu);var telephone = new field(18888888888);var password = new field(my_password);console.log(username.validate());//trueconsole.log(telephone.validate());//trueconsole.log(password.validate());//true//es6 some everyvar fields = [username,telephone,password];var formisvalid = fields.every(function(field){ return field.validate();})console.log(formisvalid);//trueif(formisvalid){ // 注册成功}else{ // 给用户一个友善的错误提醒}
六、reduce：将数组合成一个值
reduce() 方法接收一个方法作为累加器，数组中的每个值(从左至右) 开始合并，最终为一个值。
使用场景1： 计算数组中所有值的总和
var numbers = [10,20,30]; var sum = 0;//es5 方法for(var i = 0; i < numbers.length; i++){ sum += numbers[i];}console.log(sum);
// es6 reducevar sumvalue = numbers.reduce(function(sum2,number2){ console.log(sum2);//0 10 30 60 return sum2 + number2;},0);//sum2初始值为0console.log(sumvalue);
使用场景2：
将数组中对象的某个属性抽离到另外一个数组中
var primarycolors = [ {color:red}, {color:yellow}, {color:blue} ]; var colors = primarycolors.reduce(function(previous,primarycolor){ previous.push(primarycolor.color); return previous; },[]); console.log(colors);//[red, yellow, blue]
使用场景3：判断字符串中括号是否对称
function balancedparens(string){ return !string.split().reduce(function(previous,char){ if(previous < 0) { return previous;} if(char == (){ return ++previous;} if(char == )){ return --previous;} return previous; },0);}console.log(balancedparens(((())))));
以上就是javascript数组常用的遍历方法（代码示例）的详细内容。