共计 5497 个字符，预计需要花费 14 分钟才能阅读完成。
前言
本文次要介绍数组常见遍历办法：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 forEach
colors.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 === "vegetable"){filteredProducts.push(porducts[i]);
}
}
console.log(filteredProducts);//[{name: "cucumber", type: "vegetable"},
{name: "celery", type: "vegetable"}]// es6 filter
var 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 find
user = 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);//false
console.log(someComputersCanRunProgram);//true//ES6 some every
var every = computers.every(function(computer){return computer.ram > 16;})
console.log(every);//false
var some = computers.some(function(computer){return computer.ram > 16;})
console.log(some);//true一言以蔽之：Some: 一真即真；Every: 一假即假
应用场景 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());//true
console.log(telephone.validate());//true
console.log(password.validate());//true//ES6 some every
var fields = [username,telephone,password];
var formIsValid = fields.every(function(field){return field.validate();
})
console.log(formIsValid);//true
if(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 reduce
var sumValue = numbers.reduce(function(sum2,number2){console.log(sum2);//0 10 30 60
return sum2 + number2;
},0);//sum2 初始值为 0
console.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("((())))"));后记
如需前端领导、前端材料、Java 领导和 Java 材料的请分割自己，感谢您的反对。
WECHAT：xzsj07
备注：加好友请注明起源。前 10 名读者赠送 JS 或 Java 书籍一本，RK61 机械键盘一个。
正文完
发表至： javascript
2021-02-02
