函数&&高阶函数

概念

函数的概念：可执行代码块，可以用来存储变量、作为参数传递给其他函数

高阶函数的概念:接收一个或多个函数作为参数，返回值也是函数，也就是一个返回函数的函数

对于函数和高阶函数其他的理解

函数就像工具：

函数就像你工具箱里的一把锤子或螺丝刀，用于执行特定的任务。你可以把一些东西放进去（就像函数的参数），然后它会给你一个结果（就像函数的返回值）。
例如，你可以编写一个函数来把两个数字相加，就像使用一把加法器一样。你输入两个数字，函数返回它们的和。

高阶函数就像更强大的工具：

高阶函数就像你的工具箱里的多功能工具，它可以接受不同的附件或其他工具，或者甚至可以制造出新的工具。
例如，你可以创建一个高阶函数，它可以接受一个函数作为参数，并使用它来执行某些任务。这就像你的多功能工具可以接受不同的头部附件来完成不同的工作一样。

高阶函数和闭包的一些简单的区别

高阶函数：就像是一个”函数的朋友”，它能够接受其他函数作为礼物，并且可以送出函数作为礼物。这意味着它可以让你将函数当做工具来操作，就像玩具工具箱一样。高阶函数常常用来处理一堆操作相似的任务，就像一次性处理一组玩具。

闭包：闭包就像是一个”函数记忆者”，它记得一些事情，即使别人都忘记了。这些事情通常是关于数据或变量的，它可以隐藏并保护这些数据，只有它自己能够访问。闭包通常用于创建私密的存储空间，就像一个小保险柜，只有你知道密码。

所以，高阶函数主要关注函数作为操作工具，而闭包主要关注函数的记忆和数据隐私。

函数的一些分类

常规函数

1
2
3

function add(a, b) {  
    return a + b; 
}

匿名函数

1
2
3

const multiply = function (x, y) {
  return x * y;
};

箭头函数

//两个参数
const divide = (x, y) => x / y;
//一个参数
const add = (a) => a+9;
//无参
const x = ()=>{};

高阶函数

function operate(a, b, operation) {
  return operation(a, b);
}

const result = operate(5, 3, (x, y) => x + y);

闭包

function createCounter() {
  let count = 0;

  return function () {
    return ++count;
  };
}

高阶函数的一些实例

1. `map`函数

map函数用于将数组中的每个元素映射到一个新的数组，通常用于转换数据。

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(
    (num) => num * 2
);
// doubled 现在是 [2, 4, 6, 8, 10]

实际开发中，你可以使用map来将数据从一种形式转换为另一种形式，例如将数据库查询结果映射为前端UI组件所需的格式。

2. `filter`函数

filter函数用于从数组中筛选出满足条件的元素，通常用于数据过滤。

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((num) => num % 2 === 0);
// evenNumbers 现在是 [2, 4]

在实际开发中，你可以使用filter来过滤数据，例如从用户列表中筛选出活跃用户或根据条件过滤商品列表。

3. `reduce`函数

reduce函数用于累积数组中的元素，通常用于聚合数据。

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, num) => acc + num, 0);
// sum 现在是 15

在实际开发中，你可以使用reduce来计算数组中的总和、平均值、最大值等聚合操作。

4. `forEach`函数

forEach函数用于遍历数组的每个元素，通常用于执行副作用（例如，打印日志或修改全局状态）。

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num) => {
  console.log(num);
});
// 依次输出 1, 2, 3, 4, 5

在实际开发中，你可以使用forEach来执行需要对每个元素进行操作的任务，例如在UI中更新元素或发送HTTP请求。

5. `find`和`findIndex`函数

find函数用于查找数组中满足条件的第一个元素，而findIndex函数用于查找数组中满足条件的第一个元素的索引。

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

const user = users.find((u) => u.id === 2);
// user 现在是 { id: 2, name: "Bob" }

const index = users.findIndex((u) => u.id === 2);
// index 现在是 1

高阶函数的一些复杂操作

数组操作：高阶函数经常与数组操作方法（如map、filter、reduce）一起使用，以便对数据进行处理和转换。例如，你可以使用 map 来对数组中的每个元素应用一个函数，并使用 filter 来筛选出满足条件的元素，然后使用 reduce 来聚合数据。

const numbers = [1, 2, 3, 4, 5];

const doubledAndFilteredSum = numbers
  .map((num) => num * 2)
  .filter((num) => num % 4 === 0)
  .reduce((acc, num) => acc + num, 0);

事件处理：在前端开发中，高阶函数常常与事件处理函数一起使用。例如，你可以将一个高阶函数作为事件监听器，用来处理多个不同的事件。

function handleClick(event) {
  console.log(`Clicked at (${event.clientX}, ${event.clientY})`);
}

document.addEventListener("click", handleClick);

Promise和异步操作：在处理异步操作时，高阶函数非常有用。你可以创建一个函数，该函数返回一个Promise，然后使用then方法来处理Promise的解决值。

// 定义一个高阶函数，用于获取远程数据并返回一个Promise
function fetchData(url) {
  // 使用fetch API发起GET请求，返回一个Promise
  return fetch(url)
    // 解析响应为JSON，也返回一个Promise
    .then((response) => response.json());
}

// 调用fetchData函数，传递远程API的URL
fetchData("https://api.example.com/data")
  .then((data) => {
    // 当Promise解决时，处理响应的数据
    console.log(data);
  })
  .catch((error) => {
    // 捕获任何可能的错误或拒绝的Promise
    console.error(error);
  });

路由和中间件：在服务器端开发中，高阶函数通常用于路由处理和中间件。你可以编写一个高阶函数，用来处理请求和响应，然后将它们传递给下一个处理程序。

function loggerMiddleware(req, res, next) {
  console.log(`Received request for: ${req.url}`);
  next();
}

app.use(loggerMiddleware);

概念

对于函数和高阶函数其他的理解

高阶函数和闭包的一些简单的区别

函数的一些分类

高阶函数的一些实例

1. map函数

2. filter函数

3. reduce函数

4. forEach函数

5. find和findIndex函数