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

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

arrayCalc函数采用两个参数：

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

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

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

因此，您的main function会占用数组的元素，并使用该元素调用callback funcion作为参数并将结果保存到新数组中，然后从您的"main 函数"返回

---

我将尝试通过改写您的示例来使其更清晰：

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(agesAfterAddition); // [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(agesAfterSubstraction); // [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]

Answer 2

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