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(obj[o]); // 遍历出来的是对象中属性各自对应的值1,2,3
}

需要注意的是，使用for…in遍历对象时，不仅会把对象上的属性遍历出来，还会把对象原型链上的可枚举的属性遍历出来

再看看for…in遍历数组能不能成功

const arr = [1,2,3,4,5]
for(var a in arr){
    console.log(a); // 输出的是数组索引
    console.log(arr[a]); // 输出的是数组索引对应的值
}

结果是成功的，但又为什么说最好不要用for…in遍历数组呢？

（1）for…in遍历出的数组索引为字符串型数字，不能直接进行几何运算
（2）遍历的顺序可能不是按照实际数组的内部顺序
（3）使用for…in会遍历所有的可枚举属性，包括原型

for…of能用来做什么

（1）for…of可以用来遍历数/数组/字符串/map/set等拥有迭代器对象的集合
（2）for…of遍历出来的是key-value中的value值

// 遍历数组
var arr = [1,2,3,4,3,5,7];
for (let i of arr){
    console.log(i);
}

// 遍历字符串
var str = 'hello'
for (let s of str){
    console.log(s); 
}

// 遍历set集合
const set = new Set([1,2,3,4])
for (let s of set){
    console.log(s);
}

补充：
（1）for…of不能用来遍历对象，因为普通对象中没有迭代器对象
（2）与forEach()不同的是，for…of可以使用break,continue,return等语句

总结下来就是：

（1）在遍历对象时用for…in，在遍历数组时用for…of
（2）for…in遍历出的是key，for…of遍历出的结果是value。
也就是说遍历数组时，for…in遍历的是数组的索引，for…of遍历的是数组的元素值。

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

赞 (0)

相关推荐

  • 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

  • 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 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 =

  • 深入浅析JavaScript中的in关键字和for-in循环

    1.in关键字 属性名 in 对象,用来判断某个属性在对象中是否存在与其严格相等的属性名,返回boolean值 属性名必须是字符串或数字 var obj = { a : 1, b : 2 } console.log('a' in obj);//返回true,obj对象中存在a属性名 var arr = [12,11,10]; console.log(12 in arr);//返回false,原因arr数组中12,11,10三个值对应的属性名分别是0,1,2 2.for-in循环 for(var

  • JavaScript中break、continue和return的用法区别实例分析

    本文实例讲述了JavaScript中break.continue和return的用法区别.分享给大家供大家参考,具体如下: break 停止了这个for循环,跳出循环来继续执行fn函数里之后的语句  function fn() { for(var i = 0; i < 5; i++) { if(i == 3) { break; } console.log(i); } console.log("ha") } fn();//0 1 2 ha continue 只是停止了当前循环,继续

  • JavaScript中var let const的用法有哪些区别

    目录 1.重复声明 1.1 var 1.2 let 1.3 const 2.变量提升 2.1 var 2.2 let 2.3 const 3.暂时性死区 3.1 var 3.2 let 3.3 conset 4. window对象的属性和方法 5.块级作用域 1.重复声明 var支持重复声明,let.const不支持重复声明. 1.1 var var a = 1; var a = 2; console.log(a); 输出结果: 2 1.2 let let b = 3; let b = 4; c

  • javascript中Set、Map、WeakSet、WeakMap区别

    前言 在学习vue官方源码解析的过程中,看到了有关这一块的解析,所以跟着学习并且记录一下 Set 之前我对Set的了解还是仅仅停留在数组去重,但是我并没有在项目中用过,深入学习后,发现有时候用这个特性还挺方便的.介绍Set之前我们先来介绍一下集合,集合是由一群无序的.不重复的元素组成的集合.Set对象是一个由任意唯一值组成的的集合,这个唯一值可以是基本类型,也可以是引用类型,并且Set是可迭代的. Set的使用 const set = new Set([1, 2, 3, 4, 5, 6, 5,

  • javascript中JSON.parse()与eval()解析json的区别

    javascript中JSON.parse()与eval()解析json的区别

    本文实例讲述了javascript中JSON.parse()与eval()解析json的区别.分享给大家供大家参考,具体如下: JSON(JavaScript Object Notation)是一种轻量级的数据格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是Javascript原生格式,这意味着在javascript中处理JSON数据 基本格式: varjsonData='{"data1":"Hello,","data2"

  • Javascript中 带名 匿名 箭头函数的重要区别(推荐)

    带名函数是指函数显示地给出了一个名字的函数,function abs(x){}.匿名函数是指函数只带有function这个关键字,而没有像abs这种函数名称的函数,如function(){}.ES6标准新增了一种新的函数:Arrow Function(箭头函数)箭头函数表面上相当于匿名函数,并且简化了函数定义.它们各自的区别是什么呢? 1 带名和匿名函数的区别 区别:匿名函数需要讲地址赋值给另一个变量let a,然后再用a来调用函数:而带名函数因为显示地给出了函数名称,所以可以直接用这个函数名称

  • javascript中apply、call和bind的使用区别

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. 那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " ,

  • JavaScript中的普通函数和箭头函数的区别和用法详解

    最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答-- 箭头函数中的 this 和调用时的上下文无关,而是取决于定义时的上下文 这并不是很正确的答案--虽然也不是完全错误 箭头函数中的 this 首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关 function make () { return ()=>{ consol

  • Javascript中Math.max和Math.max.apply的区别和用法详解

    最近在做一个小案例的时候遇到了Math.max.apply这么一个用法,之前很少遇到过感觉挺有趣的,就记录一下. 1Math.max 语法: Math.max(n1,n2,n3,...,nX) 返回值:max() 方法可返回指定的参数中带有较大的值的那个数 var a = Math.max(1,2,3,4); console.log(a); //4 但是如果数据是放在一个数组里面,此时就不能这样调用了.这时就用到apply方法 2Math.max.apply apply() 方法调用一个函数.简

  • JavaScript中“过于”犀利地for/in循环使用示例

    Java中的增强for循环很是好用 复制代码 代码如下: for (String str : list) { System.out.println(str);//其中str直接就是集合中的元素 } 但是JavaScript中为我们提供的for/in循环已然不是这么简单了 复制代码 代码如下: var car var garage= new Array() garage[0] = "宝马" garage[1] = "奔驰" garage[2] = "宾利&q

随机推荐