JavaScript中filter、map、forEach三者的区别

filter

语法：

• callback用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
  • 1.element ，数组中当前正在处理的元素。
  • 2.index ，正在处理的元素在数组中的索引。
  • 3.array可选 ，调用了 filter 的数组本身。
  • 返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

  var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

• filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。
• 返回的是新数组，要定义值接收

  function isBigEnough(element) {
  return element >= 10;
  }
  var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
  // 返回结果：filtered is [12, 130, 44]

map

• 语法:
• callback生成新数组元素的函数，使用三个参数：
  • 1.currentValue ,callback 数组中正在处理的当前元素。
  • 2.index ,callback 数组中正在处理的当前元素的索引(第几个)。
  • 3.array ,map 方法调用的数组。
  • 4.thisArg可选,执行 callback 函数时值被用作this。

  var new_array = arr.map(function callback(currentValue[, index[, array]]) {
   // Return element for new_array 
  }[, thisArg])
  

• map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

• const array1 = [1, 4, 9, 16];
  // pass a function to map
  const map1 = array1.map(x => x * 2);
  
  console.log(map1);
  // expected output: Array [2, 8, 18, 32]
  //2、使用 map 重新格式化数组中的对象
  var kvArray = [{
          key: 1,
          value: 10
      }, {
          key: 2,
          value: 20
      }, {
          key: 3,
          value: 30
      }];
  
      var reformattedArray = kvArray.map(function(obj) {
          // console.log(obj);  输出key: 1 value: 10
          var rObj = {};
          rObj[obj.key] = obj.value;
          return rObj;
      });
      console.log(reformattedArray); //输出数组  0: {1: 10} 1: {2: 20} 2: {3: 30}
  

forEach

• forEach() 方法对数组的每个元素执行一次给定的函数。
• 语法：
• callback
  • currentValue数组中正在处理的当前元素。数组当前项的值
  • index 可选数组中正在处理的当前元素的索引。数组当前项的索引
  • array 可选forEach() 方法正在操作的数组。数组对象本身
  • thisArg 可选可选参数。当执行回调函数 callback 时，用作 this 的值。

  //1、将 for 循环转换为 forEach
    const items = ['item1', 'item2', 'item3'];
    const copy = [];
    // before
    for (let i=0; i<items.length; i++) {
      copy.push(items[i]);
    }
    // after
    items.forEach(function(item){
      copy.push(item);
    });
    
    //2、可以把类似对象的数组转换成对象
    let newObj = {}
        formdata.forEach(function(value, key) {
                // console.log(value, key);
                newObj[key] = value
        })

注：这些内容是个人的简单终结，并不完善和完全正确！