函数的定义和调用-编程入门课：Javascript从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：Javascript从入门到实战

JavaScript中函数是一种可重复使用的代码块，用于执行特定的任务或计算。在JavaScript中定义函数可以使用function关键字或者箭头函数语法，调用函数可以使用函数名加括号的形式，可以传递参数，也可以返回结果。

JavaScript函数的定义
使用function关键字定义函数：

```
function functionName(parameter1, parameter2, ...) {
  // 函数体
  return result;
}
```
使用箭头函数语法定义函数：

```
let functionName = (parameter1, parameter2, ...) => {
  // 函数体
  return result;
}
```
示例：

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

let subtract = (a, b) => {
  return a - b;
}

console.log(add(1, 2)); // 输出：3
console.log(subtract(4, 2)); // 输出：2
```
在上面的示例中，定义了一个名为add的函数和一个名为subtract的箭头函数。add函数接受两个参数a和b，计算它们的和并返回结果。subtract箭头函数接受两个参数a和b，计算它们的差并返回结果。

JavaScript函数的调用
JavaScript中调用函数可以使用函数名加括号的形式，并且可以传递参数。如果函数有返回值，可以将返回值赋给一个变量。

示例：

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

let x = multiply(2, 3);
console.log(x); // 输出：6
```
在上面的示例中，定义了一个名为multiply的函数，接受两个参数a和b，计算它们的乘积并返回结果。调用multiply函数时传递了2和3作为参数，并将返回值赋给变量x。

JavaScript函数的参数
JavaScript函数的参数可以通过参数列表传递给函数。在函数内部可以使用参数的值执行特定的任务或计算。JavaScript函数的参数可以是基本类型或对象类型，可以有默认值，也可以使用展开语法传递数组或对象。

示例：

```
function greet(name = "World") {
  console.log("Hello, " + name + "!");
}

let numbers = [1, 2, 3];
let sum = (a, b, c) => {
  return a + b + c;
}

greet(); // 输出：Hello, World!
greet("John"); // 输出：Hello, John!
console.log(sum(...numbers)); // 输出：6
```
在上面的示例中，定义了一个名为greet的函数，接受一个参数name，如果没有传递参数，则默认为"World"。调用greet函数时传递了不同的参数。

另外，使用展开语法...可以将数组或对象拆分成多个参数传递给函数。在上面的示例中，使用展开语法将数组numbers拆分成三个参数传递给sum箭头函数，计算它们的和并返回结果。

JavaScript函数的返回值
JavaScript函数的返回值可以使用return语句返回，并可以返回任何类型的值，包括基本类型和对象类型。

示例：

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

JavaScript中也可以不使用return语句返回值，这时函数返回undefined。

示例：

```
function greet(name) {
  console.log("Hello, " + name + "!");
}

let x = greet("John");
console.log(x); // 输出：undefined
```
在上面的示例中，定义了一个名为greet的函数，接受一个参数name。调用greet函数时传递了"John"作为参数，函数执行完成后没有返回任何值，所以变量x的值为undefined。

JavaScript函数的作用域
JavaScript中的函数有自己的作用域，函数内部定义的变量只能在函数内部访问。而函数外部定义的变量在函数内部也可以访问，这就是JavaScript的词法作用域。

示例：

```
let x = 10;

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

console.log(add(1, 2)); // 输出：8
console.log(x); // 输出：10
```
在上面的示例中，定义了一个名为add的函数和一个名为x的变量。函数内部定义了一个名为x的变量，它的值为5。调用add函数时传递了1和2作为参数，函数内部计算它们的和并加上变量x的值，返回结果为8。最后输出全局变量x的值为10。可以看到，函数内部的变量x只在函数内部有效，不影响全局变量x的值。

JavaScript中也有块级作用域的概念，可以使用let和const关键字定义块级作用域的变量。

示例：

```
function test() {
  let x = 10;
  if (true) {
    let x = 20;
    console.log(x); // 输出：20
  }
  console.log(x); // 输出：10
}

test();
```
在上面的示例中，定义了一个名为test的函数。函数内部定义了一个名为x的变量，它的值为10。在if语句块内部又定义了一个名为x的变量，它的值为20。在if语句块外部再次输出变量x的值为10，说明在if语句块内部定义的变量x只在块级作用域内有效，不影响函数内部定义的变量x的值。

该分类下的相关小册推荐：

web前端开发性能优化实战

KnockoutJS入门指南

JavaScript面试指南

Javascript-ES6与异步编程

Node.js 开发实战

Flutter核心技术与实战

经典设计模式Javascript版

剑指javascript

剑指javascript-ES6

Javascript重点难点实例精讲（一）

JavaScript入门与进阶

零基础学JavaScript