JS 循环遍历 总结
一、循环遍历语句
for...in... (ES5)
语法:javascript for(keys in obj){}
适用:遍历对象
说明:
1.keys表示obj对象的每一个键值对的键(键名),所有循环中,需要使用obj[keys]来取到每一个值。
2.for-in 循环,遍历时不仅能读取对象自身上面的成员属性,也能延续原型链遍历出对象的原型属性
3.使用hasOwnProperty判断一个属性是不是对象自身上的属性。obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性,而不是原型属性
for...of... (ES6)
语法:javascript for(keys of xxx){}
适用:数组、Set和Map结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串
说明:ES6 借鉴 C++、Java、C# 和 Python 语言,引入了for...of循环,作为遍历所有数据结构的统一的方法。
一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for...of循环遍历它的成员。
也就是说,for...of循环内部调用的是数据结构的Symbol.iterator方法。
其他:
for (let [key,value] of Object.entries(obj))
for (let key of Object.keys(obj))
for (let key of Object.values(obj))
1.Object.keys()
返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名。
2.Object.values()
返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值。
3.Object.entries()
返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值对数组。
forEach (ES5)
语法:javascript [].forEach(callbackfn[, thisArg])
适用: 遍历数组,不改变原数组
说明:对数组里存在的每个元素调用一次 callbackfn。callbackfn 只被实际存在的数组元素调用;它不会被缺少的数组元素调用。
如果提供了一个 thisArg 参数,它会被当作 this 值传给每个 callbackfn 调用。如果没提供它,用 undefined 替代。
callbackfn参数,分别为值、下标、数组本身
[].forEach(function(value, index, array) {
// ...
});
对比jQuery中的$.each方法:
$.each([], function(index, value, array) {
// ...
});
缺点:
- 不能使用break语句中断循环
- 不能使用return语句返回到外层函数
map (ES5)
语法: javascript [].map(callbackfn[, thisArg]);
说明:map方法可以返回一个处理过的新数组,不改变原数组
callbackfn参数,分别为值、下标、数组本身
[].map(function(value, index, array) {
// ...
return .....
});
二、比较
for...in缺点
①数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
②不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
③某些情况下,会以任意顺序遍历键名,主要是为遍历对象而设计的,不适用于遍历数组。
for...of优点
①有着同for...in一样的简洁语法,但是没有for...in那些缺点。
②不同于forEach方法,它可以与break、continue和return配合使用。
③提供了遍历所有数据结构的统一操作接口。
三、循环控制语句
1、break:跳出本层循环,继续执行循环结构后面的语句。如果循环有多层,则break只能跳出一层。
2、continue:跳过本次循环剩余的代码,跳转到表达式处进行下一次的循环判断,继续执行下一次循环。
①对与for循环,continue之后执行的语句,是循环变量更新语句i++;
②对于while、do-while循环,continue之后执行的语句,是循环条件判断;
因此,使用这两个循环时,必须将continue放到i++之后使用,否则,continue将跳过i++进入死循环
3、return:在程序(函数)中遇到return语句,那么代码就退出该函数的执行,返回到函数的调用处;如果是主程序(main()),那么结束整个程序的运行。
4、exit: 其他语言中使用,如C、C++等。调用exit()函数将会结束当前进程,同时删除子进程所占用的内存空间,把返回信息传给父进程。
当exit()中的参数为0时,表示正常退出,其他返回值表示非正常退出,执行exit()函数意味着进程结束;
而return仅表示调用堆栈的返回,其作用是返回函数值,并且退出当前执行的函数体,返回到函数的调用处,
在main()函数中, return n和exit(n)是等价的。
JS 循环遍历 总结的更多相关文章
- JS 循环遍历JSON数据 分类: JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options":"[{
JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...
- vue组件,vue补充和总结,JS循环遍历和加减运算、类型转换补充
目录 一.vue中的组件 1. 组件的概念 2. 组件分类 3. 组件的特点 4. 组件的定义 5. 组件化 (1)用法和注意 (2)数据组件化实例 6. 组件传参--父传子 (1)用法和注意 (2) ...
- js循环遍历数组
一维数组的遍历 <script> //循环遍历数组 var animals = ["cat",'dog','human','whale','seal']; var an ...
- js循环遍历的两种方法for循环和for ... in 循环
JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third& ...
- js循环遍历数组(对象)
1,for循环 对于循环应该是最常用的一种遍历方式了,通常用来遍历数组结构. let arr = [a,b,d];for (let i=0; i<arr.length; i++){ consol ...
- JS 循环遍历JSON数据
JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...
- js循环遍历弹框,先弹出第一个之后逐步弹出第二个。。
var data = [{ "login_advertTitle": "即使生活琐碎,也要活得优雅", "login_advertCont" ...
- JS循环遍历JSON数据的方法
JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...
- js循环遍历性能
定length for循环 (有length) 不定length for循环(使用数组length) 不定length for循环(判断数组length是否存在) forEach(Array自带,对某 ...
随机推荐
- Rate 评分
评分组件 基础用法 评分被分为三个等级,可以利用颜色对分数及情感倾向进行分级(默认情况下不区分颜色).三个等级所对应的颜色用过colors属性设置,而它们对应的两个阈值则通过 low-threshol ...
- 【flask】使用Flask-WTF处理表单
我的理解是Flask-WTF与html文件的关系就如同SQLAlchemy与数据库之间的关系. 通过python Form类,生成html代码,并在html模板文件中通过{{}}变量的方式引用这些生 ...
- 如何实现在Eclipse导入c3p0
1 右键项目->Properties->Java Build Path->Libraries->Add External JARs...-> c3p0-0.9.5.2.j ...
- Android的消息机制之ThreadLocal的工作原理
ThreadLocal 可以把一个对象保存在指定的线程中,对象保存后,只能在指定线程中获取保存的数据,对于其他线程来说则无法获取到数据. 日常开发中 ThreadLocal 使用的地方比较少,但是系统 ...
- DateTime相关
1.string数据转成datetime DateTimeFormatter forPattern = DateTimeFormat.forPattern("yyyyMMddHH" ...
- kettle 连接 mysql8.0 报错的解决办法 org.pentaho.di.core.exception.KettleDatabaseException: Error occurred while trying to connect to the database Error connecting to database: (using class org.gjt.mm.mysql.
1.下载 mysql8.0 驱动放到 如下目录中 mysql8.0以上的驱动下载链接:mysql-connet-8.0.13 2.配置你连接的数据库 找到如下文件打开编辑 连接信息:下面是我本地的配置 ...
- 简述在Js或Vue中监听页面的刷新、关闭操作
1.背景 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.而最近在做项 ...
- HDU 1087 Super Jumping! Jumping! Jumping! (动态规划、最大上升子序列和)
Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- Mysql数据库表结构设计准则
一:动静分离 解释:最好做好静态表和动态表的分离.这里解释一下静态表和动态表的含义,静态表:存储着一些固定不变的资源,比如城市/地区名/国家(静态表一定要使用缓存).动态表:一些频繁修改的表 二:关于 ...
- SpringBoot自动化配置之二:自动配置(AutoConfigure)原理、EnableAutoConfiguration、condition
自动配置绝对算得上是Spring Boot的最大亮点,完美的展示了CoC约定优于配置: Spring Boot能自动配置Spring各种子项目(Spring MVC, Spring Security, ...