8个JavaScript中高阶函数的运用分享 |
您所在的位置：网站首页 › result的汉语 › 8个JavaScript中高阶函数的运用分享 |
|
函数作为参数传递
高阶函数可以接受一个或多个函数作为参数，这些函数可以在高阶函数中被调用，实现某种特定的功能 1 2 3 4 5 6 7 8 9 10 function operation(num1, num2, callback) { let result = callback(num1, num2); console.log(result); } function add(num1, num2) { return num1 + num2; } operation(2, 3, add); // 输出 5在上面的例子中，operation 函数接受三个参数，其中第三个参数是一个回调函数 callback，它的作用是对前两个参数进行某种操作，返回操作结果。在调用 operation 函数时，我们将 add 函数作为 callback 参数传入，从而实现了两个数的加法运算 函数作为返回值 高阶函数可以返回一个或多个函数，这些函数可以在其他地方调用，实现某种特定的功能 1 2 3 4 5 6 7 8 function multiplyBy(num) { return function (x) { return x * num; } } let multiplyBy2 = multiplyBy(2); console.log(multiplyBy2(5)); // 输出 10在上面的例子中，multiplyBy 函数返回了一个匿名函数，该函数接受一个参数 x，并将其乘以 num 参数。我们将 multiplyBy(2) 赋值给 multiplyBy2 变量，从而得到一个新的函数，该函数可以将其参数乘以 2。最后，我们调用 multiplyBy2(5) ，得到 10 函数柯里化 柯里化是一个将多个参数的函数转换为一系列单参数函数的过程。这种方式可以更方便地传递参数，提高代码的可读性和可维护性 1 2 3 4 5 6 7 8 function add(num1) { return function (num2) { return num1 + num2; } } let add5 = add(5); console.log(add5(3)); // 输出 8在上面的例子中，add 函数接受一个参数 num1，并返回一个匿名函数，该函数接受一个参数 num2，并将其与 num1 相加。我们将 add(5) 赋值给 add5 变量，从而得到一个新的函数，该函数可以将其参数与 5 相加。最后，我们调用 add5(3) ，得到 8 函数组合 函数组合是将多个函数组合成一个新函数的过程。这种方式可以将多个操作封装在一起，减少代码的冗余和重复 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function add(num) { return num + 1; } function multiplyBy2(num) { return num * 2; } function compose(f, g) { return function (x) { return f(g(x)); } } let addThenMultiply = compose(multiplyBy2, add); console.log(addThenMultiply(2)); // 输出 6在上面的例子中，我们定义了三个函数 add、multiplyBy2 和 compose。add 和 multiplyBy2 分别实现了加 1 和乘以 2 的操作，compose 函数接受两个函数作为参数，并返回一个新的函数，该函数可以将这两个函数组合在一起。我们将 multiplyBy2 和 add 作为参数传给 compose，得到一个新的函数 addThenMultiply，该函数先将其参数加 1，然后再将结果乘以 2。最后，我们调用 addThenMultiply(2) ，得到 6 面向切面编程 面向切面编程是一种将横切关注点与业务逻辑分离的编程方式。这种方式可以提高代码的可维护性和可扩展性 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function logExecutionTime(fn) { return function () { console.time( 'Execution time' ); let result = fn.apply( null , arguments); console.timeEnd( 'Execution time' ); return result; } } function add(num1, num2) { return num1 + num2; } let timedAdd = logExecutionTime(add); console.log(timedAdd(2, 3)); // 输出 Execution time: 0.048ms 5在上面的例子中，我们定义了两个函数 logExecutionTime 和 add。logExecutionTime 函数接受一个函数作为参数，并返回一个新的函数，该函数会在执行原函数时记录其执行时间。我们将 add 函数作为参数传给 logExecutionTime，得到一个新的函数 timedAdd，该函数在执行加法操作时会记录其执行时间。最后，我们调用 timedAdd(2, 3) ，得到 5，并在控制台输出执行时间 函数式编程 函数式编程是一种将计算过程看作是函数之间的组合的编程方式。这种方式可以提高代码的可读性和可维护性，减少副作用和状态变量的使用 1 2 3 4 5 6 7 let numbers = [1, 2, 3, 4, 5]; let sum = numbers.reduce( function (acc, num) { return acc + num; }, 0); console.log(sum); // 输出 15在上面的例子中，我们使用了 JavaScript 内置的 reduce 函数，实现了对数组中所有数字的求和。reduce 函数接受两个参数：一个回调函数和一个初始值。回调函数接受两个参数：累加器和当前元素，返回值会被作为下一次调用回调函数时的累加器参数。在这个例子中，我们使用匿名函数作为回调函数，实现了将累加器和当前元素相加的操作。最后，我们将初始值设为 0，得到了数组中所有数字的和 闭包 闭包是指一个函数可以访问其定义时的作用域中的变量和参数。这种方式可以实现局部变量的封装和保护，提高代码的安全性和稳定性 在上面的例子中，我们使用了闭包来实现函数柯里化和函数作为返回值。具体来说，我们定义了一个函数 add，它接受一个参数 num1，并返回一个匿名函数，该函数接受一个参数 num2，并将其与 num1 相加。这样，我们就可以将 add(5) 赋值给变量 add5，得到一个新的函数，该函数可以将其参数与 5 相加 闭包的使用场景包括： 封装变量：闭包可以将变量封装在函数内部，避免全局变量的污染和冲突。 保护变量：闭包可以将变量保护起来，避免其被外部访问和修改，提高代码的安全性和稳定性。 实现模块化：闭包可以将一组相关的函数和变量封装在一个函数内部，形成一个模块，提高代码的可维护性和可扩展性。 实现柯里化和函数组合：闭包可以将函数柯里化和函数组合的实现变得更加简单和直观。 实现面向对象编程：闭包可以将函数作为对象的方法，实现面向对象编程的方式。总之，闭包是 JavaScript 中非常重要的概念，它可以帮助我们更好地组织代码，提高代码的可读性、可维护性和可扩展性。但是，过度使用闭包也可能会导致代码的复杂性和性能问题，因此需要谨慎使用。 复杂的例子 以下是一个更复杂的例子，它结合了多个高阶函数的概念，包括函数作为参数传递、函数作为返回值、函数柯里化、函数组合和面向切面编程 // 定义一个数组，包含一些数字 let numbers = [1, 2, 3, 4, 5]; // 定义一个函数，用于将数组中的每个元素加上一个指定的值 function add(amount) { return function (num) { return num + amount; } } // 定义一个函数，用于将数组中的每个元素乘以一个指定的值 function multiplyBy(factor) { return function (num) { return num * factor; } } // 定义一个函数，用于将数组中的所有元素相加 function sum(numbers) { return numbers.reduce( function (acc, num) { return acc + num; }, 0); } // 定义一个函数，用于记录函数执行时间 function logExecutionTime(fn) { return function () { console.time( 'Execution time' ); let result = fn.apply( null , arguments); console.timeEnd( 'Execution time' ); return result; } } // 定义一个函数，用于组合多个函数 function compose() { let fns = Array.prototype.slice.call(arguments); // 将参数转换为数组 return function (x) { return fns.reduceRight( function (acc, fn) { return fn(acc); }, x); } } // 将数组中的每个元素加上 1，再将结果乘以 2，最后计算所有元素的和 let result = compose(logExecutionTime(sum), multiplyBy(2), add(1))(numbers); console.log(result); // 输出 Execution time: 0.131ms 30详细解释： 在上面的例子中，我们首先定义了一个包含一些数字的数组 numbers。然后，我们定义了三个函数 add、multiplyBy 和 sum。add 和 multiplyBy 分别返回一个匿名函数，该函数接受一个数字参数，并将其加上或乘以另一个数字。sum 函数使用 JavaScript 内置的 reduce 函数，计算数组中所有数字的和 接下来，我们定义了一个函数 logExecutionTime，用于记录函数执行时间。该函数接受一个函数作为参数，并返回一个新的函数，该函数在执行原函数时记录其执行时间 然后，我们定义了一个函数 compose，用于组合多个函数。该函数接受任意数量的函数作为参数，并返回一个新的函数，该函数可以将这些函数组合在一起，并按照从右到左的顺序依次调用它们。在 compose 函数内部，我们使用了 Array.prototype.slice.call(arguments) 将参数列表转换为数组，并使用 reduceRight 函数依次调用这些函数 最后，我们使用函数柯里化和函数组合，将 logExecutionTime、sum、multiplyBy 和 add 函数组合在一起，实现了将数组中的每个元素加上 1，再将结果乘以 2，最后计算所有元素的和。我们将 numbers 数组作为参数传给该函数，得到了最终的结果，并在控制台输出了执行时间 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |