编程笔记 html5&css&js 082 JavaScript 函数

编程笔记 html5&css&js 082 JavaScript 函数

• 一、函数
• 二、函数的定义
• • （一）、函数声明：
  • （二）、函数表达式（匿名函数赋值）：
  • （三）、箭头函数表达式（ES6新增特性）：
• 三、函数的调用
• 四、函数的参数
• 五、函数的返回值
• 小结

函数（function）是一种可重复使用的代码块，它封装了一组为了完成特定任务而组织的语句和表达式。

一、函数

在JavaScript以及大多数编程语言中，函数（function）是一种可重复使用的代码块，它封装了一组为了完成特定任务而组织的语句和表达式。函数可以接受输入参数（parameters），处理这些参数，并可能返回一个输出结果（return value）。通过定义函数，开发者可以将复杂操作逻辑抽象出来，提高代码的复用性和可维护性。

JavaScript中的函数定义通常包括以下部分：

函数声明关键字：使用function关键字开始定义。

函数名：紧跟在function关键字之后，用于标识函数的一个名称。函数名遵循变量命名规则，可以包含字母、数字、下划线和美元符号，但不能以数字开头。

参数列表：括号()内列出的是函数需要的参数，多个参数之间用逗号分隔。调用函数时传递的实际值会赋给对应的参数变量。

函数体：由一对大括号{}包裹，其中包含了执行特定任务的一系列JavaScript语句。

二、函数的定义

在JavaScript中，函数是可重用的代码块，可以接受输入（参数）并产生输出（返回值）。以下是JavaScript中定义和调用函数的不同方式：

（一）、函数声明：

// 函数声明方式
function add(a, b) {
  return a + b;
}

在此模式下，函数名称add、参数列表(a, b)和函数体{ return a + b; }一起构成了一个完整的函数。函数可以在其声明后的任何地方被调用。

（二）、函数表达式（匿名函数赋值）：

// 函数表达式
var add = function(a, b) {
  return a + b;
};

这种方式下，函数像变量一样被赋值给一个标识符（这里是add），同样可以接收参数并返回结果。匿名函数表达式可以立即赋值也可以在执行流到达该行代码时才赋值。

（三）、箭头函数表达式（ES6新增特性）：

// 箭头函数表达式
const add = (a, b) => a + b;

箭头函数提供了简洁的语法，并且它对于 this 的绑定有特殊规则（总是捕获其所在上下文的 this 值，而不是创建自己的 this 值）。

三、函数的调用

作为普通函数调用：

// 调用函数声明的函数
console.log(add(10, 2)); // 输出：12
// 调用函数表达式的函数
var multiply = function(a, b) { return a * b; };
console.log(multiply(5, 3)); // 输出：15

作为对象的方法调用：

var calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
   return a - b;
  }
};
console.log(calculator.add(5, 7)); // 输出：12

使用call或apply调用： 这些方法允许你改变函数内部 this 的指向，并传递数组形式或逗号分隔的参数。

function greet(name, greeting) {
  console.log(`${greeting}, ${name}!`);
}
let user = { name: 'Alice' };
greet.call(user, 'Alice', 'Hello'); // 输出："Hello, Alice!"
greet.apply(user, ['Alice', 'Hi']); // 输出："Hi, Alice!"

构造函数调用： 当使用new关键字调用函数时，它会创建一个新的对象实例，并将其this指向新创建的对象。

function Person(name) {
  this.name = name;
}
var person = new Person('Bob');
console.log(person.name); // 输出："Bob"

每种调用方式都会影响函数内部 this 的值，这取决于函数是如何被调用的。例如，在方法调用模式下，this 是调用该方法的对象；在构造函数调用时，this 指向新创建的对象实例；而在普通函数调用时（非严格模式下），this 在全局作用域指向全局对象（浏览器环境中为window，Node.js中为global），在严格模式下或者使用箭头函数时，this 则会绑定到封闭词法作用域。

四、函数的参数

在JavaScript中，函数参数是传递给函数进行处理的值或变量。函数可以通过定义一组形参（formal parameters）来接收这些值，并在函数体内使用它们。下面是一些关于JavaScript函数参数的关键特性：

定义函数参数： 在定义函数时，可以在函数名后面的圆括号内声明参数。多个参数之间用逗号分隔。

function calculateArea(width, height) {
  return width * height;
}

上述函数calculateArea接受两个参数：width和height。

参数数量的灵活性： JavaScript支持可变数量的参数。这意味着你可以在调用函数时传递任意数量的参数，即使它们没有在函数定义时明确指定。这种情况下可以使用arguments对象访问所有传入的参数。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出: 6

剩余参数语法（ES6）： ES6引入了剩余参数（rest parameter）语法，允许将不定数量的参数收集到一个数组中。

function average(...numbers) {
  const sum = numbers.reduce((total, num) => total + num, 0);
  return sum / numbers.length;
}

