es6新增的数组遍历方式

1、some方法

1)some() 方法测试是否至少有一个元素通过由提供的函数实现的测试。

2)参数列表：

arr.some(callback(element[, index[, array]])[, thisArg])
callback：匿名回调
element:数组内的每个元素
Index:索引
array:数组的引用

3）功能
some() 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”
（即可转换为布尔值 true 的值）。如果找到了这样一个值，some() 将会立即返回 true并终止遍历。否则，some() 返回 false。
callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。
返回值：boolean

4）例程：

 <div id="app">
    <p v-if="list1.some((el)=>{
    return el>=6
    })">隐藏内容</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list1: [1,2,3,4,5,6,7,8]
      },
      methods: {}
    })
  </script>

 

2、findIndex方法

1）findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

2)参数列表：同1

3）功能：

findIndex方法对数组中的每个数组索引0~length-1（包括）执行一次callback函数，直到找到一个callback函数返回真实值（强制为true）的值。如果找到这样的元素，findIndex会立即返回该元素的索引。如果回调从不返回真值，或者数组的length为0，则findIndex返回-1。 与某些其他数组方法（如Array#some）不同，在稀疏数组中，即使对于数组中不存在的条目的索引也会调用回调函数。即寻找数组中被函数验证通过的第一个元素的索引

返回值：Number

4）例程：

<div id="app">
    <p @click="test(list1)">点击内容</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list1: [{
          id: 1,
          name: "cc"
        }, {
          id: 2,
          name: "cc"
        }, {
          id: 3,
          name: "cc"
        }]
      },
      methods: {
        test: (arr) => {
          console.log(arr.findIndex((el, index) => {
            return el.id === 3
          }))
        }
      }
    })
  </script>

3、filter
1)filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
2)参数列表同1
3）功能：用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
返回true表示保留该元素（通过测试），false则不保留。与findIndex的区别是前者返回所有满足函数验证的所有元素组成的新数组
，后者则只是满足验证的第一个元素。
返回值：Array
4）例程：

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        list1: [{
          id: 1,
          name: "cc1"
        }, {
          id: 2,
          name: "cc2"
        }, {
          id: 3,
          name: "cc1"
        }, {
          id: 4,
          name: "cc1"
        }]
      },
      methods: {
        test: (arr) => {
          console.log(arr.filter((el, index) => {
            return el.name==="cc1"
          }))
        }
      }
    })
  </script>

4、forEach

1)forEach() 方法对数组的每个元素执行一次提供的函数。

2)参数列表同1

3）forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。

返回值 undefined

4）例程

 <div id="app">
    <p @click="test(list1)">点击内容</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list1: [{
          id: 1,
          name: "cc1"
        }, {
          id: 2,
          name: "cc2"
        }, {
          id: 3,
          name: "cc1"
        }, {
          id: 4,
          name: "cc1"
        }]
      },
      methods: {
        test: (arr) => {
          arr.forEach((el, index) => {
            console.log(++el.id)
          })
        }
      }
    })
  </script>