for of 和 for in 的区别介绍

目录
  • 1.共性
  • 2.区别
    • 1.两者对比例子(遍历对象)
    • 2.两者对比例子(遍历数组)
  • 3.特点
    • ①. for in 特点
  • 简述for in 和 for of 的区别

1.共性

for of 和 for in都是用来遍历的属性

2.区别

  • for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
  • for in得到对对象的key或数组,字符串的下标
  • for of和forEach一样,是直接得到值
  • for of不能用于对象

1.两者对比例子(遍历对象)

const obj = {
        a: 1,
        b: 2,
        c: 3
    }
    for (let i in obj) {
        console.log(i)    //输出 ： a   b  c
    }
    for (let i of obj) {
        console.log(i)    //输出： Uncaught TypeError: obj is not iterable 报错了
    }

说明： for in 和 for of 对一个obj对象进行遍历,for in 正常的获取了对象的 key值,分别打印 a、b、c,而 for of却报错了。

2.两者对比例子(遍历数组)

   const arr = ['a', 'b', 'c']
   // for in 循环
   for (let i in arr) {
       console.log(i)         //输出  0  1  2
   }

   // for of
   for (let i of arr) {
       console.log(i)         //输出  a   b   c
   }

3.特点

①. for in 特点

  • for … in 循环返回的值都是数据结构的 键值名(即下标)。
  • 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
  • for … in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。
  • 特别情况下, for … in 循环会以看起来任意的顺序遍历键名
  • for in 的 常规属性和 排序属性
  • 在ECMAScript规范中定义了 「数字属性应该按照索引值⼤⼩升序排列，字符串属性根据创建时的顺序升序排列。」在这⾥我们把对象中的数字属性称为 「排序属性」，在V8中被称为 elements，字符串属性就被称为 「常规属性」， 在V8中被称为 properties。
function Foo() {
 this[100] = 'test-100'
 this[1] = 'test-1'
 this["B"] = 'bar-B'
 this[50] = 'test-50'
 this[9] = 'test-9'
 this[8] = 'test-8'
 this[3] = 'test-3'
 this[5] = 'test-5'
 this["A"] = 'bar-A'
 this["C"] = 'bar-C'
}
var bar = new Foo()
for(key in bar){
 console.log(`index:${key} value:${bar[key]}`)
}
//输出：
index:1 value:test-1
index:3 value:test-3
index:5 value:test-5
index:8 value:test-8
index:9 value:test-9
index:50 value:test-50
index:100 value:test-100
index:B value:bar-B
index:A value:bar-A
index:C value:bar-C

总结一句: for in 循环特别适合遍历对象。

①. for of

  • for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名
  • 一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。
  • for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。

知识点补充：

简述for in 和 for of 的区别

1、推荐在循环对象属性的时候使用 for...in，在遍历数组的时候的时候使用 for...of 
2、for...in 循环出的是 key，for...of 循环出的是 value 
3、注意，for...of 是 ES6 新引入的特性。修复了 ES5 引入的 for...in 的不足 
4、for...of 不能循环普通的对象（如通过构造函数创造的），需要通过和 Object.keys()搭配使用

 for in遍历数组的毛病：

1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
所以for in更适合遍历对象，不要使用for in遍历数组。

那么除了使用for循环，如何更简单的正确的遍历数组达到我们的期望呢（即不遍历method和name），ES6中的for of更胜一筹.

遍历对象

遍历对象 通常用for in来遍历对象的键名

