一、循环遍历语句

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. ERROR: Command "python setup.py egg_info" python-nss

    [root@localhost ~]# pip install python-nss DEPRECATION: Python 2.7 will reach the end of its life on ...

  2. 【sqlalchemy】使用正确的DB_URI却报错密码错误-密码中包含特殊符号导致

    [原因] db_password密码中含有特定字符,比如含有@ %,则把密码部分进行URL编码 [解决办法] from urllib.parse import quote_plus as urlquo ...

  3. idea 导入 open项目

    导入  import Project 选择你的项目目录 (位置可以直接是svn下下来的项目目录 不用新建空项目或者目录) 如果有提示直接yes  没有拉到 一路next 如果提示  覆盖就ok (一路 ...

  4. WebLogic下Argument(s) "type" can't be null.

    启动项目出现Argument(s) "type" can't be null.异常.异常如下: java.lang.IllegalArgumentException: Argume ...

  5. HTML协义代码

    这些状态码被分为五大类: 100-199 用于指定客户端应相应的某些动作. 200-299 用于表示请求成功. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息. 400- ...

  6. Java并发ReadWriteLock接口

    java.util.concurrent.locks.ReadWriteLock接口允许一次读取多个线程,但一次只能写入一个线程. 读锁 - 如果没有线程锁定ReadWriteLock进行写入,则多线 ...

  7. yum安装nginx(Centos)

    测试人员需要了解Nginx?nginx的别名有很多:中间件,HTTP服务器,代理服务器等,这些名字都是作用的一个体现.在实际项目中,前后端分离,负载均衡等也是通过Nginx实现的,知己知彼,百战百胜. ...

  8. CentOS安装Netdata进行系统监控

    偶然间在知乎看到了Netdata这个东西 看到它华丽的界面 顿时心动 gkd gkd #准备 yum install autoconf automake curl gcc git libmnl-dev ...

  9. 洛谷 P5239 回忆京都 题解

    题面 裸的杨辉三角前缀和,但----- 在求前缀和的时候有可能得到一个负数(由于取模的原因),所以一定要加上模数后再取模!!!! #include <bits/stdc++.h> #def ...

  10. 打印输出opencv的版本信息

    本文链接: https://mangoroom.cn/opencv/print-opencv-version-info.html 序 查看自己安装的opencv的版本信息的方法有两种. 方法一-查看l ...