当前位置：首页 > article >正文

JavaScript 函数 function

article 2024/9/27 17:32:18

JavaScript 函数是一个包含代码的可重用块，用于执行特定的任务或计算值。函数在编程中是基础而重要的概念，允许你封装和组织代码，从而提高代码的可重用性和可维护性。

一. 函数定义

1 函数定义

函数通常使用 function 关键字来定义。一个函数包括函数名、参数列表和函数体。

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

函数名：add 是函数的名字。
参数列表：a 和 b 是函数的参数。
函数体：包含要执行的代码，在这个例子中是 return a + b;。

调用函数
一旦定义了函数，可以通过函数名和实际参数来调用它。

const result = add(3, 4);
console.log(result); // 输出: 7

2 函数表达式

函数表达式将函数定义作为一个表达式赋值给变量。函数表达式可以是具名的或匿名的。

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

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

具名函数表达式：

const multiply = function multiply(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 输出: 20

特点：

只有在函数表达式定义后才能调用。
允许匿名函数，适用于即时调用和回调函数。

3 箭头函数

箭头函数是一种简洁的函数写法，使用 => 语法，适用于简化函数表达式。

const subtract = (a, b) => a - b;

console.log(subtract(7, 4)); // 输出: 3

单个参数时可以省略括号：

const square = x => x * x;

console.log(square(5)); // 输出: 25

特点：

不绑定自己的 this、arguments、super 或 new.target。
适用于函数体只有一行的情况，可以省略大括号和 return 关键字。

二函数的特性

1 参数和返回值

函数可以接受多个参数，也可以有默认值，函数通过 return 语句返回值。

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

console.log(greet()); // 输出: Hello, Guest!

2 默认参数：

函数可以指定默认参数值，如果调用时没有提供参数，则使用默认值。

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
console.log(greet()); // 输出: Hello, Guest!

3 Rest 参数

Rest 参数（…）用于表示函数可以接受不确定数量的参数，这些参数会被收集到一个数组中。

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

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

特点：

允许函数处理任意数量的参数。
在函数定义中必须是最后一个参数。

4 剩余参数与展开运算符

… 运算符还可以用于展开数组或对象。

// 数组展开
const nums = [1, 2, 3];
console.log(...nums); // 输出: 1 2 3

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出: { a: 1, b: 2, c: 3 }

三. 高级函数特性

1 闭包

闭包允许函数访问其定义时的作用域。即使外部函数已返回，闭包仍能访问外部函数的变量。

function createCounter() {
  let count = 0;
  return function() {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

特点：

允许函数拥有私有数据。
常用于实现数据封装和工厂模式。

2 立即调用函数表达式 (IIFE)

IIFE 是一种在定义时立即执行的函数表达式，通常用于创建私有作用域，避免变量污染全局作用域。

(function() {
  console.log('This function runs immediately!');
})();

特点：

用于隔离变量作用域，避免全局变量冲突。
立即执行，适用于一次性初始化代码。

3 函数柯里化

柯里化是将一个多参数函数转化为一系列单参数函数的过程。每次返回一个新函数，直到所有参数都提供为止。

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 输出: 10

特点：

允许部分应用函数。
增强函数的灵活性和可重用性。

4 函数绑定

Function.prototype.bind() 方法创建一个新函数，在调用时将 this 关键字固定为传入的值，并且可以预设参数。

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const greet = person.greet.bind(person);
greet(); // 输出: Hello, my name is Alice