开篇

欢迎来到JavaScript函数式编程的奇妙世界！在这里，您将探索代码的无限可能性，解放您的创造力，提升开发效率！准备好迎接这场编程之旅了吗？让我们一起开启这段奇妙的旅程吧！

u=2641956681,2585054442&fm=253&fmt=auto&app=120&f=JPEG.webp

函数作为一等公民

在JavaScript中，函数可以像其他数据类型一样被赋值给变量，作为参数传递给其他函数，或者作为函数的返回值。这使得函数可以更灵活地使用和组合。

将函数赋值给变量或存储在数据结构中

const greet = function() {
  console.log("Hello!");
};

const sayBye = function() {
  console.log("Goodbye!");
};



const myFunctions = [greet, sayBye];
myFunctions[0](); // 输出: Hello!

函数可以存储状态和行为

const createCounter = function() {
  let count = 0;


  const increment = function() {
    count++;
    console.log(count);
  };



  const decrement = function() {
    count--;
    console.log(count);
  };



  return {
    increment,
    decrement
  };
};

const counter = createCounter();
counter.increment(); // 输出: 1
counter.decrement(); // 输出: 0

纯函数

纯函数是指在相同的输入下，总是返回相同的输出，并且没有副作用的函数。纯函数不依赖于外部状态，使得代码更加可靠、可测试和可维护。

// 示例：纯函数
function add(a, b) {
  return a + b;
}



console.log(add(2, 3)); // 输出 5



// 示例：非纯函数
let c = 0;
function increment() {
  c++;
  return c;
}

console.log(increment()); // 输出 1
console.log(increment()); // 输出 2

在上面的示例中，add函数是一个纯函数，它只依赖于输入参数并返回它们的和。相反，increment函数有副作用，它修改了外部变量c的值，并且每次调用时都返回递增后的值。

不可变性

函数式编程鼓励使用不可变的数据结构和操作，即不修改原始数据，而是创建新的数据。这样可以避免意外的数据修改和共享状态带来的问题。

// 示例：不可变数组操作
const numbers = [1, 2, 3];


// 添加元素
const newNumbers = [...numbers, 4];
console.log(newNumbers); // 输出 [1, 2, 3, 4]



// 删除元素
const filteredNumbers = numbers.filter(num => num !== 2);
console.log(filteredNumbers); // 输出 [1, 3]

// 更新元素
const updatedNumbers = numbers.map(num => (num === 2 ? 20 : num));
console.log(updatedNumbers); // 输出 [1, 20, 3]

在上述示例中，我们使用扩展运算符 ... 创建了一个新的数组（添加元素），使用filter函数删除数组中的元素，使用map函数更新数组中的元素，而不是直接修改原始数组。

高阶函数

高阶函数是指接受一个或多个函数作为参数，或者返回一个函数的函数。高阶函数可以用于创建抽象和复用代码逻辑。

// 示例：高阶函数接受函数作为参数
function map(array, transform) {
  const result = [];
  for (let i = 0; i < array.length; i++) {
    result.push(transform(array[i]));
  }

  return result;
}



function double(x) {
  return x * 2;
}



const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = map(numbers, double);
console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]

在上述示例中，map函数是一个高阶函数，它接受一个数组和一个转换函数作为参数，并返回一个新的数组，其中每个元素都通过转换函数进行转换。

函数作为参数

高阶函数可以接受一个或多个函数作为参数。这使得我们可以在函数内部使用传递的函数来进行特定的操作。

// 示例：高阶函数接受一个函数作为参数
function withLogging(fn) {
  return function() {
    console.log('Calling function:', fn.name);
    return fn.apply(this, arguments);
  }

}



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

const loggedAdd = withLogging(add);
console.log(loggedAdd(2, 3)); // 输出 "Calling function: add" 和 5

在上面的示例中，withLogging 是一个高阶函数，它接受一个函数作为参数并返回一个新的函数。新函数在调用传入的函数之前打印一条日志。

函数作为返回值

高阶函数还可以返回一个新的函数，而不仅仅是数据或其他类型的值。

// 示例：高阶函数返回一个函数
function multiplyBy(factor) {
  return function(number) {
    return number * factor;
  }
}



const multiplyByTwo = multiplyBy(2);
console.log(multiplyByTwo(4)); // 输出 8

在上面的示例中，multipyBy 是一个高阶函数，它接受一个因子，并返回一个函数，该函数将其参数与因子相乘。

函数组合

函数组合是将多个函数按照一定的顺序组合起来，形成一个新的函数。函数组合可以提高代码的可读性和可维护性。

// 示例：函数组合
function addOne(x) {
  return x + 1;
}



function multiplyByTwo(x) {
  return x * 2;
}



// 组合函数
const addOneAndMultiplyByTwo = compose(multiplyByTwo, addOne);
console.log(addOneAndMultiplyByTwo(3)); // 输出 8



// compose函数的实现
function compose(...functions) {
  return function (x) {
    return functions.reduceRight((acc, fn) => fn(acc), x);
  };
}

在上面的示例中，我们定义了addOne和multiplyByTwo两个函数，并使用compose函数将它们组合成一个新的函数addOneAndMultiplyByTwo。当我们调用addOneAndMultiplyByTwo时，它会先应用addOne，再应用multiplyByTwo，最终返回结果。

如有写的不好的地方，请多多指教！！！