javascript数组常用的遍历方法有哪些-创新互联
小编给大家分享一下javascript数组常用的遍历方法有哪些,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
成都创新互联于2013年创立,是专业互联网技术服务公司,拥有项目成都做网站、网站设计、外贸营销网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元商州做网站,已为上家服务,为商州各地企业和个人服务,联系电话:028-86922220前言
本文主要介绍数组常见遍历方法: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 === "fruit"){ 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
一言以蔽之: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());//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("((())))"));
看完了这篇文章,相信你对javascript数组常用的遍历方法有哪些有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章标题:javascript数组常用的遍历方法有哪些-创新互联
文章URL:http://scyanting.com/article/hcosp.html