js高阶函数——Map/ reduce /Fileter/From...

前言

每次看到大佬在处理数据的时候，es6789加各种高阶函数一顿操作，3行代码就解决了自己哼哧哼哧下来写了十几行代码才能完成的功能，就在心里暗自流泪，默默发四有一天我也一定要成为大佬，终于。。。这一天要来临了！

正文

一、高阶函数——Map

1. 首先认识一下map函数是什么？
   MDN官方介绍：map()方法是一个数组的高阶函数，接受一个带有返回值的函数，使得数组的每一个元素都会调用这个指定的方法后形成一个新数组，但不改变原数组。

2. map函数的描述

   let a = [1, 2, 3, 4]
   let b = a.map(function (value, index, array) {
        
    	return value * 2
   },thisArg)
   console.log(b);//[2, 4, 6, 8]
   

   map函数接收两个参数

   • 必选——callback函数 ,函数内部函数 每个处理元素后的结果，最终组成一个新数组。接收三个参数其中：
     • value（必选）：指正在处理的元素
     • index（可选）：指正在处理的元素的索引
     • array（可选）：指被处理的数组
   • 可选——thisArg：指的是函数内部this的指向。根据下面例子可以看出，如果没有传第二个参数时，map的内部this指向window，传了参数后this指向改变为所传的参数。

    let array = [1,2,3,4]
    let b = array.map(function (value, index, array) {
        
         console.log(this,1);//Window 
           return value * 2
      })
      
     let d = array.map(function (value, index, array) {
        
         console.log(this,2);//[1,2,3,4]
           return value * 2
      },array)
   
    let f = array.map(function (value, index, array) {
        
         console.log(this,3); // []
           return value * 2
     },[])
   

   我们接下来再看下一下这个例子

   let a = [1, 2, 3, 4]
   let b = a.map(function (value, index, array) {
        
   	a.push(5)
   	console.log(a);//[1, 2, 3, 4, 5,5,5,5]
    	return value * 2
   })
   console.log(b);//[2, 4, 6, 8]
   

   这次我在map函数中给原数组添加了新元素，但是最终返回结果却没有跟着变化，那我们如果删除原数组中的元素返回结果还会是之前的吗？

   let a = [1, 2, 3, 4]
   let b = a.map(function (value, index, array) {
        
   	a.shift()
   	console.log(a);// [2, 3, 4]---> [3 ,4]
    	return value * 2
   })
   console.log(b);//[2, 6, undefined, undefined]
   

   在函数内部循环删除了原数组的首个元素，返回结果发生了改变，综上理解一下这个过程：

   • 在 map 方法执行的过程中：原数组中新增加的元素将不会被 callback 访问到。
   • 若已经存在的元素被改变或删除了，则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值；而被删除的元素将不会被访问到。
   • 使用 map 方法处理数组时，数组元素的范围是在 callback 方法第一次调用之前就已经确定了。

   下面我们就开始结合es6相来处理数据

3. map函数的应用

   • 格式化数组中的对象

       let kvArray =  [{
        key: 1, value: 10}, 
      		 {
        key: 2, value: 20}, 
             {
        key: 3, value: 30}];
       let newArr = kvArray.map(item => {
        
          let obj = {
        }
          obj[item.key] = item.value
          return obj
      })
     	// newArr2 是 newArr 的简写形式
       let newArr2 = kvArray.map(item=>({
        [item.key]:item.value}))
       console.log(newArr); //[Object { 1: 10 }, Object { 2: 20 }, Object { 3: 30 }]
       console.log(newArr2,'00');//[Object { 1: 10 }, Object { 2: 20 }, Object { 3: 30 }] "00"
   

   2. 取数组对象中的某一个特定参数

    let j = kvArray.map(x=>x.value)
    console.log(j) //[10, 20, 30]
   

   3. 格式化字符串

    let newStr = Array.prototype.map.call('new String', x => x + '*')
    console.log(newStr); //["n*", "e*", "w*", " *", "S*", "t*", "r*", "i*", "n*", "g*"]
   
   //number转字符串
   var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
   arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
   

   4. 遍历dom取值

   	  <select id="mapSelect">
               <option value="ma