JS 中几种常用的循环方式
1. 普通的for 循环
遍历数组时 i 可设定 i 为下标 length 为循环次数 i++ 为循环下标的更新
let list=[ {name:'张三',age:22}, {name:'李四',age:24}, {name:'王五',age:18}, {name:'小明',age:18}, {name:'小红',age:18}, {name:'小张',age:18} ] for(let i=0;i<list.length;i++){ console.log(list[i]) // {name:'张三',age:22} {name:'李四',age:24} {name:'王五',age:18} 等等 }
2. for in 循环
遍历数组时 i 为下标 遍历对象时 i 为属性名
let list=[ {name:'张三',age:22}, {name:'李四',age:24}, {name:'王五',age:18}, {name:'小明',age:18}, {name:'小红',age:18}, {name:'小张',age:18} ] for(let i in list){ //遍历数组或JSON时 i 为下标 console.log(list[i]) // {name:'张三',age:22} {name:'李四',age:24} {name:'王五',age:18} 等等 } let obj={name:'张三',age:22} for(let i in obj){ // 遍历对象时 i 为属性名 console.log(obj[i],i) //张三,name 22,'age' }
3. for of 循环
遍历数组时 i 为当前的值 不可遍历普通对象
let list=[ {name:'张三',age:22}, {name:'李四',age:24}, {name:'王五',age:18}, {name:'小明',age:18}, {name:'小红',age:18}, {name:'小张',age:18} ] let list2=[1,2,3,4,5,6] let obj={name:'张三',age:22} for(let i of list){ console.log(i) //{name: '张三', age: 22} {name: '李四', age: 24} {name: '王五', age: 18} 等等 } for(let i of list2){ console.log(i) //1 2 3 4 5 6 } for(let i of obj){ console.log(i) //报错 obj is not iterable es6中的“for of”不能遍历对象 原因请看 Iterator接口 }
4.forEach 循环
forEach方法用于调用数组中的每个元素,并将(元素val 下标index 原数据arr)传递给回调函数。
let list=[ {name:'张三',age:22}, {name:'李四',age:24}, {name:'王五',age:18}, {name:'小明',age:18}, {name:'小红',age:18}, {name:'小张',age:18} ] 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 list=[ {name:'张三',age:22}, {name:'李四',age:24}, {name:'王五',age:18}, {name:'小明',age:18}, {name:'小红',age:18}, {name:'小张',age:18} ] let newList=list.map((item,index,list)=>{ item.name=`新${item.name}` item.age=item.age*2 return item }) console.log(newList,list) //[{name: '新张三', age: 44},{name: '新李四', age: 48},...] [{name: '张三', age: 22},{name: '李四', age: 24},...]
map和forEach的区别
forEach() 方法不会返回执行结果,而是undefined。 map会返回一个新数组 也就是说 forEach会修改原来的数组。而map()方法会得到一个新的数组并返回