10 JavaScript学习:函数

函数的概念

JavaScript中的函数是一段可重复使用的代码块,它接受输入(称为参数),执行特定的任务,并返回一个值。函数可以被调用(或者说被执行),并且可以接受不同的输入来产生不同的输出。
在这里插入图片描述

JavaScript 函数定义

JavaScript 函数可以通过以下方式定义:

  1. 使用 function 关键字:
function functionName() {// 函数体
}
  1. 使用函数表达式:
var functionName = function() {// 函数体
};
  1. 使用箭头函数(ES6):
const functionName = () => {// 函数体
};

在定义函数时,可以为函数指定参数,例如:

function add(a, b) {return a + b;
}var result = add(2, 3); // result 等于 5

函数也可以返回一个值,使用 return 关键字,例如:

function multiply(a, b) {return a * b;
}var result = multiply(2, 3); // result 等于 6

JavaScript 函数调用

JavaScript函数调用是指通过函数名以及括号中的参数(如果有的话)来执行函数的过程。函数调用可以在JavaScript中的任何地方发生,包括全局作用域、函数内部、对象方法等。

下面是一些JavaScript函数调用的详解和举例:

  1. 全局函数调用:定义在全局作用域的函数可以在代码的任何地方进行调用。

    function greet(name) {console.log("Hello, " + name + "!");
    }greet("John"); // 输出: Hello, John!
    
  2. 函数表达式调用:函数表达式赋值给变量后,可以通过变量名进行调用。

    var greet = function(name) {console.log("Hello, " + name + "!");
    };greet("Alice"); // 输出: Hello, Alice!
    
  3. 方法调用:函数可以作为对象的方法来调用。

    var person = {name: "Bob",greet: function() {console.log("Hello, " + this.name + "!");}
    };person.greet(); // 输出: Hello, Bob!
    
  4. 构造函数调用:通过new关键字调用构造函数来创建新对象。

    function Person(name) {this.name = name;this.greet = function() {console.log("Hello, " + this.name + "!");};
    }var john = new Person("John");
    john.greet(); // 输出: Hello, John!
    
  5. 间接调用:使用call()apply()方法来间接调用函数,可以指定函数执行时的上下文(即this的值)。

    function greet() {console.log("Hello, " + this.name + "!");
    }var person = {name: "Alice"
    };greet.call(person); // 输出: Hello, Alice!
    

这些是JavaScript函数调用的一些常见示例,可以根据需要选择适合的方法来调用函数。

JavaScript 函数的参数

JavaScript函数的参数允许您向函数传递数据,让函数能够使用这些数据进行操作。JavaScript函数可以接受零个或多个参数,并且在调用时可以传递不同数量的参数。下面是关于JavaScript函数参数的详细解释:

  1. 命名参数:函数定义时可以指定参数名称,通过参数名称来引用传递的值。

    function greet(name) {console.log("Hello, " + name + "!");
    }greet("Alice"); // 输出: Hello, Alice!
    
  2. 默认参数:在ES6中引入了默认参数的概念,可以为参数设置默认值。

    function greet(name = 'Guest') {console.log("Hello, " + name + "!");
    }greet(); // 输出: Hello, Guest!
    greet("Bob"); // 输出: Hello, Bob!
    
  3. Rest参数:Rest参数允许将不定数量的参数表示为一个数组。在函数参数列表中,使用三个点号(...)来表示Rest参数。

    function sum(...numbers) {return numbers.reduce((a, b) => a + b, 0);
    }console.log(sum(1, 2, 3, 4)); // 输出: 10
    
  4. arguments对象:在非箭头函数中,可以使用arguments对象访问所有传递给函数的参数,即使参数未在函数定义中声明。

    function logArgs() {for (var i = 0; i < arguments.length; i++) {console.log(arguments[i]);}
    }logArgs("apple", "banana", "cherry"); // 输出: apple, banana, cherry
    
  5. 使用对象作为参数:可以将对象作为参数传递给函数,以便在函数中访问对象的属性。

    function greet(person) {console.log("Hello, " + person.name + "!");
    }var alice = { name: "Alice" };
    greet(alice); // 输出: Hello, Alice!
    

