如何在另一个函数中使用map函数和arrow函数？

Question

I'm trying to obtain the max heart rate given an array of years by implementing a few functions. The arrayCalc function uses a for loop on a empty array called "arrRes" to push a new value. At the same time, the calcAge function calculates the age of a person from the current year. Instead of the for loop I wish to use the .map and the arrow functions inside of the arrayCalc function which has some arguments passed. I do not know where to go about this.

I've tried using resources like MDN web doc to clarify what a .map and arrow functions. As soon as I know its syntax and its implementation, I started to wrap the .map and the arrow function into a constant variable called "arrRes". Basically, I'm trying to reproduce the same result given in the 'old' arrayCalc.

 const years = [1990, 1965, 1937, 2005, 1998]; // The function I'm trying to replicate function arrayCalc(arr, fn) { const arrRes = []; for (let i = 0; i < arr.length; i++) { arrRes.push(fn(arr[i])); } return arrRes; } // My attempt to shorten the arrayCalc function using .map and the arrow /* function arrayCalc(arr, fn){ const arrRes = arr.map(arry => arry); } */ function calcAge(ex) { return new Date().getFullYear() - ex; } function maxHeartRate(ex) { const result_2 = Math.round(206.9 - (0.67 * ex)) return (ex >= 18 && ex <= 81 ? result_2 : -1) } const ages = arrayCalc(years, calcAge); const heartRate = arrayCalc(ages, maxHeartRate); console.log(ages); console.log(heartRate); 

My output should be // [29, 54, 82, 14, 21]. But the console is given me an error "Uncaught TypeError: Cannot read property 'map' of undefined". Obviously, the code I'm trying to implement is commented out to produce the result. Any help is appreciated.

Answer 1

You could take the function as parameter for mapping.

function arrayCalc(arr, fn) {
    return arr.map(fn);
}

 const years = [1990, 1965, 1937, 2005, 1998]; function arrayCalc(arr, fn) { return arr.map(fn); } function calcAge(ex) { return new Date().getFullYear() - ex; } function maxHeartRate(ex) { const result_2 = Math.round(206.9 - (0.67 * ex)) return (ex >= 18 && ex <= 81 ? result_2 : -1) } const ages = arrayCalc(years, calcAge); const heartRate = arrayCalc(ages, maxHeartRate); console.log(ages); console.log(heartRate); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Or take a shorter apporoach using Array#map directly with the callback.

 function calcAge(ex) { return new Date().getFullYear() - ex; } function maxHeartRate(ex) { const result_2 = Math.round(206.9 - (0.67 * ex)) return ex >= 18 && ex <= 81 ? result_2 : -1; } const years = [1990, 1965, 1937, 2005, 1998]; const ages = years.map(calcAge); const heartRate = ages.map(maxHeartRate); console.log(ages); console.log(heartRate); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

You have missing to return a value from your function and also you should return the value from executing fn function and not arr :

function arrayCalc(arr, fn){
  const arrRes = arr.map(a => fn(a)); // and not .map(arr => arr)
  return arrRes; // missing return statement
}

Working example :

 const years = [1990, 1965, 1937, 2005, 1998]; // The function I'm trying to replicate /*function arrayCalc(arr, fn) { const arrRes = []; for (let i = 0; i < arr.length; i++) { arrRes.push(fn(arr[i])); } return arrRes; }*/ // My attempt to shorten the arrayCalc function using .map and the arrow function arrayCalc(arr, fn){ const arrRes = arr.map(a => fn(a)); return arrRes; // OR // return arr.map(fn); } function calcAge(ex) { return new Date().getFullYear() - ex; } function maxHeartRate(ex) { const result_2 = Math.round(206.9 - (0.67 * ex)) return (ex >= 18 && ex <= 81 ? result_2 : -1) } const ages = arrayCalc(years, calcAge); const heartRate = arrayCalc(ages, maxHeartRate); console.log(ages); console.log(heartRate);