ES5 增加的数组常用方法

数组方法之 forEach

数组方法之 forEach

• forEach 用于遍历数组，和 for 循环遍历数组一个道理

• 语法： 数组.forEach(function (item, index, arr) {})

  var arr = ['a', 'b', 'c']
  // forEach 就是将数组循环遍历，数组中有多少项，那么这个函数就执行多少回
  arr.forEach(function (item, index, arr) {
    // 在这个函数内部
    // item 就是数组中的每一项
    // index 就是每一项对应的索引
    // arr 就是原始数组
    console.log(item) 
    console.log(index) 
    console.log(arr) 
  })
  

  • 上面的代码就等价于

  var arr = ['a', 'b', 'c']
  for (var i = 0; i < arr.length; i++) {
    fn(arr[i], i, arr)
  }
  function fn(item, index, arr) {
    console.log(item)
    console.log(index)
    console.log(arr)
  }
  

数组方法之 map

• map 用于遍历数组，和 forEach 基本一致，只不过是有一个返回值

• 语法： 数组.map(function (item, index, arr) {})

• 返回值： 一个新的数组

  var arr = ['a', 'b', 'c']
  // forEach 就是将数组循环遍历，数组中有多少项，那么这个函数就执行多少回
  var newArr = arr.map(function (item, index, arr) {
    // 函数里面的三个参数和 forEach 一样
    // 我们可以在这里操作数组中的每一项，
    // return 操作后的每一项
    return item + '11'
  })
  console.log(newArr) // ["a11", "b11", "c11"]
  

  • 返回值就是我们每次对数组的操作
  • 等价于

  var arr = ['a', 'b', 'c']
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    newArr.push(fn(arr[i], i, arr))
  }
  function fn(item, index, arr) {
    return item + '11'
  }
  console.log(newArr)
  

数组方法之 filter

• filter ： 是将数组遍历一遍，按照我们的要求把数数组中符合的内容过滤出来

• 语法： 数组.filter(function (item, index, arr) {})

• 返回值： 根据我们的条件过滤出来的新数组

  var arr = [1, 2, 3, 4, 5]
  var newArr = arr.filter(function (item, index, arr) {
    // 函数内部的三个参数和 forEach 一样
    // 我们把我们的条件 return 出去
    return item > 2
  })
  console.log(newArr) // [3, 4, 5]
  

  • 新数组里面全都是大于 2 的数字
  • 等价于

  var arr = [1, 2, 3, 4, 5]
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (fn(arr[i], i, arr)) {
      newArr.push(arr[i])
    }
  }
  function fn(item, index, arr) {
    return item > 2
  }
  console.log(newArr)