javascript中常见的几种循环遍历
项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环。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
javascript中常见的几种循环遍历的更多相关文章
- JavaScript 中的常用12种循环遍历(数组或对象)的方法
1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 ...
- javascript中常见的三种开发模式
一.单例模式: 所谓单例模式,即保证一个类只有一个实例,并提供一个访问它的全局访问点. <script type="text/javascript"> //一个类有某个 ...
- JavaScript:JavaScript中常见获取对象元素的方法
介绍: javascript中常见的3种获取元素的方法,分别是通过元素ID.通过标签名字和通过类名字来获取 操作如下: 1.getElementById DOM提供了一个名为getElementByI ...
- JavaScript 中的12种循环遍历方法
原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...
- JavaScript中常见的字符串操作函数及用法
JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...
- JavaScript中常见的数组操作函数及用法
JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...
- ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转)
主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论. 通过本文你可以 ...
- ArrayList和LinkedList的几种循环遍历方式及性能对比分析
最新最准确内容建议直接访问原文:ArrayList和LinkedList的几种循环遍历方式及性能对比分析 主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性 ...
- ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转载)
原文地址: http://www.trinea.cn/android/arraylist-linkedlist-loop-performance/ 原文地址: http://www.trinea.cn ...
随机推荐
- Flask使用bootstrap为HttpServer添加上传文件功能
关于模态框 使用bootstrap实现点击按钮弹出窗口,简直不要太简单.我们只需要将写好的窗口内容隐藏,然后调用bootstrap的框架即可,简单几行就能完成相关功能实现.... 前提条件是,我们需要 ...
- python解析ifconfig 输出成字典
有个需求需要将ifcofig输出解析出来,这里将写的整理出来.方便后续使用. eth0 Link encap:Ethernet HWaddr 00:50:53:b2:23:e6 inet addr:1 ...
- ARTS-S 在docker中运行本地脚本
很多情况是本地没有编译环境,但docker中有编译环境.想编译本地代码,就要把本地的代码和编译脚本映射到docker中,脚本如下: docker run \ -it \ -v /Users/usern ...
- Day 03 作业
简述变量的组成 变量名,赋值符号,变量值 简述变量名的命名规范 变量名应该能反映变量值所描述的状态 变量名必须以字母数字下划线组合且不能以数字开头 变量名不能是关键字 简述注释的作用 让后面的代码失效 ...
- JavaEE基础(05):过滤器、监听器、拦截器,应用详解
本文源码:GitHub·点这里 || GitEE·点这里 一.Listener监听器 1.概念简介 JavaWeb三大组件:Servlet,Listener,Filter.监听器就是指在应用程序中监听 ...
- eclipse 代码问题总结
隐藏控件,在xml文件中写属性 android:visibility="gone"
- PAT1057 Stack(树状数组+倍增)
目录 题目大意 题目分析 题目大意 要求维护一个栈,提供压栈.弹栈以及求栈内中位数的操作(当栈内元素\(n\)为偶数时,只是求第\(n/2\)个元素而非中间两数的平均值).最多操作100000次,压栈 ...
- WebService创建、发布及在IIS上部署
一.项目创建 1. 首先打开VS,这里我以VS2013为例 2. 点击“新建项目”,依次选择“Web”——>“Visual Studio 2012”——>“ASP.NET空 ...
- C#线程学习笔记八:async & await入门一
一.涉及内容 async & await是C# 5.0引入的,控制台输出所使用的$符号(拼接字符串)是C# 6.0引入的,其功能类似于string.Format()方法. 二.多线程.异步.同 ...
- 微服务分布式 spring cloud springboot 框架源码 activiti工作流 前后分离
1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...