js 各种循环的区别

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」

大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是 js 实现上下无缝轮播 ；今天我们一起来学习一下JS 各种循环的区别。

for 循环

普通for循环，用于遍历数组；可以结合break continue return, 随时退出循环

var arr = ['小红', '小如', '小雨', '小七'];
for(var i=0;i<arr.length;i++){
 console.log(arr[i]); // 小红 小如 小雨 小七
}

forEach 循环

用于遍历数组，不能使用break continue return退出循环,因为循环时用return不会阻止代码运行，代码一样会运行到最后。

var arr = ['小红', '小如', '小雨', '小七'];
arr.forEach((item)=>{
 console.log(item); // 小红 小如 小雨 小七
})

for(...in...) 循环

主要用于对象也可以遍历数组；只能获得对象的键名，不能直接获取键值。

(1) 遍历对象获取到了键名

var obj = {
    name:'Amy',
    sex:'女',
    like:'运动'
}
for(let i in obj){
    console.log(i)  // name sex like
}

(2) 遍历数组时获取到的是数组的下标 (对象的键名)

var arr = ['小红', '小如', '小雨', '小七'];
for (let a in arr) {
  console.log(a); // 0 1 2 3
}

for(...of...) 循环

ES6的新语法，一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

能获取对象的键值

for (let a of arr) {
  console.log(a); // 小红 小如 小雨 小七
}

遍历对象需要通过和Object.keys()搭配使用

var obj = {
    name:'Amy',
    sex:'女',
    like:'运动'
}
console.log(Object.keys(obj)) // [ 'name', 'sex', 'like' ] 
for (let i of Object.keys(obj)) {
console.log(i) //name sex like 
}

在JS中 return语句只能放在function 中，如果不是会报以下错误。

结语：

好了文章到此就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下。希望这篇文章对大家有帮助,也希望大家多多支持我，今天是我参与2022首次更文挑战的第20天，加油！坚持就是胜利。