js函数的声明调用函数体参数以及返回值(详解)

最新推荐文章于 2022-04-06 21:24:47 发布

Jikel

最新推荐文章于 2022-04-06 21:24:47 发布

阅读量1.8k

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_54902466/article/details/116613724

版权

JavaScript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

提示：本章技术分享为函数的声明和调用

文章目录

前言
一、函数是什么
二、函数的声明和调用

前言

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

一、函数是什么

函数是功能,他是执行特定的代码块,他的作用就是可以将代码封装起来,进行复用.

二、函数的声明和调用

1.声明（定义）

声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分
在这里插入图片描述

2.调用

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和调用</title>
</head>
<body>

  <script>
    // 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
    function sayHi() {
      console.log('嗨~');
    }
    
    // 函数调用，这些函数体内的代码逻辑会被执行
    函数名()
      
      
    sayHi()
    // 可以重复被调用，多少次都可以
    sayHi();
  </script>
</body>
</html>

注：函数名的命名规则与变量是一致的，并且尽量保证函数名的语义。

小道消息 : 函数的命名外国的程序员喜欢用大驼峰,而中国的程序员更加倾向于小驼峰.

3. 函数体

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数体</title>
</head>
<body>

  <script>
    // 交换两个变量的值
    function fn() {
      let x = 5, y = 10, z;
      z = x;
      x = y;
      y = z;

      console.log(x, y);
    }

    // 调用函数
    fn();
    
    // 打招呼
    function sayHi() {
      console.log('嗨~');  
    }
    sayHi()
  </script>
</body>
</html>

3. 参数

通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量。

声明（定义）一个功能为打招呼的函数

Ø传入数据列表

Ø声明这个函数需要传入几个数据

Ø多个数据用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数参数</title>
</head>
<body>

  <script>
    // 声明（定义）一个功能为打招呼的函数
    // function sayHi() {
    //   console.log('嗨~');
    // }
    // 调用函数
    // sayHi();
	

    // 这个函数似乎没有什么价值，除非能够向不同的人打招呼
    // 这就需要借助参数来实现了
    function sayHi(name) {
      // 参数 name 可以被理解成是一个变量
      console.log(name);
      console.log('嗨~' + name);
    }

    // 调用 sayHi 函数，括号中多了 '小明'
    // 这时相当于为参数 name 赋值了
    sayHi('小明'); // 结果为 小明

    // 再次调用 sayHi 函数，括号中多了 '小红'
    // 这时相当于为参数 name 赋值了
    sayHi('小红'); // 结果为 小红
  </script>
</body>
</html>

总结

声明（定义）函数时的形参没有数量限制，当有多个形参时使用 , 分隔
调用函数传递的实参要与形参的顺序一致
以后代码中只要看到 xxx() 即为函数调用，如 Number() Boolean()

声明（定义）函数时括号中的变量叫做形参，调用函数时括号中的数据为实参，实参是专门为形参赋值的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数参数</title>
</head>
<body>

  <script>
    // 声明（定义）一个计算任意两数字和的函数
    
    // 形参 x 和 y 分别表示任意两个数字，它们是两个变量
    function count(x, y) {
      console.log(x + y);
    }
    
    // 调用函数，传入两个具体的数字做为实参
    // 此时 10 赋值给了形参 x
    // 此时 5  赋值给了形参 y
    count(10, 5); // 结果为 15
  </script>
</body>
</html>

5. 返回值

函数的本质是封装（包裹），函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？要想获得函数内部逻辑的执行结果，需要通过 return 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数返回值</title>
</head>
<body>

  <script>
    // 定义求和函数
    function count(a, b) {
      let s = a + b;
      // s 即为 a + b 的结果
      // 通过 return 将 s 传递到外部
      return s;
    }

    // 调用函数，如果一个函数有返回值
    // 那么可将这个返回值赋值给外部的任意变量
    let total = count(5, 12);
  </script>
</body>
</html>

总结

总结：

在函数体中使用return 关键字能将内部的执行结果交给函数外部使用
函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写
return会立即结束当前函数
函数可以没有return，这种情况默认返回值为 undefined.

Jikel

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js函数的声明调用函数体参数以及返回值(详解)

提示：本章技术分享为函数的声明和调用文章目录前言一、函数是什么二、函数的声明和调用1.声明（定义）2.调用3. 函数体3. 参数总结5. 返回值总结前言函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。一、函数是什么函数是功能,他是执行特定的代码块,他的作用就是可以将代码封装起来,进行复用.二、函数的声明和调用1.声明（定义）声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分2
复制链接

扫一扫