以上是关于JavaScript函数参数的一些常见用法,您可以根据需要选择适合的方式来处理函数参数。

另外,JavaScript中没有像其他语言(如Java)那样的函数重载概念,即在同一个作用域中不能定义多个同名函数,参数个数或类型不同的函数。JavaScript中,如果定义了多个同名函数,则后面的定义会覆盖前面的定义,只有最后一个函数定义会被保留。

不过,JavaScript通过一些技巧可以实现类似函数重载的效果,例如通过检查传入参数的类型或个数,然后根据不同的参数来执行不同的逻辑。另外,可以使用ES6中的Rest参数和默认参数来处理不同数量的参数情况,从而达到部分类似函数重载的效果。

综上所述,JavaScript虽然没有原生支持函数重载,但可以通过其他方式来实现类似的功能。

JavaScript 函数的返回值

JavaScript函数可以通过return语句返回一个值。当函数执行到return语句时,函数将会立即停止执行并返回指定的值。在JavaScript中,函数可以返回任何类型的值,包括基本数据类型(如数字、字符串、布尔值)、对象和数组等。

下面是一些关于JavaScript函数返回值的示例:

  1. 返回数字类型:
function add(a, b) {return a + b;
}let result = add(2, 3); // 结果为 5
  1. 返回字符串类型:
function greet(name) {return "Hello, " + name + "!";
}let greeting = greet("Alice"); // 结果为 "Hello, Alice!"
  1. 返回对象类型:
function createPerson(name, age) {return { name: name, age: age };
}let person = createPerson("Bob", 30); // 结果为 { name: "Bob", age: 30 }
  1. 返回数组类型:
function getEvenNumbers(numbers) {return numbers.filter(num => num % 2 === 0);
}let evens = getEvenNumbers([1, 2, 3, 4, 5]); // 结果为 [2, 4]

需要注意的是,函数可以有多个return语句,但一旦执行到其中一个return语句,函数就会立即结束并返回相应的值,后面的代码不会再执行。如果函数没有明确指定返回值,则默认返回undefined。因此,在编写函数时,务必考虑返回值的情况,以便实现所需的功能和数据传递。

JavaScript 局部变量

在JavaScript中,局部变量是在函数内部声明的变量,只能在声明它们的函数内部访问。局部变量具有函数作用域,即在声明它们的函数内部可见,而在函数外部不可见。

下面是一个关于JavaScript局部变量的示例:

