JS数组操作函数forEach，map，filter，find，some，every，reduce的使用

一.JS值传递方式

1.JS中的基本类型按值传递((call by value))，对象类型按共享传递(call by sharing，也叫按对象传递、按对象共享传递)。
2.在共享传递中对函数形参的赋值，不会影响实参的值。

二.JS数组操作函数

1.forEach

对原数组进行操作处理 不返回数组或其他值。

eg.1 基本类型

      var arr = [1, 2, 3, 4]
      var sum = 0
      var newArr = arr.forEach(item => {
        sum += item
        item += 1 // 所有元素自加1
      })

      console.log(newArr) // undefined
      console.log(sum) // 10
      console.log(arr) // [1, 2, 3, 4] 数组不变 未受遍历循环赋值影响

eg.2 对象类型

      var arr = [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]
      var newArr = arr.forEach((item, index) => {
        item.id = index + 1 // 向元素中添加id字段
        if (item.name === 'Tom') { // name为Tom的元素重命名为Cat
          item.name = 'Cat'
        }
        item.age -= 1 // 所有元素的age自减1
      })
      console.log(newArr) // undefined
      console.log(arr) // [{name: 'Cat', age: 16, id: 1}, {name: 'Jerry', age: 18, id: 2}]

 

2.map

不改变原数组，返回操作后的数组，数组长度不变。

eg.1 基本类型

      var arr = [1, 2, 3, 4]
      // 数组中所有元素乘10
      var newArr = arr.map(item => { return item * 10 })

      console.log(newArr) // [10, 20, 30, 40]
      console.log(arr) // [1, 2, 3, 4]

eg.2 对象类型

      var arr = [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

      var newArr = arr.map((item, index) => {
        if (item.name === 'Tom') {
          return { id: index + 1, name: item.name }
        }
      })
        
      // 获取数组中某一字段组成新数组
      var newArr2 = arr.map(item => { return item.name })

      console.log(newArr) // [{id: 1, name: 'Tom'}, undefined]
      console.log(newArr2) // ['Tom','Jerry']
      console.log(arr) // [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

Ps.在实际操作中，普通数组进行map操作不会改变原数组，但如果是对象数组，中间有赋值的过程，就会改变原数组。

      // good: 这样原数组不会影响
      var arr = [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]
      
      var newArr = arr.map((item, index) => {
        return {
          ...item,
          id: index + 1
        }
      })
      
      console.log(newArr) // [{name: 'Tom', age: 17, id: 1}, {name: 'Jerry', age: 19, id: 2}]
      console.log(arr) // [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

  　　 // bad: 这样用会修改原数组
      var arr = [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]
      var newArr2 = arr.map((item, index) => { item.id = index + 1 })
      console.log(newArr2) // [undefined, undefined]
      console.log(arr) // [{name: 'Tom', age: 17, id: 1}, {name: 'Jerry', age: 19, id: 2}]

 

3.filter

获取数组中符合条件的所有元素集合,不改变原数组，返回操作后的数组，数组长度会变化。

eg.1 基本类型

      var arr = [1, 2, 3, 4]

      // 获取数组中所有大于2的元素集合
      var newArr = arr.filter(item => { return item > 2 })

      console.log(newArr) // [3, 4]
      console.log(arr) // [1, 2, 3, 4]

eg.2 对象类型

      var arr = [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

      // 获取数组中所有年龄大于17的元素集合
      var newArr = arr.filter(item => { return item.age > 17 })

      console.log(newArr) // [{name: 'Jerry', age: 19}]
      console.log(arr) // [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

 

4.find

获取数组中符合条件的第一个值 ，不改变原数组

eg.1 基本类型

      var arr = [1, 2, 3, 4]

      // 获取数组Arr中第一个大于2的元素
      var result = arr.find(item => { return item > 2 })

      console.log(result) // 3
      console.log(arr) // [1, 2, 3, 4]

eg.2 对象类型

      var arr = [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

      // 获取数组Arr中第一个年龄大于17的元素
      var result = arr.find(item => { return item.age > 17 })

      console.log(result) // {name: 'Jerry', age: 19}
      console.log(arr) // [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

 

5.some

检查整个数组中是否有满足条件的元素。如果某个元素返回true，则直接返回true；如果都返回false,则返回false。

eg.1 基本类型

      var arr = [1, 2, 3, 4]

      // 判断数组中是否有大于2的元素
      var result = arr.some(item => { return item > 2 })
      // 判断数组中是否有大于4的元素
      var result2 = arr.some(item => { return item > 4 })

      console.log(result) // true
      console.log(result2) // false
      console.log(arr) // [1, 2, 3, 4]

eg.2 对象类型

      var arr = [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

      // 判断数组中是否有年龄大于17的元素
      var result = arr.some(item => { return item.age > 17 })
      // 判断数组中是否有年龄大于19的元素
      var result2 = arr.some(item => { return item.age > 19 })

      console.log(result) // true
      console.log(result2) // false
      console.log(arr) // [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

 

6.every

每个数组元素都执行一次，如果某个元素返回false,则直接返回false；如果全部返回true，则返回true。

eg.1 基本类型

      var arr = [1, 2, 3, 4]

      // 判断数组中是否所有元素都大于2
      var result = arr.every(item => { return item > 2 })
      // 判断数组中是否所有元素都小于5
      var result2 = arr.every(item => { return item < 5 })

      console.log(result) // false
      console.log(result2) // true
      console.log(arr) // [1, 2, 3, 4]

eg.2 对象类型

      var arr = [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

      // 判断数组中是否所有元素年龄都大于17
      var result = arr.every(item => { return item.age > 17 })
      // 判断数组中是否所有元素年龄都小于20
      var result2 = arr.every(item => { return item.age < 20 })

      console.log(result) // false
      console.log(result2) // true
      console.log(arr) // [{ name: 'Tom', age: 17 }, { name: 'Jerry', age: 19 }]

 

7.reduce

为数组中的每一个元素依次执行回调函数。
接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

eg.1 不设置初始值

      var arr = [1, 2, 3, 4]
      var sum = arr.reduce(function(prev, cur, index, arr) {
        console.log('prev:' + prev, 'cur:' + cur, 'index:' + index)
        // 遍历打印三次
        // prev:1 cur:2 index:1
        // prev:3 cur:3 index:2
        // prev:6 cur:4 index:3
        return prev + cur
      })
      console.log(sum)// [1, 2, 3, 4]
      console.log(arr)// 10

eg.2 设置初始值

      var arr = [1, 2, 3, 4]
      var sum = arr.reduce(function(prev, cur, index, arr) {
        console.log('prev:' + prev, 'cur:' + cur, 'index:' + index)
        // 遍历打印四次
        // prev:0 cur:1 index:0
        // prev:1 cur:2 index:1
        // prev:3 cur:3 index:2
        // prev:6 cur:4 index:3
        return prev + cur
      }, 0)// 设置初始值
      console.log(sum)// [1, 2, 3, 4]
      console.log(arr)// 10