主页
  • 主页
  • 分类
  • 热文
  • 教程
  • 面试
  • 标签
JavaScript

JavaScript 基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

JavaScript 操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

JavaScript 控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

JavaScript 函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

JavaScript 对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

JavaScript 面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

JavaScript Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

JavaScript 事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

JavaScript 杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

JavaScript 函数


上一章 下一章

JavaScript 中的函数是一组可重用的代码,可以在程序中的任何地方被调用。这消除了重复编写相同代码的需要。它帮助程序员编写模块化的代码。函数允许程序员将大型程序划分为多个小的且易于管理的函数。

像其他高级编程语言一样,JavaScript 也支持使用函数来编写模块化代码所需的所有特性。在前面的章节中,您可能已经见过 alert() 和 write() 这样的函数。我们在不断地使用这些函数,但实际上它们只在核心 JavaScript 中被写了一次。

JavaScript 允许我们编写自己的函数。本节将解释如何在 JavaScript 中编写您自己的函数。

函数定义

在使用函数之前,我们需要定义它。在 JavaScript 中定义函数最常见的方式是使用 function 关键字,后跟一个唯一的函数名、一个参数列表(可能是空的),以及由大括号包围的语句块。

所有需要在函数调用时执行的语句必须写在大括号内。

语法

在 JavaScript 中定义函数的基本语法如下:

function functionName(parameter-list) {
    statements
}

这种类型的函数定义被称为函数声明或函数语句。我们也可以使用函数表达式来定义函数。我们将在下一章详细介绍函数表达式。

下面的示例定义了一个名为 sayHello 的函数,该函数没有参数:

function sayHello() {
    alert("Hello there");
}

函数表达式

JavaScript 中的函数表达式允许您将函数定义为一个表达式。函数表达式类似于匿名函数声明。函数表达式可以赋值给一个变量。

JavaScript 中函数表达式的语法如下:

const varName = function (parameter-list) {
    statements
};

在下面的示例中,我们使用函数表达式定义了一个 JavaScript 函数,并将其赋值给变量 myFunc:

const myFunc = function (x, y){
   return x + y;
};

调用函数

要在脚本中的某个位置调用函数,只需写出该函数的名称并带上圆括号 (),如下面的代码所示:

示例

下面的代码在输出中显示了一个按钮。当您点击该按钮时,它将执行 sayHello() 函数。sayHello() 函数会在输出中打印 “Hello there!” 消息。

<html>
<head>
   <script type="text/javascript">
      function sayHello() {
         alert("Hello there!");
      }
   
</script>
</head>
<body>
   <p>点击下列按钮以调用函数</p>
   <form>
      <input type="button" onclick="sayHello()" value="Say Hello">
   </form>
   <p> 使用不同的文本在 write 方法中然后尝试... </p>
</body>
</html>

函数参数

到目前为止,我们已经看到了没有参数的函数。但是,在调用函数时可以传递不同的参数。这些传递的参数可以在函数内部被捕获,并且可以在这些参数上执行任何操作。一个函数可以接受由逗号分隔的多个参数。

示例

尝试下面的示例。我们修改了 sayHello 函数。现在它接受两个参数。

<html>
   <head>
      <script type="text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      
</script>
   </head>
   <body>
      <p>点击下列按钮以调用函数</p>
      <form>
         <input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
      </form>
      <p>在函数中使用不同的参数然后尝试...</p>
   </body>
</html>

return 语句

JavaScript 函数可以有一个可选的 return 语句。如果您希望从函数返回一个值,这是必需的。该语句应该是函数中的最后一条语句。

例如,您可以将两个数字传递给一个函数,然后期望该函数返回它们的乘积。

示例

下面的代码定义了一个函数,该函数在返回结果前连接两个参数。此外,您可以看到它是如何使用 return 语句返回值的。

<html>
<head>
  <script type="text/javascript">
      function concatenate(first, last) {
         var full;
         full = first + last;
         return full;
      }
      function secondFunction() {
         var result;
         result = concatenate('Zara ', 'Ali');
         alert(result);
      }
   
</script>
</head>
<body>
   <p>点击下列按钮以调用函数</p>
   <form>
      <input type="button" onclick="secondFunction()" value="Call Function">
   </form>
   <p>在函数中使用不同的参数然后尝试...</p>
</body>
</html>

函数作为变量值

在 JavaScript 中,函数可以像其他变量一样使用。这就是为什么说 JavaScript 支持一等函数。函数可以作为参数传递给其他函数。

示例

在下面的示例中,我们使用函数表达式声明了一个函数,并使用该函数与其他字符串连接。

<html>
<body>
   <div id="output"> </div>
   <script>
      const myFunc = function (){ return "Hello ";}
      document.getElementById("output").innerHTML = myFunc() + "Users.";
  
</script>
</body>
</html>

我们已经在单独的章节中涵盖了两个重要的概念:

  • JavaScript 嵌套函数
  • JavaScript 函数字面量
上一章 下一章
阅读号二维码

关注阅读号

联系二维码

联系我们

© 2024 Yoagoa. All rights reserved.

粤ICP备18007391号

站点地图