ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【js】forEach,for...in,for...of 区别

2022-08-11 10:30:47  阅读:188  来源: 互联网

标签:... 遍历 console log js let forEach var


区别

  • forEach更多的用来遍历数组,不可使用continue,break
  • for in 一般常用来遍历数组或者对象
  • for of 数组对象都可以遍历,for of不能直接的去遍历对象,因为对象不是一个可迭代数据,遍历对象通过Object.keys()获取到对象的属性名,然后再遍历

for in循环出的是key,for of循环出的是value(for of循环时没有下标

 

demo:

一、for…in

1.作用:

for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作),其所遍历的为对象的属性名(键),而非属性值。

2.语法:

for (variable index in object){
    //...
}//字符串

3.实例:

//字符串
var str="Hello"
for (let i in str){
    console.log(i)
}
// 0 1 2 3 4

//数组
var arr=["a","b","c"]
for (let i in arr){
    console.log(i)
}
// 0 1 2

//普通对象
var obj={a:1,b:2,c:3}
for (let i in obj){
    console.log(i)
}
// a b c

 

 

二、for…of

1.作用:

  • for…of语法是ES6新引入的语法,
  • for…of语法用于遍历可迭代(iterable)对象,js中的可迭代对象包括字符串String、数组Array、集合Set、字典Map、arguments 对象、DOM NodeList 对象等等,
  • for…of语法用于遍历这些对象本身的元素

2.语法:

for (variable element of iterable){    
    //...
}

3.实例:

//字符串String
var str="Hello";
for (let e of str){
    console.log(e)
}
// H e l l o

//数组Array
var arr=["a","b","c"];
for (let e of arr){
    console.log(e)
}
// a b c

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

//字典Map
var map=new Map([["a",1],["b",2],["c",3]]);
for (let e of map){
    console.log(e[0]+"=>"+e[1])
}
// a=>1 b=>2 c=>3

//arguments对象
function f(){
    for (let e of arguments){
        console.log(e)
    }
}
f(1,2,3,4,5)
// 1 2 3 4 5

//DOM NodeList 对象
var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
for (let e of child_nodes){
    console.log(e)
}
//输出parent节点的所有子节点

 

 

三、forEach

1.作用:

forEach作用于数组对象,用于遍历数组对象的每一个元素,并对每一个元素执行回调(callback)函数。

2.语法:

ArrayObject.forEach(callback(currentValue, index, arr), thisValue))
  • currentValue为遍历时数组中每次进行输入到回调函数的当前元素,为必需参数;
  • index为当前元素的索引值,为可选参数;
  • array为当前元素所属的数组对象,为可选参数。
  • thisValue为传递给回调函数的"this"值,可选,如果这个参数为空,则"undefined",否则会传递给"this"值。

3.实例:

//forEach实例
var obj={a:1};
var arr=[1,2,3];
arr.forEach(function(currentValue,index,arr){
    console.log(currentValue+this.a);
    console.log(index);
    console.log(arr);
},obj)
//2 0 [1,2,3]
//3 1 [1,2,3]
//4 2 [1,2,3]

见图

 

 

四、这几个循环中使用break、continue以及return

1、forEach中不可使用continue,break,

var  arr2 = [1,2,3,5,6];
arr2.forEach(item=>{
    if(item > 4){
        return;
    }
    console.log(item);
})//1 2 3

arr2.forEach(item=>{
    if(item > 4){
        break;
    }
    console.log(item);
})// 1 2 3

for(let i of arr2){
    if(i > 4){
        break
    }
    console.log(i);
}// 1 2 3


for(let i in arr2){
    if(i > 4){
        break
    }
    console.log(i);
}//报错

见图:

 

2、for of 中使用break

 

 

for in 中哪个都不可使用,虽然continue,break没有语法错误,但是不起作用

 

 

 

 相关资料:

 

搜索

复制

<iframe height="240" width="320"></iframe>

标签:...,遍历,console,log,js,let,forEach,var
来源: https://www.cnblogs.com/websmile/p/16573265.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有