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. 初次安装Ubuntu后的若干配置步骤

    第一步,安装VMware-tools 按照如下提示安装 首先将压缩包,复制到/home 目录下,将其解压,执行./vmware-install.pl即可 第二步,配置使linux能上网 首先将ubun ...

  2. 如何配置mysql的超时时间

    http://bigdata.51cto.com/art/201710/555377.htm

  3. WMS二开:外挂页面开发培训

    springboot:MAVEN结构前后台都是MVC架构基于模板引擎thymeleafapplication.yml文件里面配置了一个DEV\TEST\PROD,用于自动选择配置文件applicati ...

  4. intellij idea在project下同时打开多个工程(maven工程)

    前提:我的工程都是maven工程   我有两个工程,一个是接口contract,一个是接口的具体实现server.想要同时在一个工作空间下展示,方便调试开发,加载后效果如下   idea有worksp ...

  5. java实现将指定文件夹里所有文件路径输出到指定文件作为参数化文件给lr脚本使用

    java实现将指定文件夹里所有文件路径输出到指定文件作为参数化文件给lr脚本使用 import java.io.BufferedReader; import java.io.BufferedWrite ...

  6. jq动画设置图片抽奖

    (因为自己是前端刚入门的小白所以中间出现很多问题,不过这对于我来说就是一次经验的积累) 预想效果:点击"开始",图片循环旋转,不是同时的效果,而是有一定的时间差.点击"开 ...

  7. JS-给对象动态添加属性

    var obj = {};//用来存放获取到所填写的信息 btn.onclick = function(){ var city = input_city.value; var num = input_ ...

  8. FFmpeg 开发环境搭建及第一个程序 Hello FFmpeg 编写

    1. FFmpeg 的安装 ./configure make make install 默认会将 FFmpeg 安装至 /usr/local 目录下(可通过 configure 使用 "-p ...

  9. paloalto防火墙版本升级

    1.准备工作:此部分不影响生产环境,可直接操作. 1)备份: 2)下载OS HA情况下,在主机下载完成后,选择 Sync To Peer(同步到对端)同步到备机. 2.安装更新 1)在备机上选择安装 ...

  10. ABAP的匹配

    ABAP的匹配 通配符 字符串操作中的通配符 *:多位字符的通配符 +:一位字符的通配符 #:字符操作中的转义符 REPORT ztest_placeholder. DATA:l_name(8) TY ...