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>