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

博客园 - smile轉角

【js】ES5，ES6继承是如何实现的【js】setTimeout、Promise、Async/Await 的区别【面试题】思维逻辑方面【js】js内置对象Error(错误机制) 【TS】学习笔记【js】CommonJS、AMD、CMD三种规范【其他】查看Animate.css官网动画没有效果【vue3】父子组件通信之 vue3 defineProps,defineEmits ,defineExpose 【js】JS严格模式有什么特点【css】使用弹性盒子布局时，省略号问题【vue】 Failed to load resource: the server responded with a status of 404 (Not Found) 【第三方】富文本调研【js】元素是否在可视区范围内【js】json的相关操作【vue3】资料【css】展示背景图片的底部部分【html】 svg 【html5】html5中input 标签 type值为range时，修改其默认css 【js】map,reduce,filter的区别

smile轉角 · 2022-08-11 · via 博客园 - smile轉角

区别

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

demo

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);
}// 0 1 2 3 4

推荐订阅源

博客园 - smile轉角

区别

一、for…in

1.作用：

2.语法：

3.实例：

二、for…of

1.作用：

2.语法：

3.实例：

三、forEach

1.作用：

2.语法：

3.实例：

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

1、forEach中不可使用continue,break,语法问题，

见图：

2、for of 中使用break

3.for in使用示例图

相关资料：