for each...in

  使用一个变量迭代一个对象的所有属性值,对于每一个属性值,有一个指定的语句块被执行。

  一些对象的内置属性是无法被遍历到的,包括所有的内置方法,例如String对象的indexOf方法。不过大部分的用户自定义属性都是可遍历的。

  【警告:永远不要使用  for each...in语句遍历数组,仅用来遍历常规对象。(有可能会对数组顺序发生改变)】

  语法:

    for each (variable in object) {
      statement
    }

  参数:

    variable

      用来遍历属性值的变量,前面的var关键字是可选的。该变量是函数的局部变量而不是语句块的局部变量。

    object

      该对象的属性值会被遍历。

    statement

      遍历属性值时执行的语句。 如果想要执行多条语句, 请用({ ... }) 将多条语句括住。

  eg:

    var sum = 0;
    var obj = {prop1: 5, prop2: 13, prop3: 8};

    for each (var item in obj) {
    sum += item;
    }

    console.log(sum);

    // output:logs "26", which is 5+13+8

for...in

  以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。

  for...in 循环只遍历可枚举属性。

  像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性。

  语法:

    for (variable in object) {...}

  参数:

    variable

      在每次迭代时,将不同的属性名分配给变量。

    object

      被迭代枚举其属性的对象。

  eg:

    var obj = {a: 1, b: 2, c: 3};

    for (const prop in obj) {
    console.log(`obj.${prop} = ${obj[prop]}`);
    }

    // Output:
    // "obj.a = 1"
    // "obj.b = 2"
    // "obj.c = 3"

for...of

  在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代例子,并为每个不同属性的值执行语句。

  对于for...of的循环,可以由break, throw 或return终止。

  语法:

     for (variable of iterable) {
      //statements
      }

  参数:

    variable

      在每次迭代中,将不同属性的值分配给变量。

    iterable

      被迭代枚举其属性的对象。

  eg:

    let iterable = [10, 20, 30];

    for (let value of iterable) {
      value += 1;
      console.log(value);
    }

    // 11
    // 21
    // 31

-------------------------------------------------------------------------------------------------------------------------------
关于  for...in  和  for...of 之间的区别:

  无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

  for...in 语句以原始插入顺序迭代对象的可枚举属性。

  for...of 语句遍历可迭代对象定义要迭代的数据。

----关于JS中迭代的三个“FOR”----的更多相关文章

  1. js中迭代元素特性与DOM中的DocumentFragment类型 笔记

    JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...

  2. js中confirm揭示三个按钮“是”“否”“取消”

    js中confirm提示三个按钮“是”“否”“取消” 重载DOM中confirm window.confirm = function(str) {   str=str.replace(/\'/g, & ...

  3. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  4. 关于原生js中函数的三种角色和jQuery源码解析

    原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...

  5. JS 中 原生方法 (三) --- Date 日期

    本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道,真是羞耻悳boy 当然 本文阐述的主要类容 from MDN ( zh-cn ) D ...

  6. js中迭代方法

    基础遍历数组:            for()            for( in )             for(var i = 0;i<arr.length;i++){       ...

  7. js中创建对象的三种方式

    1. 对象字面量 var obj={ name:"小小", age:3, car:{ brand:"baoma", } }; } 2.使用内置构造函数 var ...

  8. js中迭代的常用几种方法

    var arr = [1,3,2,5,3]; //forEach 两个参数,第一个为数组内容,第二个为数组下标arr.forEach(function(item,index) { console.lo ...

  9. JS中var声明与function声明以及构造函数声明方式的区别

    JS中常见的三种函数声明(statement)方式有这三种: // 函数表达式(function expression) var h = function () { // h } // 函数声明(fu ...

随机推荐

  1. go语言问题集锦

    ==============================================beego框架=========================================== 1.使 ...

  2. 关于vue

    render:(h)=>h(App):声明App组件的内容 挂载到节点 const root=document.createElement("div")document.bo ...

  3. Could not read document: Can not deserialize instance of java.lang.String out of START_ARRAY

    线上问题: { "timestamp": "1544510665", "status": 400, "error": & ...

  4. frist Django app — 一、 创建工程

    缘起 既然python都学了,学习python的时候感觉是相见恨晚,一种新的编程语言带给我一种新的思考问题的方式,为了巩固学过的东西并进一步学习python,就想学学Django,看看会不会带给我关于 ...

  5. PHP+Ajax实现文件上传功能

    前端显示界面: 1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 传统应用、服务器集群、分布式、SOA各种架构的简单解释

    传统架构:无论是SE应用还是WEB应用,传统架构都是表现层---业务层---持久层---数据库   1000并发(tomcat单台500并发,tomcat一般做集群的话,节点数量不能太多,5个左右): ...

  7. 项目管理利器maven学习笔记(一):maven介绍及环境搭建

    maven介绍 maven下载与环境搭建 http://maven.apache.org/download.cgi# 解压到指定位置,比如我解压到D盘 设置maven环境变量 添加一个变量名,变量值为 ...

  8. 拦截过滤防御XSS攻击 -- Struts2.3 以及 2.5 的解决方式

    使用Struts2框架开发的后台在防御XSS攻击的时候很多方式都不能用,因为Struts2对请求进行的二次封装有区别.以下针对Struts2的XSS攻击进行拦截过滤防御解决: Struts2.3 本方 ...

  9. vim简单命令

    保存文件:普通模式(在  :)后面 1.wq 2.q 3.!q 4.shirft+zz  直接退出vim 5.set nu  设置行号 行号移动: 1.shift+1;移动到该行末尾 2.shirft ...

  10. ExpandableListView解析JSON数据

    效果图:                                       说明:刚开始使用这个控件我花费了3天的时间,但是一直都没有达到预期的效果,要么就是直接全部不显示,要么就是数据累加 ...