[JavaScript] 半小时，阿包带你学会手撕高阶函数 #yyds干货盘点#

• 接受一个函数或者多个函数作为参数
  
• 输出一个函数
  

Array.prototype.func = function(callback(currentValue[, index[, array]]){
}[, thisArg])

• callback ：对数组元素进行操作的回调函数
  
  
  
  • currentValue ：正在处理的当前元素
    
  • 当前元素的索引
    
  • 调用高阶函数的数组
    
  
  
• thisArg：可选，执 行callback 函数时绑定的 this
  

arr = [1, 2, 3, 4]
arr.forEach((val, index) => {
  console.log(val, index)
})
// 相当于原来的for循环
for (var i = 0; i<arr.length; i++) {
  console.log(arr[i], i)
}

for (var i = 0; i<arr.length; i++) {
  callback(arr[i], i, arr)
}

callback.call(thisArg, arr[i], i, arr)

Array.prototype.myForEach = function (callbackFn) {
  // 判断this是否合法
  if (this === null || this === undefined) {
    throw new TypeError("Cannot read property 'myForEach' of null");
  }
  // 判断callbackFn是否合法
  if (Object.prototype.toString.call(callbackFn) !== "[object Function]") {
    throw new TypeError(callbackFn + ' is not a function')
  }
  // 取到执行方法的数组对象和传入的this对象
  var _arr = this, thisArg = arguments[1] || window;
  for (var i = 0; i < _arr.length; i++) {
    // 执行回调函数
    callbackFn.call(thisArg, _arr[i], i, _arr);
  }
}

const users = [ 
  { name: 'John', age: 34 }, 
  { name: 'Amy', age: 20 }, 
  { name: 'camperCat', age: 10 }
];
// 需求：取出users所有人的name，并存放在新数组中
// 不使用map
names = []
for (var i = 0; i<users.length; i++){
  names.push(users[i].name)
}
// map是对数组的每一个元素进行操作，因此上述代码可以使用map来进行简化
names = users.map(function (user) {
  return user.name
})
// 如果学过箭头函数，还可以进一步简化
names = user.map(user => user.name)

Array.prototype.myMap = function(callbackFn) {
  var _arr = this, thisArg = arguments[1] || window, res = [];
  for (var i = 0; i<_arr.length; i++) {
    // 存储运算结果
    res.push(callbackFn.call(thisArg, _arr[i], i, _arr));
  }
  return res;
}

// 返回偶数
arr = [1, 2, 3, 4, 5];
arr.filter(val => val % 2 == 0)

Array.prototype.myFilter = function(callbackFn) {
  var _arr = this, thisArg = arguments[1] || window, res = [];
  for (var i = 0; i<_arr.length; i++) {
    // 回调函数执行为true
    if (callbackFn.call(thisArg, _arr[i], i, _arr)) {
      res.push(_arr[i]);
    }
  }
  return res;
}

arr = [1, 3, 5, 7, 8, 9]
// false，8为偶数，不满足
arr.every(ele => ele % 2 == 1) 
arr2 = [2, 4, 6]
// true 都是偶数
arr2.every(ele => ele % 2 == 0)

Array.prototype.myEvery = function(callbackFn) {
  var _arr = this, thisArg = arguments[1] || window;
  // 开始标识值为true
  // 遇到回调返回false，直接返回false
  // 如果循环执行完毕，意味着所有回调返回值为true，最终结果为true
  var flag = true;
  for (var i = 0; i<_arr.length; i++) {
    // 回调函数执行为false，函数中断
    if (!callbackFn.call(thisArg, _arr[i], i, _arr)) {
      return false;
    }
  }
  return flag;
}

Array.prototype.mySome = function(callbackFn) {
  var _arr = this, thisArg = arguments[1] || window;
  // 开始标识值为false
  // 遇到回调返回true，直接返回true
  // 如果循环执行完毕，意味着所有回调返回值为false，最终结果为false
  var flag = false;
  for (var i = 0; i<_arr.length; i++) {
    // 回调函数执行为false，函数中断
    if (callbackFn.call(thisArg, _arr[i], i, _arr)) {
      return true;
    }
  }
  return flag;
}

const users = [ 
  { name: 'John', age: 34 }, 
  { name: 'Amy', age: 20 }, 
  { name: 'camperCat', age: 10 }
];

• 返回name为John的年龄
  在没有find方法时，实现类似效果，需要循环遍历，查找到name=Jonn后，找到年龄。但使用find就可以轻松快捷的实现。

  JohnAge = users.find(user => user.name === 'John').age

• 返回name为Amy的索引
  ES6以前Array提供了查找数组中元素的方法：indexOf，lastIndexOf，但是这两个方法在查找对象时都无能为力。

  // 返回值为-1，说明未查到Amy
  users.indexOf({ name: 'Amy', age: 20 })
  // 返回hi为1，成功查到Amy
  users.findIndex(user => user.name === 'Amy')

  indexOf也可以用来查找数组中是否存在某元素，但其语义化并不好，每次需要与 -1 进行比较，因此 ES6 添加了新的 includes 方法。
  模拟实现
  find/findIndex 都是寻找到第一个满足回调函数的元素返回，上面我们学习的 some 也是类似机制，因此它们的原生代码类似。

  Array.prototype.myFind = function(callbackFn) {
  var _arr = this, thisArg = arguments[1] || window;
  // 遇到回调返回true，直接返回该数组元素
  // 如果循环执行完毕，意味着所有回调返回值为false，最终结果为undefined
  for (var i = 0; i<_arr.length; i++) {
  // 回调函数执行为false，函数中断
  if (callbackFn.call(thisArg, _arr[i], i, _arr)) {
  return _arr[i];
  }
  }
  return undefined;
  }

  reduce
  用法
  reduce 与前面的方法有略微的差别：

  arr.reduce(callback(accumulator, currentValue[, index[, array]]){
  }[, initialValue])

  
  
  • callback：对数组元素进行操作的回调函数
    
  • accumulator：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue
    
  • currentValue：正在处理的当前元素
    
  • 当前元素的索引
    
  • 调用高阶函数的数组
    
  • initialValue：作为第一次调用函数的初始值。如果没有提供初始值，则使用数组中的第一个元素。
    没有初始值的空数组调用 reduce 会报错
    

  
  

• 数组累加和

  arr = [0, 1, 2, 3, 4]
  arr.reduce((accu, current) => accu + current, 0)

• 累加对象数组和
  这里如果只是像上面一样使用reduce，最终的结果会存在问题

  objArr = [{x: 1}, {x:2}, {x:3}]
  objArr.reduce((accu, current) => accu.x + current.x, 0)

  上述代码返回的结果为NaN，为什么那？
  

// 法一：先借助map将数值提取出来
objArr.map(obj => obj.x).((accu, current) => accu + current, 0)
// 法二：赋予初值，每次运行accu + current.x
objArr.reduce((accu, current) => accu + current.x, 0)

• 计算数组中每个元素出现的次数

  var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

### 模拟实现
```js
Array.prototype.myReduce = function(callbackFn) {
  var _arr = this, accumulator = arguments[1];
  var i = 0;
  // 判断是否传入初始值
  if (accumulator === undefined) {
    // 没有初始值的空数组调用reduce会报错
    if (_arr.length === 0) {
      throw new Error('initVal and Array.length>0 need one')
    }
    // 初始值赋值为数组第一个元素
    accumulator = _arr[i];
    i++;
  }
  for (; i<_arr.length; i++) {
    // 计算结果赋值给初始值
    accumulator = callbackFn(accumulator,  _arr[i], i, _arr)
  }
  return accumulator;
}