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