javascript中常见的几种循环遍历
2019-08-14 10:27:17来源:博客园 阅读 ()
项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环。javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历。
一、for循环
for循环应该是最普遍的,使用最多的一种循环遍历方法了,所以也导致其可读性和易维护性比较差,但是它可以及时break出循环。
let arr = [1,2,3,4,5,6,7] for(let i = 0;i<arr.length;i++){ console.log(arr[i]) } // 1,2,3,4,5,6,7
二、for...in
for...in循环主要针对于对象的遍历,当想要获取对象的对应键值时,使用for...in还是比较方便的
//针对对象来说 //任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的, //for... in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。 //结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。 let obj = {name: 'xiaohua', sex: 'male', age: '28'} for(let key in obj){ if(obj.hasOwnProperty(key)){ console.log(obj[key]) } }
三、map
map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。循环中途是无法停止的,总是会将所有成员遍历完
let arr = [1,2,3,4,5] let arr2 = arr.map((n)=>{ return n+1 }) console.log(arr2) // [2,3,4,5,6] console.log(arr) // [1,2,3,4,5]
map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。
let arrObj = [{ id: 1, name: 'xiaohua' },{ id:2, name: 'xiaomin' },{ id:3, name: 'xiaobai' }] arrObj.map((item,index,arr)=>{ console.log(arr) // arrObj console.log(index) // 0 1 2 console.log(item.name) // xiaohua xiaomin xiaobai })
三、forEach
forEach的使用方法和map使用方法差不多,只是forEach方法不返回值,只用来操作数据,且循环中途是无法停止的,总是会将所有成员遍历完
let arrObj = [{ id: 1, name: 'xiaohua' },{ id:2, name: 'xiaomin' },{ id:3, name: 'xiaobai' }] arrObj.forEach((item,index,arr)=>{ console.log(arr) // arrObj console.log(index) // 0 1 2 console.log(item.name) // xiaohua xiaomin xiaobai })
四、filter过滤循环
filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
let arrObj = [{ id: 1, name: 'xiaohua' },{ id:2, name: 'xiaomin' },{ id:3, name: 'xiaobai' }] let arr2 = arrObj.filter((item,index,arr)=>{ return (item.name === 'xiaohua') }) console.log(arr2) // [{id:1,name:'xiaohua}]
ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false
, null
, undefined
, 0
, NaN
or an empty string):
let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""]; let arrNew = arr.filter(Boolean); console.log(arrNew) // [3, 4, 5, 2, 3]
Boolean 是一个函数,它会对遍历数组中的元素,并根据元素的真假类型,对应返回 true 或 false.
五、Object.keys遍历对象的属性
Object.keys
方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名,且只返回可枚举的属性。
let obj = {name: 'xiaohua', sex: 'male', age: '28'} console.log(Object.keys(obj)) // ["name", "sex", "age"]
判断一个对象是否是空对象,可以用Object.keys(obj).length>0
原文链接:https://www.cnblogs.com/layaling/p/11304688.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Javascript正则
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash