js常用循环方式
创始人
2025-06-01 08:36:03
let list = [{name:'张三',age:22},{name:'李四',age:24},{name:'王五',age:18},{name:'小明',age:18},{name:'小红',age:18},{name:'小张',age:18}
];

1、for循环

for(let i=0;i console.log(list[i])// 输出结果:{name:'张三',age:22}   {name:'李四',age:24}  {name:'王五',age:18} 等等
}

2、for in循环(主要用来遍历对象,获取对象键值)

(1)遍历对象时 i 为属性名也就是对象的键

let obj={name:'张三',age:22} 
for(let i in obj){     console.log(obj[i],'obj[i]是value'); // 输出结果:张三 22console.log(i)// 输出结果:name age
}

(2)遍历数组或JSON时 i为下标也就是索引

for(let i in list){    console.log(list[i]); // 输出结果:{name:'张三',age:22}   {name:'李四',age:24}  {name:'王五',age:18} 等等
}

3、for of循环(可遍历数组/集合/字符串,不可遍历对象)

(1)遍历集合[{}]

for(let i of list){console.log(i)// 输出结果:{name: '张三', age: 22} {name: '李四', age: 24} {name: '王五', age: 18} 等等
}

(2)遍历数组[],i是数组中的元素值

let list2 = ['a',2,'c','f',5,6];
for(let i of list2){ console.log(i) // a 2 c f 5 6
}

(3)不可遍历对象会报错

let obj={name:'张三',age:22};
for(let i of obj){console.log(i,'对象') 
}

在这里插入图片描述

4、forEach 循环(遍历数组,会改变原始数组,不会返回执行结果)

val是当前项的值;index是当前项的索引;arr是数组对象本身

list.forEach((val,index,arr)=>{console.log(val,index,arr)// 输出结果:{name: '张三', age: 22}  0  arr 原数组//          {name: '李四', age: 24}  1  arr 原数组val.age=val.age/2
})console.log(list)// 输出结果:{name: '张三', age: 11}{name: '李四', age: 12}{name: '王五', age: 9}{name: '小明', age: 9}{name: '小红', age: 9}{name: '小张', age: 9}

5、map循环 (遍历数组,会返回一个新数组)

map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。循环中途是无法停止的,总是会将所有成员遍历完

let arr = [1,2,3,4,5];
let arr2 = arr.map((n)=>{return n+1
})

在这里插入图片描述

6、some(判断数组中是否至少有一个元素满足条件,一真即真)

var arr = [66, 34, 643, 774, 64, 834 ];
console.log( arr.every(a=> { return a>= 100 }) ) // false
console.log( arr.some(a=> { return a>= 40 } ) ) // true

7、every(判断数组中是否每个元素都满足条件,一假即假)

var arrObj = [{ status:0, id:1 },{ status:1, id:2 },{ status:0, id:3 },
]
console.log( arrObj.every( (val) => val.status===0) );// false
console.log( arrObj.some( (val) => val.id===2) );// true

8、filter(该方法用于过滤数组,且不会改变原数组)

满足条件的元素组成一个新数组返回,所有数组元素依次执行该函数,返回结果为true的元素会被返回,如果没有符合条件的元素,则返回空数组。

const arr = [1, 2, 3, 4, 5]
console.log(arr.filter(item => item > 2)); 

在这里插入图片描述

var products = [{name: "cucumber",type: "vegetable"},{name: "apple",type: "fruit"},{name: "orange",type: "fruit"}
];
var filters = products.filter(function(item) {return item.type == "fruit";
});
console.log(filters);

在这里插入图片描述

(2)数组去重

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, 4, 56, 2];
var arr2 = arr.filter((x, index,arr)=>arr.indexOf(x) === index);
console.log(arr,'arr原数组'); 
console.log(arr2,'arr2新数组');

在这里插入图片描述

9、find(返回的是对象)

找到第一个元素后就不会在遍历其后面的元素,所以如果数组中有两个相同的元素,他只会找到第一个,第二个将不会再遍历了。

var post = { id: 1, title: "AAA" };
var comments = [{ postId: 1, content: "CCC" },{ postId: 2, content: "BBB" },{ postId: 1, content: "AAA" }
];
function commentsPost(post, comments) {return comments.find(function(item) {return item.postId == post.id;});
}
console.log(commentsPost(post, comments));

在这里插入图片描述
暂时先这样

相关内容

热门资讯

双子座流星雨划过各地夜空 12月13日至14日,年度“终极浪漫天象”,一年一度的双子座流星雨来临。双子座流星雨是北半球三大流星...
三案合并查处罚没6528万 永... 中经记者 孙汝祥 夏欣 北京报道12月13日,江苏证监局公布对永拓会计师事务所(以下简称“永拓所”)...
约车“张冠李戴” 司机收入缩水... 据央视新闻消息,数据显示,2024年我国网络货运市场规模已突破930亿元,发展势头迅猛。然而,快速增...
四年来总结 我们来总结一下这四年以来行情的变化。前三年有3000点之下有很好的机会,只不过这个时候大多数人倾向于...