一、循环遍历语句

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) {
// ...
});

缺点:

  1. 不能使用break语句中断循环
  2. 不能使用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 循环遍历 总结的更多相关文章

  1. 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 ...

  2. vue组件,vue补充和总结,JS循环遍历和加减运算、类型转换补充

    目录 一.vue中的组件 1. 组件的概念 2. 组件分类 3. 组件的特点 4. 组件的定义 5. 组件化 (1)用法和注意 (2)数据组件化实例 6. 组件传参--父传子 (1)用法和注意 (2) ...

  3. js循环遍历数组

    一维数组的遍历 <script> //循环遍历数组 var animals = ["cat",'dog','human','whale','seal']; var an ...

  4. js循环遍历的两种方法for循环和for ... in 循环

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third& ...

  5. js循环遍历数组(对象)

    1,for循环 对于循环应该是最常用的一种遍历方式了,通常用来遍历数组结构. let arr = [a,b,d];for (let i=0; i<arr.length; i++){ consol ...

  6. JS 循环遍历JSON数据

    JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...

  7. js循环遍历弹框,先弹出第一个之后逐步弹出第二个。。

    var data = [{ "login_advertTitle": "即使生活琐碎,也要活得优雅", "login_advertCont" ...

  8. JS循环遍历JSON数据的方法

    JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...

  9. js循环遍历性能

    定length for循环 (有length) 不定length for循环(使用数组length) 不定length for循环(判断数组length是否存在) forEach(Array自带,对某 ...

随机推荐

  1. python - yeild

    带有yield的函数不仅仅只用于for循环中,而且可用于某个函数的参数,只要这个函数的参数允许迭代参数.比如array.extend函数,它的原型是array.extend(iterable). 带有 ...

  2. python 提示 :OverflowError: Python int too large to convert to C long

    一次在使用orm进行联表查询的时候,出现   Python int too large to convert to C long 的问题: 在分析错误之后,在错误最后面提示中有: File " ...

  3. 阶段3 2.Spring_04.Spring的常用注解_4 由Component衍生的注解

    为什么要使用者三个注解 Controller:表现层 Service:业务层 Repository:持久层 在这里就是用Controller 运行也没问题 用Service Repository同样也 ...

  4. 【SSM】---增删改查

    20:43:06 package com.chinasofti.dao; import java.util.List; import com.chinasofti.entity.User; publi ...

  5. java:常用类(包装类,equals和==的比较,Date,java.lang.String中常用方法,枚举enum)

    *包装类: 将基本类型封装成类,其中包含属性和方法以方便对象操作. *byte---->Byte *short--->Short *long--->Long *float---> ...

  6. 【HANA系列】SAP HANA使用XS和HTTP创建proxy

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA使用XS和HTT ...

  7. C#学习笔记二 (资源托管,泛型,数组和元组,运算符和类型强制转换)

     托管和非托管资源 1.托管资源是指GC管理的内存空间,非托管资源是指文件句柄,网络连接,数据库连接等. 2.方法中临时申请的变量,被存放在栈中.栈存储非对象成员的值数据.例如在方法中有B b=new ...

  8. ugui多层解决方案

    创建不同的相机图层以渲染事物(最佳实践解决方案) 链接:https://answers.unity.com/questions/1169898/hi-guys-i-need-some-help-wit ...

  9. LeetCode.1047-重复删除字符串中的所有相邻重复项

    这是小川的第389次更新,第419篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第251题(顺位题号是1047).给定一个小写字母的字符串S,重复删除两个相邻且相等的字母 ...

  10. MyView 的无奈问题

    这不是为难我吗这种问题  据说这是内置库!!!!!可是: 找不到呀!!!!!!!!!! 后期补充: 是因为我的一个目录名字起了冲突