function myFunction() {let localVar = 10; // 声明一个局部变量console.log(localVar); // 在函数内部可以访问局部变量// 在这里可以访问全局变量,比如:// console.log(globalVar);}myFunction();
console.log(localVar); // 报错,局部变量在函数外部不可见

在上面的示例中,localVar就是一个局部变量,只能在myFunction()函数内部访问。在函数外部尝试访问该局部变量会导致错误。

局部变量的优点是可以限制变量的作用范围,避免命名冲突,并提高代码的可维护性。使用局部变量可以在函数内部创建临时变量,进行临时存储和计算,同时避免对其他部分造成影响。

需要注意的是,JavaScript中没有块级作用域(ES6引入了letconst关键字来创建块级作用域),因此局部变量的作用范围仅限于声明它们的函数内部。

JavaScript 全局变量

在这里插入图片描述

JavaScript中的全局变量是在全局作用域中声明的变量,可以在代码的任何地方访问。在浏览器环境下,通常是在页面加载时声明的;而在Node.js环境下,则可以通过global对象来访问。全局变量的特点是可以在任何位置访问,但也容易导致命名冲突和不可预测的影响。

下面详细解释一下全局变量,并给出示例:

全局变量的特点:

  1. 全局可访问性:可以在代码的任何位置访问全局变量,不受作用域的限制。

  2. 易于命名冲突:由于全局变量在整个代码中都可见,如果命名不当,容易与其他全局变量或局部变量发生冲突,导致意外的结果。

  3. 不可预测的影响:全局变量的改变会影响整个程序的行为,可能导致难以追踪和调试的问题。

示例:

  1. 在浏览器环境中声明全局变量:
var globalVar = "I am a global variable"; //

这段代码在浏览器环境中声明了一个全局变量globalVar,它可以在页面的任何地方访问。

  1. 在页面中声明全局变量:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Global Variable Example</title>
</head>
<body><script>var globalVar = "I am a global variable"; // 声明一个全局变量function myFunction() {console.log(globalVar); // 在任何地方都可以访问到全局变量}
</script><button onclick="myFunction()">Click me</button></body>
</html>

在这个例子中,globalVar是在页面中声明的全局变量,可以在页面的任何地方访问到。点击按钮会调用myFunction函数,并在控制台输出全局变量globalVar的值。

全局变量在 JavaScript 中具有全局可访问性,但需要注意避免命名冲突和不可预测的影响。

JavaScript未声明的变量

JavaScript 中未声明的变量指的是在使用之前没有通过 var, let, 或 const 关键字声明的变量。当你尝试使用未声明的变量时,JavaScript 引擎会抛出一个 ReferenceError 错误,因为它无法找到该变量的定义。

下面是关于 JavaScript 未声明变量的一些重要信息:

特点:

  1. 引发错误:当尝试访问未声明的变量时,JavaScript 引擎会抛出 ReferenceError 错误。

  2. 全局作用域中的影响:如果在任何地方使用未声明的变量,它将在全局作用域中创建一个全局变量(如果在浏览器环境中),这可能导致意外的行为和 bug。

  3. 严格模式下的行为:在严格模式下,访问未声明的变量将引发 ReferenceError,而不会创建全局变量。

示例:

// 未声明变量的示例console.log(undefinedVariable); // 尝试访问未声明的变量会引发 ReferenceErrorfunction myFunction() {undeclaredVar = 10; // 未使用 var、let 或 const 声明的变量
}console.log(undeclaredVar); // 在严格模式下会抛出 ReferenceError,在非严格模式下会创建全局变量 undeclaredVar

在上面的示例中,undefinedVariableundeclaredVar 都是未声明的变量。尝试访问 undefinedVariable 会引发 ReferenceError,而 undeclaredVar 在非严格模式下会创建一个全局变量。

总之,在 JavaScript 中,始终确保在使用变量之前正确声明它,以避免引发错误并提高代码的可维护性和可读性。

全局变量实现方法大全

在 JavaScript 中,函数内部的局部变量通常不可以直接被外部作用域访问,但有几种方式可以将函数内的局部变量暴露给外部作用域,具体如下:

  • **通过全局对象:**在函数内部,可以通过将局部变量赋值给 window 对象的属性来使其成为全局可访问的。例如,使用 window.a = a; 语句,可以在函数外部通过 window.a 访问到这个局部变量的值。
  • **定义全局变量:**在函数内部不使用 var、letconst 等关键字声明变量时,该变量会被视为全局变量,从而可以在函数外部访问。但这种做法通常不推荐,因为它可能导致意外的副作用和代码难以维护。
  • **返回值:**可以通过在函数内部使用 return 语句返回局部变量的值,然后在函数外部接收这个返回值。这样,虽然局部变量本身不会被暴露,但其值可以通过函数调用传递到外部。
  • **闭包:**JavaScript 中的闭包特性允许内部函数访问外部函数的局部变量。即使外部函数执行完毕后,其局部变量仍然可以被内部函数引用。
  • **属性和方法:**定义在全局作用域中的变量和函数都会变成 window 对象的属性和方法,因此可以在调用时省略 window,直接使用变量名或函数名。

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2979617.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

