前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【JavaScript】函数 ① ( 函数引入 | 函数声明 | 函数调用 )

【JavaScript】函数 ① ( 函数引入 | 函数声明 | 函数调用 )

作者头像
韩曙亮
发布2024-04-02 09:58:15
960
发布2024-04-02 09:58:15
举报

一、JavaScript 函数

1、函数引入

JavaScript 代码编写时 , 会遇到 定义 大量相同或相似代码的 场景 , 这些代码可能需要重复使用 , 这种情况下就需要 将 这些代码 定义在 函数 中 ;

JavaScript 函数 是一段可以重复使用的代码块 ,

" 函数 " 可以 接受 若干输入参数 , 在 函数体 中进行 计算 或 执行操作,并返回 返回值 ;

借助 函数 可以 组织和重用代码 , 使代码更加清晰和易于维护 ;

函数 的 目的 就是 重复使用代码 ;

使用函数 就是 声明函数 和 调用函数 ;

2、函数声明

在 JavaScript 中 , 使用 function 关键字 声明函数 ;

函数定义语法格式 :

代码语言:javascript
复制
// 声明 JavaScript 函数
function functionName(parameter1, parameter2, ...) {  
  // 函数体:执行的代码块  
}
  • functionName 是 函数 的 函数名 ;
  • parameter1, parameter2, ... 是 传递给函数的 形式参数列表 , 这些 形式参数 在 函数体代码中 可与作为局部变量使用 ;

代码示例 :

代码语言:javascript
复制
        // 声明函数
        function hello(name) {
            console.log(`Hello, ${name}!`);
        }

在上述代码中 , 声明了一个名为 hello 的函数 , 该函数接受一个参数 name , 在函数体中 使用 console.log 在 浏览器 命令行 中 打印出 Hello, ${name}! 字符串 ;

3、函数调用

函数声明后 , 本身不会自动执行 函数体中的代码 , 只有 调用函数后 , 才会执行 函数体代码 ;

函数调用 语法格式 :

代码语言:javascript
复制
functionName(argument1, argument2, ...);
  • functionName 是 要调用函数 的 函数名 ;
  • argument1, argument2, ... 是传递给函数的 实参列表 , 该 实参列表 与 函数定义的 形参列表一一对应 , 这些实际参数值值将替换函数定义中的形式参数 , 并在函数执行时 作为 函数体的 局部变量 使用 ;

4、代码示例 - 函数声明调用

在下面的代码中 , 定义了 hello 函数 , 传入 name 形参 , 在 函数体中 , 该形参可以作为局部变量使用 ;

调用 hello() 函数时 , 传入 实参 'Tom' 字符串 , 在函数体中会向 浏览器控制台 打印 Hello , Tom! 字符串 ;

代码示例 :

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 函数使用

        // 声明函数
        function hello(name) {
            console.log(`Hello, ${name}!`);
        }

        // 调用函数
        hello('Tom');
    </script>
</head>

<body>
</body>

</html>

执行结果 :

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、JavaScript 函数
    • 1、函数引入
      • 2、函数声明
        • 3、函数调用
          • 4、代码示例 - 函数声明调用
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档