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 为属性名 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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 为当前的值  不可遍历普通对象

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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）传递给回调函数。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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() 方法返回一个新数组，数组中的元素为原始数组元素处理后的值。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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()方法会得到一个新的数组并返回