到此这篇关于for of 和 for in 的区别的文章就介绍到这了,更多相关for of 和 for in 的区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS中for,for...in,for...of和forEach的区别和用法实例

    for循环 基本语法格式: for(初始化变量;条件表达式;操作表达式){              循环体语句;     } 普通for循环在Array和Object中都可以使用.for循环中可以使用return.break等来中断循环. //遍历数组 var arr = [1,2,3,4,5]; for(var i=0;i<arr.length;i++){ console.log(arr[i]); } //遍历对象 var obj={ x0:10, x1:20, x2:30 } for(va

  • javascript中for...of和for..in循环的区别

    目录 for…in可以用来干什么 for…of能用来做什么 总结下来就是: for…in可以用来干什么 (1)for…in最好用来遍历对象,但也可以遍历数组(有缺陷)(2)for…in遍历的是key-value中的key值 我们先看怎么使用for…in遍历对象 const obj = {     a:1,     b:2,     c:3 } for( var o in obj){     console.log(o); // 遍历出来的是对象中的属性,a,b,c     console.log

  • 通过实例解析JavaScript for in及for of区别

    对数组的遍历大家最常用的就是for循环,ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map.filter.some.every.reduce.reduceRight等,只不过他们的返回结果不一样.但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数. 那么接下来我们一起看一下for in 和for of 的区别吧. for in 看一个简单的例子 //for in 应用于数组 Array.prototype.sayHello =

  • 正则表达式中test、exec、match的区别介绍及括号的用法

    正则表达式中test、exec、match的区别介绍及括号的用法

    test.exec.match的简单区别 1.test test 返回 Boolean,查找对应的字符串中是否存在模式. var str = "1a1b1c"; var reg = new RegExp("1.", ""); alert(reg.test(str)); // true 2.exec exec 查找并返回当前的匹配结果,并以数组的形式返回. var str = "1a1b1c"; var reg = new Re

  • oracle中存储函数与存储过程的区别介绍

    在oracle中,函数和存储过程是经常使用到的,他们的语法中有很多相似的地方,可是也有它们的不同之处,这段时间刚学完函数与存储过程,来给自己做一个总结: 一:存储过程:简单来说就是有名字的pl/sql块. 语法结构: create or replace 存储过程名(参数列表) is --定义变量 begin --pl/sql end; 案例: create or replace procedure add_(a int,b int) is c int; begin c:=a+b; dbms_ou

  • Oracle、MySQL和SqlServe三种数据库分页查询语句的区别介绍

    先来定义分页语句将要用到的几个参数: int currentPage ; //当前页 int pageRecord ; //每页显示记录数 以之前的ADDRESSBOOK数据表为例(每页显示10条记录): 一.SqlServe下载 分页语句 String sql = "select top "+pageRecord +" * from addressbook where id not in (select top "+(currentPage-)*pageRecor

  • vue学习笔记之vue1.0和vue2.0的区别介绍

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> VUE2.0:必须有根元素,包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <

  • javascript函数命名的三种方式及区别介绍

    javascript函数命名的三种方式及区别介绍 第一 复制代码 代码如下: function fn(val1,val2) { alert(val1+val2); } fn(1,2); 第二 复制代码 代码如下: var fn=function() { alert(val1+val2); } fn(1,2); 第三 复制代码 代码如下: var fn=new Function("alert(val1+val2)"); fn(1,2); 上面三种方式逻辑上是等价的,但是还是有点小区别:区

  • apache伪静态与iis伪静态规则与配置区别介绍

    本文章来总结一下关于apache伪静态与iis伪静态区别介绍,主要讲到了一些规则的问题与配置区别,以后大家就可以直接在iis伪静态转换apache,反之也很简单哦. 在我开时打开模式不一样:apache的.htaccess配置文件是以:RewriteEngine On 将写模式打开.Apache伪静态html(URL Rewrite)设置法phpma一 打开 Apache 的配置文件 httpd.conf .phpma二 将#LoadModule rewrite_module modules/m

  • MyBatis中关于resultType和resultMap的区别介绍

    MyBatis中在查询进行select映射的时候,返回类型可以用resultType,也可以用resultMap,resultType是直接表示返回类型的(对应着我们的model对象中的实体),而resultMap则是对外部ResultMap的引用(提前定义了db和model之间的隐射key-->value关系),但是resultType跟resultMap不能同时存在. 在MyBatis进行查询映射时,其实查询出来的每一个属性都是放在一个对应的Map里面的,其中键是属性名,值则是其对应的值.

  • 深入浅析WinForm 进程、线程及区别介绍

    一.进程 进程是一个具有独立功能的程序关于某个数据集合的一次运行活动. 它可以申请和拥有系统资源,是一个动态的概念,是一个活动的实体. Process 类,用来操作进程. 命名空间:using System.Diagnostics; Process.Start("calc"); //打开计算器 Process.Start("mspaint"); //打开画图 Process.Start("iexplore" , "http://www.

  • JS中dom0级事件和dom2级事件的区别介绍

    dom0级事件 <a href="#" id="hash" onclick="fn();fn();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(); btn.onclick=function(){ alert(''); }; btn.onclick=function(){ alert(

  • Java_异常类(错误和异常,两者的区别介绍)

    Java_异常类(错误和异常,两者的区别介绍)

    在 Java 中,所有的异常都有一个共同的祖先 Throwable(可抛出).Throwable 指定代码中可用异常传播机制通过 Java 应用程序传输的任何问题的共性. Throwable 有两个重要的子类:Exception(异常)和 Error(错误),二者都是 Java 异常处理的重要子类,各自都包含大量子类. ①.Exception(异常)是应用程序中可能的可预测.可恢复问题.一般大多数异常表示中度到轻度的问题.异常一般是在特定环境下产生的,通常出现在代码的特定方法和操作中.在 Ech

随机推荐