提升效率!微信自动统计数据报表,轻松实现!

在数字化时代&#xff0c;提高工作效率是每个人的追求。下面就给大家分享一个能够自动统计微信号运营数据的神器——个微管理系统&#xff0c;让大家无需手动整理和计算&#xff0c;提高工作效率&#xff01; 1、好友统计报表 它分为通讯录好友统计、新增好友统计和删除好友统…

python创建线程和结束线程

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 python创建线程和结束线程 在 Python 中&#xff0c;线程是一种轻量级的执行单元&#xff…

Mysql 存在多条数据,按时间取最新的那一组数据

1、数据如下&#xff0c;获取每个用户最近的一次登录数据 思路1&#xff1a;order by group by 先根据UserIdLogInTime排序&#xff0c;再利用Group分组&#xff0c;即可得到每个User_Id的最新数据。 1 SELECT * FROM login_db l ORDER BY l.user_id, l.login_time DESC; 排…

【Linux】实现一个进度条

我们之前也学了gcc/vim/make和makefile&#xff0c;那么我们就用它们实现一个进度条。 在实现这个进度条之前&#xff0c;我们要先简单了解一下缓冲区和回车和换行的区别 缓冲区其实就是一块内存空间&#xff0c;我们先看这样一段代码 它的现象是先立马打印&#xff0c;三秒后程…

使用表格法插入公式和编号

如何将公式和编号优雅地插入到论文当中呢&#xff1f; 首先插入一个1行2列的表格 调整一下 输入公式方法一&#xff1a;感觉墨迹公式挺好用的&#xff0c;word自带的 输入公式方法二&#xff1a;图片转LATEX代码 这个方法更快 分享一个公式识别网站 图片识别得到LATEX代码&…

惠海H6212L DCDC同步降压芯片IC 24V30V36V48V转3.3V5V12V3A大电流方案 带线损

同步降压芯片IC 24V30V36V48V转3.3V5V12V3A大电流方案是一种电源管理方案&#xff0c;它采用同步整流技术&#xff0c;将较高的输入电压&#xff08;如24V、30V、36V、48V&#xff09;转换为较低的输出电压&#xff08;如3.3V、5V、12V&#xff09;&#xff0c;并提供高达3A的大…

代码随想录训练营Day 29|Python|Leetcode|● 860.柠檬水找零 ● 406.根据身高重建队列 ● 452. 用最少数量的箭引爆气球

860.柠檬水找零 在柠檬水摊上&#xff0c;每一杯柠檬水的售价为 5 美元。顾客排队购买你的产品&#xff0c;&#xff08;按账单 bills 支付的顺序&#xff09;一次购买一杯。 每位顾客只买一杯柠檬水&#xff0c;然后向你付 5 美元、10 美元或 20 美元。你必须给每个顾客正确…

openGauss学习笔记-269 openGauss性能调优-TPCC性能调优测试指导-数据库服务端及客户端绑核

文章目录 openGauss学习笔记-269 openGauss性能调优-TPCC性能调优测试指导-数据库服务端及客户端绑核269.1 安装openGauss数据库269.2 停止数据库269.3 使用gs_guc工具修改数据库端口、IP等269.4 使用gs_guc工具设置如下参数269.5 执行如下命令以绑核方式启动服务端数据库269.6…

【计算机毕业设计】药品销售系统产品功能介绍——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…

手把手教数据结构与算法:有序线性表设计

问题描述 设计一个有序线性表类&#xff0c;要求完成初始化&#xff0c;插入和遍历功能&#xff0c;使得表内元素实现有序排列&#xff08;从小到大&#xff09;。同时实现合并功能&#xff0c;使得两个线性表能够合并为一个线性表&#xff08;可能存在重复元素&#xff09;。…

半导体存储器整理

