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

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

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

  1. function functionName(parameter1, parameter2, ...) {
  2. // 函数体
  3. return result;
  4. }

使用箭头函数语法定义函数:

  1. let functionName = (parameter1, parameter2, ...) => {
  2. // 函数体
  3. return result;
  4. }

示例:

  1. function add(a, b) {
  2. return a + b;
  3. }
  4. let subtract = (a, b) => {
  5. return a - b;
  6. }
  7. console.log(add(1, 2)); // 输出:3
  8. console.log(subtract(4, 2)); // 输出:2

在上面的示例中,定义了一个名为add的函数和一个名为subtract的箭头函数。add函数接受两个参数a和b,计算它们的和并返回结果。subtract箭头函数接受两个参数a和b,计算它们的差并返回结果。

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

示例:

  1. function multiply(a, b) {
  2. return a * b;
  3. }
  4. let x = multiply(2, 3);
  5. console.log(x); // 输出:6

在上面的示例中,定义了一个名为multiply的函数,接受两个参数a和b,计算它们的乘积并返回结果。调用multiply函数时传递了2和3作为参数,并将返回值赋给变量x。

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

示例:

  1. function greet(name = "World") {
  2. console.log("Hello, " + name + "!");
  3. }
  4. let numbers = [1, 2, 3];
  5. let sum = (a, b, c) => {
  6. return a + b + c;
  7. }
  8. greet(); // 输出:Hello, World!
  9. greet("John"); // 输出:Hello, John!
  10. console.log(sum(...numbers)); // 输出:6

在上面的示例中,定义了一个名为greet的函数,接受一个参数name,如果没有传递参数,则默认为”World”。调用greet函数时传递了不同的参数。

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

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

示例:

  1. function multiply(a, b) {
  2. return a * b;
  3. }
  4. let x = multiply(2, 3);
  5. console.log(x); // 输出:6

在上面的示例中,定义了一个名为multiply的函数,接受两个参数a和b,计算它们的乘积并返回结果。调用multiply函数时传递了2和3作为参数,并将返回值赋给变量x。

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

示例:

  1. function greet(name) {
  2. console.log("Hello, " + name + "!");
  3. }
  4. let x = greet("John");
  5. console.log(x); // 输出:undefined

在上面的示例中,定义了一个名为greet的函数,接受一个参数name。调用greet函数时传递了”John”作为参数,函数执行完成后没有返回任何值,所以变量x的值为undefined。

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

示例:

  1. let x = 10;
  2. function add(a, b) {
  3. let x = 5;
  4. return a + b + x;
  5. }
  6. console.log(add(1, 2)); // 输出:8
  7. console.log(x); // 输出:10

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

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

示例:

  1. function test() {
  2. let x = 10;
  3. if (true) {
  4. let x = 20;
  5. console.log(x); // 输出:20
  6. }
  7. console.log(x); // 输出:10
  8. }
  9. test();

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


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