JavaScript Function 函数理解与实战

1. 概述

函数是 JavaScript 中的重要概念之一。它是一块代码，用于完成特定的任务。函数通常有一个名称，可以提高代码的重用率，使代码更易于维护。在 JavaScript 中，函数也是第一类对象，也就是说，它们可以作为参数传递，返回值以及保存到变量中。

2. 基本语法

2.1 函数声明

函数通常有以下组成部分：

• 函数名称：用于引用函数
• 参数列表：用于传递值
• 函数体：具体实现逻辑

函数声明语法如下：

function functionName(param1, param2, ..., paramN) {
  // 函数体
  return returnValue;
}

其中 param1, param2, ..., paramN 是函数参数，returnValue 是函数返回值。如果函数没有返回值，可以省略 return 语句。

2.2 函数表达式

函数表达式与函数声明非常相似，其语法如下：

var functionName = function (param1, param2, ..., paramN) {
  // 函数体
  return returnValue;
}

与函数声明不同，函数表达式可以将函数赋值给变量。这使得函数可以方便地作为参数传递，返回值，或被其他函数调用。同时，也可以将函数赋值给一个对象的属性，从而创建对象的方法。

3. 函数参数

JavaScript 函数可以使用零个或多个参数。声明函数时指定每个参数的名称和数量。当调用函数时，传递的参数的数量必须匹配函数声明时指定的数量。如果传递的参数数量不够，参数的值将被设置为 undefined；如果传递的参数数量多于声明时指定的数量，则会被忽略。

3.1 默认参数

ES6 以前，函数不能直接定义默认参数。但我们仍然可以通过函数体内的逻辑判断来实现：

function functionName(param1, param2) {
  param1 = param1 || defaultValue1;
  param2 = param2 || defaultValue2;
  // 函数体
  return returnValue;
}

ES6 引入了默认参数的概念，提供了一种更简洁的方式去声明默认参数。示例如下：

function functionName(param1 = defaultValue1, param2 = defaultValue2) {
  // 函数体
  return returnValue;
}

3.2 剩余参数

有时函数需要处理数量不定的参数，这时候可以使用剩余参数语法。剩余参数允许我们将任意数量的参数表示为一个数组，示例代码如下：

function functionName(param1, param2, ...otherParams) {
  console.log(otherParams); // [ 'value3', 'value4' ]
  // 函数体
  return returnValue;
}

functionName('value1', 'value2', 'value3', 'value4');

4. 函数作用域

在 JavaScript 中，有两种主要类型的作用域：全局作用域和本地作用域。全局作用域是整个脚本环境，而本地作用域是由函数定义的范围。

4.1 全局作用域

如果变量在函数以外定义，那么它就在全局作用域中，可以在脚本的任何地方访问它。例如：

var globalVar = 'value';

function foo() {
  console.log(globalVar); // 'value'
}

foo();

4.2 本地作用域

变量在函数内定义，就是本地变量。本地变量只能在函数内访问，不能在函数外部访问。例如：

function foo() {
  var localVar = 'value';
  console.log(localVar);
}

foo(); // 'value'
console.log(localVar); // ReferenceError: localVar is not defined

5. 闭包

闭包是一个非常强大的特性，可以用来模拟私有变量、创建工厂函数。闭包返回的函数可以访问和持有闭包函数中被引用变量的状态，同时不会受外部环境的影响。

例如：

function outerFunction(name) {
  var greeting = 'Hello';

  function innerFunction() {
    console.log(greeting + ' ' + name);
  }

  return innerFunction;
}

var sayHelloToBob = outerFunction('Bob');
sayHelloToBob(); // 'Hello Bob'

上述示例代码中，outerFunction 返回了一个函数 innerFunction，并持有对闭包变量 greeting 的引用。innerFunction 可以访问在 outerFunction 中定义的变量并输出 "Hello Bob"。

6. 示例

6.1 阶乘函数

以下代码使用递归实现阶乘函数：

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // 120

6.2 数组去重函数

以下代码使用 Set 实现数组去重：

function unique(arr) {
  return Array.from(new Set(arr));
}

console.log(unique([1, 2, 3, 3, 4, 5, 5])); // [ 1, 2, 3, 4, 5 ]

7. 总结

函数是 JavaScript 中重要的概念之一。函数可以让我们编写模块化、可组合和可重用的代码。在使用时，需要注意函数声明、函数表达式、函数参数、作用域、闭包等概念。