趣学前端 | 平平无奇的JavaScript函数

叶一一

发布于 2025-01-18 14:01:05

3900

代码可运行

文章被收录于专栏：趣学前端趣学前端

运行总次数：0

代码可运行

背景

最近睡前习惯翻会书，重温了《JavaScript权威指南》。这本书，文字小，内容多。两年了，我才翻到第十章。因为书太厚，平时都充当电脑支架。

JavaScript函数

读这章之前，我感觉我三十年开发功力，应该对它很熟悉了，哪行代码差不多都有它，它跟谁都熟悉。平平无奇万能「调和剂」，JavaScript的基层「员工」。

函数是一个JavaScript代码块，定义之后，可以被执行或调用任意多次。

读完整章，发现了一些有趣的知识点，写个笔记帮助日后翻阅查找。

递归函数与调用栈

总结一下最大调用栈溢出的问题

函数A、函数B、函数C依次调用，3个函数的执行上下文会被JavaScript解释器记录，可以把这些函数依次执行概括为一个调用栈。当一个函数调用另一个函数时，就会有一个执行上下文被推到调用栈。递归就更逆天了，如果函数递归调用自己100次，调用栈就会被推入100个对象，之后会被弹出。当时一次调用数量上万，就有可能导致“最大调用栈溢出”的问题。

来个递归试试效果，以求和方法为例

function sum(n) {
  if (n === 1) return 1;
  return sum(n - 1) + n;
}
let num = sum(10000);
console.log(num); // => Maximum call stack size exceeded

当我求1-10000之和时，提示我“最大调用栈溢出”。

这个知识点给我提了个醒，使用递归的时候要谨慎。

把函数实参解构为形参

这种方式可以提升代码的可读性。如果直接传入实参，不读函数中的代码或者加注释，不好理解这些参数怎么用。

function userInfo(u, o, g) {
  let price = o[1] + o[2];
  if (price === 0) {
    return `${u.userName}没有购买任何商品`;
  } else {
    return `${u.userName}购买了${g}，一共花了${price}元。`;
  }
}
let res = userInfo({ userName: '张三' }, [99, 100], '帽子、鞋子');
console.log(res); // => 张三购买了帽子、鞋子，一共199元。

但是换成形参，代码就好理解多了，参数的用户名、商品价格、商品名称，一目了然。

function userInfo({ userName }, [price1, price2], goodName) {
  let price = price1 + price2;
  if (price === 0) {
    return `${userName}没有购买任何商品`;
  } else {
    return `${userName}购买了${goodName}，一共${price}元。`;
  }
}
let res = userInfo({ userName: '张三' }, [99, 100], '帽子、鞋子');
console.log(res); // => 张三购买了帽子、鞋子，一共199元。

高阶函数

文章中对高阶函数的定义，简单直白。

高阶函数就是操作函数的函数，它接收一个或多个函数作为参数并返回一个新函数。

虽然定义看着简单又直接，不过使用起来有点绕，但是效果惊人。

function compose(f, g) {
  return function (...args) {
    return f.call(this, g.apply(this, args));
  };
}
let sum = (x, y) => x + y;
let square = x => x * x;
// 数字2和5 和的平方
let res = compose(square, sum)(2, 5);
console.log(res); // => 49

let diff = (x, y) => y - x;
// 数字2和5 差的平方
let res2 = compose(square, diff)(2, 5);
console.log(res2); // => 9