将函数作为参数传递在这里如何工作？

Question

var years = [1990, 1965, 1937];
     
  function arrayCalc(arr, fn) {
    var arrRes = [];
    for (var i = 0; i < arr.length; i++) {
      arrRes.push(fn(arr[i]));
    }
    return arrRes;
  }

  function calculateAge(el) {
    return 2017 - el;
  }

  var ages = arrayCalc(years, calculateAge);
  console.log(ages);

这段代码是如何工作的，我是新手 javascript 任何人都可以分解它并使它对我来说变得简单。

Answer 1

函数是 JavaScript 中的第一个 class 个对象。因此，与对象一样，其他函数也可以作为参数传递给高阶函数。回调函数只是在稍后回调。在这种情况下，arrayCalc 是一个高阶函数，fn 是一个回调函数。 fn 需要一个参数。高阶函数的第一个参数作为参数传递给回调函数。

Answer 2

arrayCalc 函数有两个参数：

arr - 您要计算的数组
fn - 这是另一个函数，表示您要对 arr 的元素进行的计算。它通常被称为 callback function

callback function 是作为参数发送给另一个函数的函数。在你的情况下，主要功能是 arrayCalc 而 callback function 是 calculateAge

Main 函数通常在另一个参数上调用（使用）回调函数。在您的示例中，这将是数组 years。

因此，您的 main function 会处理您数组的元素并使用该元素作为参数调用 callback funcion，并将结果保存到新数组，然后从您的 'main function'

我会尝试通过改写您的示例使其更清楚：

function arrayCalc(parameterArray, parameterCallbackFunction) {
  // create new array for results of calling callback
  var newArray = [];
  // goes trough the array
  for (var indexOfElement = 0; indexOfElement < parameterArray.length; indexOfElement++) {
   // this is callbackFunction invocation with element of array as argument: parameterCallbackFunction(parameterArray[indexOfElement])
   // and we put the resul to the newArray by push method
   newArray.push(parameterCallbackFunction(parameterArray[indexOfElement]));
  }
  // at the end we return newArray filled with results of calling callbackFunction on array   
  return newArray;
}

// this is array we want to change using callbackFunction
var argumentArray = [1990, 1965, 1937];

// this is our callback function  
function argumentCallbackFunction(elementFromArray) {
  return 2017 - elementFromArray;
}

// this is invocation of our main function
// first parameter is array and second is our callback function
var ages = arrayCalc(argumentArray, argumentCallbackFunction);
console.log(ages);

您可以创建更多回调函数并在 arrayCalc

中使用它们

// this is second callbackFunction
function addTenToYear(elementFromArray) {
  return elementFromArray + 10;
}

// invocation arrayCalc with second callback function
var agesAfterAddition = arrayCalc(originalArray, addTenToYear);
console.log(ages); // [2000, 1975, 1947]


// this is third callbackFunction
function substractTenFromYear(elementFromArray) {
  return elementFromArray - 10;
}

// invocation arrayCalc with third callback function
var agesAfterSubstraction = arrayCalc(originalArray, substractTenFromYear);
console.log(ages); // [1980, 1955, 1927]

您的代码中正在发生这样的事情：

var originalArray = [1990, 1965, 1937]
var newArray = []
newArray.push( callbackFunction(1990) ) // 2017 - 1990 = 27
console.log(newArray) // [27]
newArray.push( callbackFunction(1965) ) // 2017 - 1965 = 52
console.log(newArray) // [27, 52]
newArray.push( callbackFunction(1937) ) // 2017 - 1937 = 80
console.log(newArray) // [27, 52, 80]

将函数作为参数传递在这里如何工作？

How passing a function as argument is working here?

javascript

callback