js中map，forEach， filter，reduce方法

首页，js中的map是一个数组的遍历方法，如果想要遍历对象那么要把对象转化成数组对象。

其次map方法其实可以称之为映射，因为常用到map方法的情况一般都是需要返回一个新的数组。

var arr = [1,2,3,4];
//item,index,arr 分别为：当前元素的值（必填），当前元素的索引值，当前元素属于的数组对象
var newArr = arr.map((item,index,arr) => {
 console.log(item);//当前元素值
 console.log(index);//当前索引值
 console.log(arr);//对象 [1, 2, 3, 4]
 return item + 10
})

console.log(newArr) //[11, 12, 13, 14]

forEach是 js 中一个常用到的一个方法，用于遍历数组或者 类 数组对象。使用场景一般是为了遍历然进行一些操作，例如打印或者更改原数组，很灵活。

//遍历对象
let arr = [1, 2, 3, 4]

arr.forEach(function( item, index ){ // item是每一个元素 index是每一个元素的数组下标
    console.log(item, index)
})


//遍历对象
let obj = { a:1, b:2, c:3 }

obj.forEach(function(key){ // key是对象的每一次遍历的键，根据键就能取到对应值
    console.log(`value=${ obj[key] }  key=${key}`)
}

js中的filter方法一般用来，从一个数组里面筛选出来符合return 后面条件的数组。

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

let newArr = arr.filter(function(item, index){ //item 每一个元祖 index 元素的下标
    return item > 2
})

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

//筛选出来非空和非空字符串的值
let arr1 = [1, '',' ', null, undefined, 2, 3]


let newArr1 = arr1.filter(function(item, index){ //item 每一个元祖 index 元素的下标
    if(typeof item == 'string'){
        return item && item.trim()
    }else{
        return item
    }
   
})

console.log(newArr1) //[1, 2, 3]

js中reduce是个for循环可以做到的事情reduce()都可以做到，甚至操作起来更加简单方便和高雅。reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。

语法：

arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）
    1、total （上一次调用回调返回的值，或者是初始值initialValue）
    2、currentValue （数组中当前被处理的元素）
    3、index （可选，当前元素在数组中的索引）
    4、array （可选，当前元素所属的数组对象）

initialValue （可选，初始值，作为第一次调用 callback 的第一个参数。）

 1.累加累乘

let arr = [1,2,3,4,5];
 
//普通求数组累加的方式
function handleSum1(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}
 
//采用reduce()方式数组累加
function handleSum2(arr) {
  function sum(x, y) {
    return x + y
  }
  return arr.reduce(sum, 0);
}
 
//修改为箭头函数 + reduce()方式数组累加
function handleSum3(arr) {
    return arr.reduce((x,y) => x + y, 0)
}
 
//箭头函数 + reduce()方式数组累乘
function handleMultip(arr) {
    return arr.reduce((x, y) => x * y, 1);
}

 2.获取一个数组的最大值和最小值

let arr = [111, 2.22, 33.3, 444];
 
//普通写法求最大值
function max(arr){
  let max = arr[0];
  for (let i of arr) {
    if(i > max) {
      max = i;
    }
  }
  return max;
}
 
//修改后
arr.reduce((x, y) => Math.max(x, y));
arr.reduce((x, y) => Math.min(x, y));

 3. 简单数组去重

const arr = [1,2,3,4,4,1]
 
const newArr = arr.reduce((total,item)=>{
	return !total.includes(item) ? total.concat(item) : total;
},[])
console.log(newArr);

4.数组对象去重

const arr = [
	{type:'苹果',id:1},
	{type:'香蕉',id:1},
	{type:'苹果',id:2},
	{type:'菠萝',id:3},
	{type:'桃子',id:4}
]
const obj = {}
const newArr = arr.reduce((total,item)=>{
	!obj[item.id] ? obj[item.id] = true && total.push(item) : '';
	return total;
},[])
console.log(newArr);

5.多维数组转化为一维

let arr = [111, 2.22, [1, 2, [4, 5, [0]]]];
 
//多维数组转化为一维
function newArr(arr = []) {
    return arr.reduce((t, v) => t.concat(Array.isArray(v) ? newArr(v) : v), [])
}
console.log(newArr(arr));

 6.统计数组中每个元素出现的次数 

let obj = {};
let arr = [111, 2.22, 111, 2, obj, obj, '3', 'lemon'];
 
//方法一：统计数组中的次数
function handleCount(arr) {
    return arr.reduce(function(result, i){
        //result.get()查询对应键的值
        if (result.get(i) != undefined) {
            // result.set()创建键值对，如果该元素已经出现过，则将其出现频率增加1。
            result.set(i, result.get(i) + 1)
        } else {
            // 否则，则将其出现频率设置为1
            result.set(i, 1); 
        }
        return result;
    }, new Map());
}
 
//方法二：(if) in 用来判断一个属性是否属于一个对象。
let countNum = arr.reduce((total, item) => {
	 item in total ? total[item]++ : total[item] = 1;
     return total;
 }, {});
 
console.log(handleCount(arr),countNum)	

注意：这里使用map对象而不是对象{}来存储统计后的频率，因为数组中的元素可能是对象类型，而对象的key只能是字符串或符号类型。