半导体存储器用来存储大量的二值数据&#xff0c;它是计算机等大型数字系统中不可缺少的组成部分。按照集成度划分&#xff0c;半导体存储器属于大规模集成电路。 目前半导体存储器可以分为两大类&#xff1a; 只读存储器&#xff08;ROM&#xff0c;Read Only Memory&#xff…

ThingsBoard服务端使用RPC通过网关给设备发送消息

一、概述 1、发送服务器端网关RPC 二、案例&#xff1a; 1、建立设备与网关之间的通讯 2、查看设备和网关是否在线状态啊 3、通过 仪表盘&#xff0c;创建设备A的模拟RPC调用的窗口链接 4、在客户端的网关设备上订阅RPC网关的主题信息 5、通过服务端的窗口&#xff0c;发…

DaPy:实现数据分析与处理

DaPy&#xff1a;实现数据分析与处理 DaPy是一个用于数据分析和处理的Python库&#xff0c;它提供了一系列强大的工具和功能&#xff0c;使开发者能够高效地进行数据清洗、转换和分析。本文将深入解析DaPy库的特点、功能以及使用示例&#xff0c;帮助读者了解如何利用DaPy库处理…

Oracle使用内部包自定义创建表空间和用户

如果之前有类似的表空间,可以使用dbms自动生成对应的表空间和数据文件 select dbms_metadata.get_ddl(TABLESPACE,ts.tablespace_name) from dba_tablespaces ts; 可以使用类似的 SQL> set echo off SQL> spool /data/logs/create_tablespace.log SQL> select dbms…

【详细实现】v1.0 随机点名应用

1.引言 前面对这个应用的功能做了详细的分析&#xff08;长什么样、能干什么&#xff09;&#xff0c;以先这样对一个项目最开始的分析成为需求分析&#xff0c;需求分析之后就是设计阶段。 那么一般的项目&#xff0c;在设计阶段都需要干什么呢&#xff1f;在需求分析阶段确定…

世界读书日,正在为管理团队而烦恼?听书690本的我最推荐的3本书

前言 今天是世界读书日&#xff0c;如果你是新晋管理者&#xff0c;或者将来想晋升管理这条线。可以参考以下实操性很强&#xff0c;很容易上手的三本团队书籍。 Top3书籍&#xff1a;《10人以下小团队管理手册》《所有问题&#xff0c;七步解决》《可复制领导力》 Top1&#…

数仓建模—数据语义层

数仓建模—数据语义层 什么是语义层 如今,企业产生大量数据,需要以正确的方式进行分析才能做出重要决策。数据可能来自多个来源并采用不同的格式,这使得清楚地了解其含义和重要性成为一项挑战。这就是语义层的用武之地。 语义层存在于数据仓库和最终用户使用的应用程序之间…

【计算机毕业设计】jspm医院门诊挂号系统——后附源码

&#x1f389;**欢迎来到琛哥的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 琛哥&#xff0c;一名来自世界500强的资深程序猿&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 琛哥在深度学习任务中展现出卓越的能力&a…

【深度学习(1)】研0和研1如何上手深度学习及定方向

深度学习&#xff08;1&#xff09; 基础部分书籍鱼书 (理论部分) 视频课程我是土堆&#xff08;代码部分&#xff09; 提升部分李沐的动手学深度学习李沐老师的书 定方向网站&#xff1a; paperwithcode谷歌学术找论文 基础部分 书籍 鱼书 (理论部分) 适合入门&#xff0c;…

探索 去中心化的Web3.0

随着区块链技术的日益成熟和普及&#xff0c;Web3&#xff08;Web 3.0&#xff09;已经成为一个无法忽视的趋势。Web3不仅仅是一个技术概念&#xff0c;更是一个去中心化、透明、用户数据拥有权归还给用户的互联网新时代。在这篇文章中&#xff0c;我们将深入探讨Web3技术的核心…