forEach()与each()、map()和filter()方法的区别

forEach()与each()区别

forEach()为JavaScript(ES5)的方法，而each()方法是JQuery的方法，forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
forEach()的回调函数有两个参数，index，value，index为当前元素的索引值，value为当前元素。

var arr = ["你好","我好","大家好","才是","真的好"];
arr.forEach(function(value,index) {
    // 输出为array数组的每一个元素
    // 注意 value在前
    console.log(value);
});

arr必须是一个真正的数组，当arr为伪数组则会报错：

let btns = document.getElementsByTagName("button")
console.log("btns",btns);//得到一个伪数组
btns.forEach(item=>console.log(item)) Uncaught TypeError: btns.forEach is not a function

each()方法分两种情况，$().each() 和 $.each()。
$().each()是对页面元素的操作，此时可获取DOM元素直接操作

var resourceInputVal = $("#ResouraceModal form input");
$("#ResouraceModal .btn-default").click(function () {
    // button按钮的点击事件里可以直接修改input输入框的内容
    resourceInputVal.each(function (index, value) {
        // 注意index在前
      value.value = "";
    })
  })

如果要用each方法操作二维数组，可以这样写：

var arr = ["gag","grt","rthr","afds","nttr","fWGW","afgd","cvd","awx"];
$.each(arr,function(index,value) {
    // 此时，each方法可以用于直接操作数组
    // index在前
    console.log(value);
});

map()和filter()

map()返回一个新数组，其结果是在调用数组中的每个元素上，调用提供的函数.
参数描述:
currentValue 必选。循环遍历过程中，每个元素的值
index 可选。当前元素的索引值
arr 可选。就是对当前操作的数组；
thisValue 可选。就是指的this；如果不写该值，则在callback中的this指向的时window，如果写了则this指向你写的值；

  // 使用map方法，对数据进行修改
  let arr1 = [1, 2, 3, 4, 5];
  let newArr1 = arr1.map(function(item) {　　
         return item * 2;
  });
   // [2, 4, 6, 8, 10]
  console.log(newArr1);

filter()其实就是一个筛选函数，并把筛选函数的结果返回到一个新的数组.
注意：filter() 不会对空数组进行检测；

var newArr = array.filter((currentValue, index, array) => { return ... }, thisValue);

参数描述:
currentValue， 必须，当前的元素值；
index， 可选，当前元素值的索引；
array， 可选，原数组；
thisValue， 可选，对象作为该执行回调时使用，传递给函数，用作 “this” 的值；
return 新数组；

var arr = [20,30,50, 96,50]
var newArr = arr.filter(item => item>40) 
console.log(arr)  // [20,30,50, 96,50]
console.log(newArr)  // [50, 96, 50]

// 使用filter方法，对数据进行过滤
let arr2 = [1, 2, 3, 4, 5];
let newArr2 = arr2.filter(function(item) {　　
    if (item % 2 !== 0) {
         return item;
    }
});
// [1, 3, 5];
console.log(newArr2);

高频用途：
1.上例中的过滤不符合项；
2.去掉数组中的 空字符串、0、undefined、null；

var arr = ['1', '2', null, '3.jpg', null, 0]
var newArr = arr.filter(item => item)
// 也可以写成
// var newArr = arr.filter(Boolean);
console.log(newArr) // ["1", "2", "3.jpg"]

3.数组去重；