forEach:

<script>
    //常規寫法
    var arr = [1,2,3,4,5]

    for(var i = 0; i< arr.length; i++){
      console.log(arr[i])
    }
    
    /* 
      forEach用來替代for迴圈的

      forEach中有一個引數為callback

      該函式有三個引數
        value, index, arr

      只要能夠用for迴圈解決的陣列問題， forEach都能解決

    */

    arr.forEach(function (value, index, array) {
      // value表示陣列的值  index表示陣列下標  array表示陣列本身
      console.log(value)
    })

    function forEach (arr, callback) {
      // 函式內容遍歷陣列並呼叫callback
      for(var i = 0;i<arr.length; i++){
        callback && callback(arr[i], i, arr)
        /* if(callback) {
          callback()
        } */
      }
    } 

    forEach(arr, function (value, index, array) {
      console.log(value)
    }) 
 
  </script>
 

map:

為了解決JavaScript 的物件（Object）只能用字串當作鍵的問題，而設定的資料結構；它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。

  <!-- 
    map用來從陣列中生成新的陣列

    map中包含了隱藏的遍歷
    
    map得到的新陣列中，就是map中函式裡的返回值

    當要從一個數組中提取出新陣列時，同時新陣列的數量結構和原陣列相同時

  -->

  <script>
    var arr = [1,2,3,4,5]

    var narr = arr.map(function (value, index, array) {
      // console.log(1)
      // return 1
      console.log(value)
      return value + 1
    })
  
    // console.log(narr)

    var students = [
      {
        name: '張三',
        age: 18,
        sex: '男'
      }, {
        name: '李四',
        age: 18,
        sex: '男'
      }, {
        name: '王五',
        age: 18,
        sex: '男'
      }, {
        name: '趙六',
        age: 18,
        sex: '男'
      }
    ]

    // ['張三', '李四', '王五', '趙六']
    // [['張三', 18]]
    var names = students.map(function (student) {
      // student 就是對應的每個學生物件
      return student.name
    })

    var stus = students.map(function (student) {
      return [student.name, student.age]
    })

    console.log(names)     // ['張三', '李四', '王五', '趙六']
    
    var movies = ['電影1', '電影2', '電影3']

    var html = movies.map(function (movie) {
      return '<li>' + movie + '</li>'
    }).join('')

    function map (arr, callback) {
      // 先建立一個新陣列
      var narr = []
      for (var i = 0; i< arr.length; i++) {
        narr.push(callback(arr[i], index, arr))
      }
      return narr
    }
  </script>
 

以上兩種方法不會改變原陣列，算是對元素的的遍歷，其中，map生成的新陣列中的值就是陣列中符合return語句的結果組成的結果集。

filter（篩選）:

    /* 
      filter可以將陣列中符合條件的篩選，併產生一個新的陣列

      filter的回撥函式中只能返回true 或者 false

      只要回撥中返回的是true，那麼對應的那次遍歷的value就會被新增到新陣列中
    */
  
    var arr = [1,2,3,4,5]

    var narr = arr.filter(function (value, index, array) {
      return !(value % 2)    //回撥函式
    })
    console.log(narr)

    var students = [
      {
        name: '張三',
        age: 45,
        sex: '男'
      }, {
        name: '李四',
        age: 18,
        sex: '女'
      }, {
        name: '王五',
        age: 15,
        sex: '女'
      }, {
        name: '趙六',
        age: 25,
        sex: '男'
      }
    ]

    var boy = students.filter(function (student) {
      return student.sex === "男"
    })

    var a = students.filter(function (student) {
      return student.age >= 18
    })

    function filter (arr, callback) {
      var narr = []
      for(var i = 0;i<arr.length;i++){
        if(callback(arr[i], i, arr)){
          narr.push(arr[i])
        }

      }
      return narr

    }

  </script>
 

some/every:

<script>
    /* 
      some判斷陣列中是否有值符合條件
        遍歷函式有一個返回值為true，則結果為true

      every判斷陣列中是否所有值都符合條件
        遍歷函式有一個返回值為false， 則結果為false
    
     */
    var arr = [1,2,3,4,5]
    console.log(arr.some(function (value, index, array) {
      return value >= 5
    }))
  
    console.log(arr.every(function (value, index, array) {
      return value >= 1
    }))

    var narr = [
      {
        a: true
      }, {
        b: 1
      }, {
        b: 1
      }, {
        b: 1
      }
    ]

    var status = narr.some(function (value) {
      return value.a
    })

  </script>

reduce/reduceright:

 <script>
    /* 
      可以使用reduce求和

      reduceRight
        從右往左計算

      var movies = ['電影1', '電影2', '電影3']

      reduce實現的並非真的是求和計算而是，上次結果和本次遍歷內容的一個計算或拼接
    
    */

    var arr = [3,2,3,4,5]
    var sum = arr.reduce(function (total, value, index, array) {
      // total 第一次遍歷是表示reduce的第二個引數，第二次遍歷表示上次遍歷的返回值
      return total + value
    }, 0)

    console.log(sum)
  
    var movies = ['電影1', '電影2', '電影3']
    var html = movies.reduceRight(function (str, value, index) {
      return str + "<li>" + value + "</li>"
    }, "")
  </script>

   fill:

<script>
    /* 
      fill用於將陣列中特定位置的元素替換成同一個

      會改變原陣列
     */

    var arr = [1,2,3,4,5]
    
    console.log(arr.fill(6, 2, 4))
    console.log(arr)
  
  </script>