1.JavaScript函数简介

139 阅读5分钟

在JavaScript中,函数是执行特定任务的代码块。它可以接受零个或多个输入参数、返回一个值或执行一些操作。函数可以在脚本中多次定义和调用(called)。它们有助于组织和重用代码。

这是一个简单的JavaScript函数示例,它接受两个输入参数并返回它们的总和:

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

要调用此函数,您将使用以下语法:

let result = add(1, 2); // 结果将是3

也可以使用函数表达式语法定义函数,这在定义匿名函数时经常使用:

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

在这种情况下,函数被分配给add变量,并且可以使用与以前相同的语法调用:

let result = add(1, 2); // 结果将是3

变量与函数声明提升

在JavaScript中,提升是指在代码中如何处理声明。当一个变量或函数被声明时,它会自动移动(或“提升”)到其作用域的顶部。然而,只有声明被提升,而不是变量的赋值或初始化。

例如,考虑以下代码:

console.log(num); // Output: undefined
var num;
num = 10;

即使变量num​在代码的底部被声明和初始化,但由于提升,它仍然可以在顶部访问。当代码执行时,​num​的声明会自动移动到顶部,因此输出是​undefined​的,而不是引用错误。

函数声明也在JavaScript中提升。这意味着您可以在代码中定义函数之前调用它。例如:

add(2, 3); // Output: 5

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

在这种情况下,add​的函数声明被提升到代码的顶部,因此在定义之前就可以使用。

需要注意的是,函数表达式​ 不会类似地提升。如果您尝试在定义之前调用使用函数表达式定义的函数,您将获得引用错误。例如:

add(2, 3); // Uncaught ReferenceError: add is not defined

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

在这种情况下,函数表达式被分配给add​变量,但变量并没有像函数声明一样被提升到顶部。因此,在定义​add​函数之前,您不能调用它。

函数参数-Function Parameters

在JavaScript中,函数参数是在调用函数时传递给函数的值。这些值在函数内部用于执行某些操作或计算结果。

函数参数在函数定义中指定为以逗号分隔的名称列表。例如

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

在此示例中,greet​函数有一个名为name​的参数。调用函数时,在函数内部使用​name​参数的值来问候用户。

这是一个使用参数调用greet函数的示例:

greet('John'); // Output: "Hello, John"

一个函数可以有任意数量的参数,也可以根本没有。例如:

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

let result = add(1, 2); // 结果将是3

在这种情况下,add​函数有两个参数,a​和b​,它们用于计算它们值的总和。

当调用的参数少于参数数量时,缺少的参数将被分配​undefined​的值。例如:

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

greet('John'); // Output: "undefined, John"

如果在调用函数时未提供函数参数,也可以为函数参数指定默认值。例如:

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

greet('John'); // Output: "Hello, John"

在这种情况下,hello​参数的默认值为“Hello”​,因此如果在调用函数时未提供,则将使用该默认值。

函数参数-Function Arguments

在JavaScript中,Arguments​对象是一个类似数组​的对象,其中包含传递给函数的参数的值。它在每个函数的主体中都可用,并提供了一种从函数内部访问传递给函数的参数的方法。

Arguments​对象具有以下属性:

  • arguments.length​:传递给函数的参数数量。
  • arguments[i]​:传递给函数的第i个参数的值,其中i​是参数的索引。

这是一个使用​Arguments​对象访问传递给函数的参数的示例:

这是一个使用​Arguments​对象访问传递给函数的参数的示例:

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

let result = sum(1, 2, 3, 4, 5); // result will be 15

在此示例中,sum​函数接受任意数量的参数并计算它们的总和。arguments​对象用于遍历参数并将它们相加。

值得注意的是,arguments​对象不是一个数组,但在许多方面表现得像一个数组。它没有真数组的所有方法,例如map​或foreach​。但是,它可以使用Array.from​函数或扩展运算符(​)转换为真数组。

例如:

let args = Array.from(arguments);
let args = [...arguments];

这将从​arguments​对象创建一个真正的数组,然后可以与所有数组方法一起使用。

嵌套函数

在JavaScript中,一个函数可以在另一个函数中定义,创建一个嵌套函数。嵌套函数可以访问外部函数的变量和参数,并且可以用作闭包。

这是JavaScript中嵌套函数的示例:

function outer(x) {
  function inner(y) {
    return x + y;
  }
  return inner;
}

let add5 = outer(5);
console.log(add5(3)); // Output: 8

在这个例子中,outer​函数定义了一个叫做inner​的嵌套函数,它接受一个参数y​并返回x​和y​的总和。outer​函数然后返回inner​函数。

add5​变量被分配了用参数5​调用outer​的结果。这意味着add5​引用inner​函数,x​设置为5​。当使用参数3​调用add5​时,它返回5​和3​的总和,即8​。

嵌套函数对于组织代码和创建可重用函数很有用。它们还可用于创建无法从外部函数访问的私有变量和方法。

需要注意的是,外部函数的变量和参数被内部函数封闭,这意味着即使在外部函数返回后,它们也保持在作用域内。这允许内部函数即使在外部函数完成执行后也可以访问和使用它们。