Js 数组方法整理（map、filter、foreach等之间的区别---面试常问）

先列举一下数组的方法，在网上找的截图

通过上面两张图，可以看出数组方法还是很多的，现在列举一些经常用到并且容易混淆的方法：

1.map

• 参数 callbackFn(item,index,arr)

item：当下遍历的数组元素的值；当数组的元素为基本数据类时，item是直接赋值为元素的值；当数组的元素为引用数据类型时，此时item是引用赋值，即该地址值会指向原数组的元素(在map方法里会举例说明）。

index：当下遍历的数组元素的索引；

arr：表示原数组。

• 用法

• 注解

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。（map方法如何能改变原数组呢？）

2.filter

定义：遍历数组并返回一个新的数组，新数组中的元素是通过检查指定数组中满足条件的所有元素。（即过滤数组并返回新数组，不会改变原数组）

传入的函数里必填return，因为会根据return的值为false或true来过滤数据。

示例：

直接return布尔值，为true则元素值放入数组中，为false的就被过滤掉

return非布尔值时，也会通过将数据隐式转化为布尔值来过滤数组

let arr = [

{ id: '01001', title: '测试一下', isHot: true },

{ id: '01002', title: '双12', isHot: false },

]

let result = arr.filter((item) => {

return item.isHot

})

console.log(result) // [{ id: '01001', title: '测试一下', isHot: true }]

和其他方法结合使用（和indexof结合进行去重）

let arr = [1,1,2,4,5,6,5,5,6]

let newArr = arr.filter((item,index)=>{

return arr.indexOf(item) === index
})
console.log(newArr) // [1,2,4,5,6]

3.forEach

• forEach()的返回值为undefined
• forEach方法没有返回值，一般用于直接修改原数组；
• forEach()对于空数组是不会执行回调函数的
• 没有办法中止或者跳出 forEach()循环，除了抛出一个异常

• let arr = [1, 2, , 3]
  arr.forEach((item, index) => {
      console.log(`arr[${index}] = ${item}`)
  })
  
  结果
  a[0] = 1
  a[1] = 2
  a[3] = 3
  // a[2]被跳过了，因为数组在这个位置没有项（为空）

  如何跳出循环？

Js 此种状况的forEach 不能使用continue, break; 可以使用如下两种方式

1. if 语句控制
2. return . (return true, false) ， return --> 类似continue

4.reduce

• reduce() 方法将数组缩减为单个值。
• reduce() 方法为数组的每个值（从左到右）执行提供的函数

arr.reduce(function(prev,cur,index,arr){
...
}, init);简单应用：

求和
var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

求最大值
var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

高阶应用：

    数组去重
const arr = [1, 3, 4, 4, 2, 1, 1, 8]
    let newArr = arr.reduce((prev, cur) => {
      if (!prev.includes(cur)) {
        return prev.concat(cur)
      } else {
        return prev
      }
    }, [])
    console.log(newArr);//[1, 3, 4, 2, 8]
计算数组中每个元素出现的次数
const animal = ['dog', 'cat', 'mouse', 'fish', 'cat'];
    let animalNum = animal.reduce((prev, cur) => {
      if (prev[cur]) {
        prev[cur]++
      } else {
        prev[cur] = 1
      }
      return prev
    }, {})
    console.log(animalNum);//{dog: 1, cat: 2, mouse: 1, fish: 1}
将二维数组转为一维数组
    let arr = [[0, 1], [2, 3], [4, 5]]
    let newArr = arr.reduce((prev, cur) => {
      return prev.concat(cur)
    }, [])
    console.log(newArr);//[0, 1, 2, 3, 4, 5]
将多维数组转为一维数组
    let arr = [[0, 1], [2, 3], [4, [5, 6, 7]]]
    const newArr = function (arr) {
      return arr.reduce((prev, cur) => {
        return prev.concat(Array.isArray(cur) ? newArr(cur) : cur)
      }, [])
    }
    console.log(newArr(arr));//[0, 1, 2, 3, 4, 5, 6, 7]

5.some、every 、find

相同点：

 不会对空数组进行检测。

 some() 不会改变原始数组。

不同点：

(1)some()方法用于检测数组中的元素是否满足return的判断条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false。

(2)every()方法用于检测数组中的元素是否都满足return的判断条件，只要有一个不符合就会返回false，都符合才返回true。

(3)find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。