console.log(average(4, 5, 6, 7)); // 输出: 5.5

默认参数值（ES6）： 可以为函数参数提供默认值，当调用函数时如果没有提供该参数或者提供的值为undefined时，会使用默认值。

function greet(name = 'User') {
  console.log('Hello, ' + name);
}

greet(); // 输出: Hello, User

greet('Alice'); // 输出: Hello, Alice

解构赋值作为参数（ES6）： 可以通过解构赋值的方式直接从函数调用处获取结构化的数据。

function processCoordinates({ x = 0, y = 0 }) {
  console.log(`X coordinate is ${x} and Y coordinate is ${y}`);
}

processCoordinates({ x: 10, y: 20 }); // 输出: X coordinate is 10 and Y coordinate is 20

隐式类型转换： JavaScript是弱类型语言，不强制参数类型检查。因此，可以向函数传递任何类型的参数，JavaScript会根据上下文自动尝试进行类型转换。

综上所述，JavaScript函数的参数具有很大的灵活性，能够适应各种编程需求，并且随着ECMAScript标准的发展，提供了更多高级的方式来处理和管理函数参数。

五、函数的返回值

在JavaScript中，函数的返回值是通过使用return语句从函数内部传递给调用者的值。当函数执行到return语句时，它会停止执行函数体内剩余的代码，并将紧跟在return关键字后面的值（如果有的话）作为结果返回给函数调用者。

1. 返回基本类型值 ：

   当函数完成计算或处理后，可以返回一个数值、字符串、布尔值或其他基本类型的值。

   function add(a, b) {
     return a + b;
   }
   
   let result = add(5, 7);
   console.log(result); // 输出：12

2. 返回复杂类型值 ：

   函数也可以返回对象、数组、函数等复杂类型的值。

   function createPerson(name, age) {
     return { name: name, age: age };
   }
   
   let person = createPerson('Alice', 30);
   console.log(person); // 输出：{ name: 'Alice', age: 30 }

3. 无返回值（隐式返回undefined） ：

   如果函数没有明确的return语句，或者return后面没有任何表达式，则函数默认返回undefined。

   function greet(name) {
     console.log('Hello, ' + name);
   }
   
   let greeting = greet('Alice');
   console.log(greeting); // 输出：undefined (greet函数没有返回任何值)

4. 提前返回 ：

   在函数内部遇到满足条件的return语句时，函数会立即结束执行并返回指定的值。

   function checkAge(age) {
     if (age < 18) {
       return "Not allowed";
     } else {
       // 其他逻辑...
       return "Allowed";
     }
   }
   
   let status = checkAge(15);
   console.log(status); // 输出："Not allowed"

总之，函数的返回值是其执行过程中产生的结果，对于函数功能的实现和数据交互至关重要。通过合理设计函数返回值，可以使得代码逻辑更加清晰且易于理解和维护。

小结

JavaScript函数的重要性体现在以下几个核心方面：

1. 代码重用 ：

   函数允许开发者将常用或复杂的任务封装为独立的可重复调用的代码块。这样，当需要执行相同操作时，无需重复编写相同的代码，只需调用相应的函数即可。

2. 模块化与抽象 ：

   通过函数，可以将大型程序划分为一系列功能明确的小模块，每个模块完成特定的任务。这有助于提高代码的可读性和可维护性，同时降低了复杂度，因为程序员可以专注于单独的逻辑单元。

3. 数据封装 ：

   函数内部可以定义和操作局部变量，保护了这些变量不受外部作用域的影响，实现了信息隐藏和数据安全性，这是面向对象编程中的一个重要原则。

4. 控制结构增强 ：

   函数不仅用于计算和处理数据，还可以作为其他控制结构（如循环、条件语句等）的一部分，增强了程序流程的控制能力。例如，在回调函数中处理异步操作，或者在递归函数中解决复杂的问题。

5. 函数式编程基础 ：

   JavaScript支持函数式编程范式，函数在该范式中被视为一等公民（first-class citizen），可以被赋值给变量、作为参数传递给其他函数，甚至从函数返回。这使得高阶函数、闭包、纯函数等高级特性得以实现。

6. 异步编程支持 ：

   在JavaScript中，回调函数是处理异步事件的主要方式之一，随着Promise、async/await等新特性的引入，函数更是成为了构建现代异步应用的核心手段。

7. 面向对象编程 ：

   虽然JavaScript是一种基于原型的面向对象语言，但函数在这里也扮演着构造器的角色，用于创建对象实例，并且可以通过方法属性来提供对象的行为。

8. 模块系统 ：

   在Node.js和现代浏览器环境中，模块化的JavaScript代码依赖于导出和导入函数，以组织和管理应用程序的不同部分。

综上所述，JavaScript函数不仅是执行代码的基本单位，也是构建复杂应用程序的关键组成部分，对于保持代码整洁、高效、易于理解和扩展至关重要。