JavaScript循环遍历你会用哪些之小结篇

2023-09-07 21:40:04 176

总结JavaScript中的循环遍历

定义一个数组和对象

constarr=['a','b','c','d','e','f'];
constobj={
a:1,
b:2,
c:3,
d:4
}

for()

经常用来遍历数组元素

遍历值为数组元素索引

for(leti=0;len=arr.length,i
forEach()
用来遍历数组元素
第一个参数为数组元素，第二个参数为数组元素索引，第三个参数为数组本身(可选)
没有返回值
arr.forEach((item,index)=>{
console.log(item);//abcdef
console.log(index);//012345
})


map()
用来遍历数组元素
第一个参数为数组元素，第二个参数为数组元素索引，第三个参数为数组本身(可选)
有返回值，返回一个新数组
every()，some()，filter()，reduce()，reduceRight()不再一一介绍，详细请看Js中Array方法有哪些？
letarrData=arr.map((item,index)=>{
console.log(item);//abcdef
console.log(index);//012345
returnitem;
})
console.log(arrData);//["a","b","c","d","e","f"]


for...in
可循环对象和数组，推荐用于循环对象
用于循环对象时
循环值为对象属性
for(letkeyinobj){
if(obj.hasOwnProperty(key)){
console.log(key);//abcd属性
console.log(obj[key]);//1234属性值
}
}
用于遍历数组时
值为数组索引
for(letindexinarr){
console.log(index);//012345数组索引
console.log(arr[index]);//abcdef数组值
}
当我们给数组添加一个属性name
arr.name='我是自定义的属性'
for(letindexinarr){
console.log(index);//012345name(会遍历出我们自定义的属性)
console.log(arr[index]);//abcdef我是自定义属性name
}
for...of
可循环对象和数组，推荐用于遍历数组
用于遍历数组时
遍历值为数组元素
for(letvalueofarr){
console.log(value);//abcdef数组值
}
用于循环对象时
须配合Object.keys()一起使用，直接用于循环对象会报错，不推荐使用for...of循环对象
循环值为对象属性
for(letvalueofObject.keys(obj)){
console.log(value);//abcd对象属性
}
总结
用于遍历数组元素使用：for()，forEach()，map()，for...of

用于循环对象属性使用：for...in
以上所述是小编给大家介绍的JavaScript循环遍历你会用哪些小结篇，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JavaScript循环遍历你会用哪些之小结篇

热门推荐

随机推荐