js 对数组的循环遍历总结

以下的例子是在vue里写的小 demo 所以格式 是vue里的格式 

for循环

for 循环是最基本的循环遍历

设置demo中需要的变量：

​
data () {
    return {
      flowerVal: ['hmg', 'md', 'hmg', 'yjx'],
      carouselVal: [{
        title: 'carousel1',
        url: '3',
        content: '我是第1 个列表的，第1 个内容'
      }, {
        title: 'carousel2',
        url: '3',
        content: '我希望我的内容控制在35个字符内'
      }, {
        title: 'carousel3',
        url: '3',
        content: '我是第 2个列表的，第 1个内容'
      }, {
        title: 'carousel4',
        url: '3',
        content: '我是第 2个列表的，第 2个内容'
      }, {
        title: 'carousel5',
        url: '2',
        content: '我是第 3个列表的，第 1个内容'
      }, {
        title: 'carousel6',
        url: '2',
        content: '我是第 3个列表的，第 2个内容'
      }]
    }

以下demo的调用 统一先放出来

created () {
    // 调用数组的遍历方法
    console.log(this.forArrayHandle(this.carouselVal))
    this.forEachHandle(this.carouselVal)
    this.mapHandle(this.carouselVal)
    this.forOfHandle(this.flowerVal)
    this.filterHandle(this.carouselVal)
    this.forInHandle(this.flowerVal)
    this.forInHandle(this.carouselVal)
  }

 

通过for遍历出 每一个tilte值

methods:{
    forArrayHandle (arr) {
      let newArray = []
      for (let i = 0, len = arr.length; i < len; i++) {
        newArray.push(arr[i]['title'])
      }
      return newArray
    },
}

​

forEach(item,index,arr)

forEach() 第一个参数为数组元素(必须),第二个为元素索引，第三个为数组元素

// 遍历使用上例中的遍历
methods:{
    forEachHandle (arr) {
      arr.forEach((item, index, arr) => {
        console.log(item, index, arr[index]['title'])
      })
    },
}

map(el,i,arr)

map() 第一个参数为正在遍历的的元素(必须),第二个为当前遍历元素的索引，第三个为数组

methos:{
 mapHandle (arr) {
      // 取得数组中的每一个title,并用_连接
      let newArray = arr.map(item => item.title).join('___')
      console.log('map通过箭头函数来遍历=》' + newArray)
      let arr1 = arr.map(item => {
        if (item['url'] === '3') {
          return item['url'] + '**'
        }
      })
      console.log(arr, arr1)
    }
}

打印结果：

map通过箭头函数来遍历=》carousel1___carousel2___carousel3___carousel4___carousel5___carousel6

arr:

1. 0:
   1. content: (...)
   2. title: "carousel1"
   3. url: "3"

arr1: ["3**", "3**", "3**", "3**", undefined, undefined]

for ... of

即可循环遍历数组 又 可循环遍历 对象 但是 很多文档中更推荐用来遍历数组

es6中提供的方法：

1. keys()是对键名的遍历  
2. values() 是对键值对遍历
3. entries() 是对键值对对遍历

methods:{
    forOfHandle (arr) {
      // 遍历数组对索引
      for (let item of arr.keys()) {
        console.log('item:' + item)
      }
      // 遍历数组对的内容
      for (let item of arr.values()) {
        console.log('item:' + item)
      }
      // 遍历数组对的内容 效果等同于 arr.values()
      for (let item of arr) {
        console.log('item:' + item)
      }
      // 遍历数组的索引和内容
      for (let [item, val] of arr.entries()) {
        console.log('item:' + item + '__val:' + val)
      }
    }
}

for ...in

同样可以遍历数组和对象 但是 文档中更推荐用来遍历对象

methods:{
    forInHandle (arr) {
      for (let i in arr) {
        console.log(i, arr[i])
      }
    }
}

filter(item,index,arr)

filter() 第一个参数 当前元素，第二个参数 当前元素的索引，第三个参数 当前元素属于的数组对象。该方法筛选出符合条件的元素组成一个新的数组 并不会改变原来的数组

methods:{
    filterHandle (arr) {
      let newArray = arr.filter(item => item['url'] === '3')
      console.log(newArray)
    }
}