js常用循环方式
创始人
2025-06-01 07:22:37
0
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));

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

相关内容

热门资讯

今年股价大涨近1900%,大牛... 12月29日晚,上纬新材公告称,公司股票自2025年7月9日至12月29日累计上涨1598.33%,...
痛别!吴锋院士逝世 ◎ 科技日报记者 张盖伦 12月29日,记者从北京理工大学了解到,中国工程院院士、著名材料科学家、我...
金价新高也不慌?资管机构认可黄... 全文共3234字,阅读全文约需7分钟随着金价的不断走高,黄金在资产配置中的角色日益被国内资管机构所关...
锂矿龙头突发公告:涉嫌内幕交易... 赣锋锂业(002460.SZ)今日公告称,公司于当日收到宜春市公安局的移送起诉告知书, 因涉嫌内幕交...
AI芯片主线熄火后,这一板块有... 临近年底,资金本以为是“刀枪入库、马放南山”的节奏;但没想到是市场依旧有小的热点出现,整体市场也没有...
减肥药的风卷到了宠物领域!华东... 宠物也有专属减肥药了,还是双靶点。12月29日,华东医药(000963)对外宣布称,12月26日,全...
870万罚款创三年之最,重庆农... 作者 | 刘银平编辑 | 付影来源 | 独角金融近日,重庆农商行(601077.SH)因5项违规行为...
目录价格超82亿美元!空客获国... 空客斩获国内航司A320系列大单。12月29日晚间,吉祥航空(603885.SH)发布公告称,拟与空...
行业第一也“内卷”,比亚迪供应... 12月30日,北京维通利电气股份有限公司(下称“维通利”)即将迎来深交所发审委的上市审议。本次IPO...
贵州茅台:控股股东茅台集团30... 贵州茅台控股股东增持计划已实施完毕,增持金额约30亿元。12月29日,贵州茅台酒股份有限公司(贵州茅...