JavaScript的函数基础

目录

前言:

1.函数是什么:

2.函数的基本使用:

2.1 定义函数:

2.2. 调用函数

2.3函数命名规范:

2.3.1由数字、字母、下划线组成:

2.3.2区分大小写:

2.3.3不能数字开头,也不能是关键字:

2.3.4自定义函数纯小写:

2.3.5见名知意:

2.4返回值(return)的应用:

2.4.1函数、函数代码和函数返回值:

2.4.1.1函数:

2.4.1.2函数代码:

2.4.1.3函数返回值:

2.4.2函数内的数据和返回值:

2.4.3默认返回值:

2.5函数参数的使用:

2.5.1函数参数:

2.5.1.1形参(形式参数):

2.5.1.2实参(实际参数):

2.5.2必备参数:

2.5.3默认参数:

2.6匿名函数的使用:

2.6.1匿名函数的特点:

2.6.1.1只执行一次:

2.6.1.2自动执行:

2.6.1.3独立作用域:

2.6.2语法和用法:

示例:

注意点:

3.拓展知识:

3.1作用域:

3.2全局作用域:

3.3局部作用域(函数作用域)

3.4块级作用域(let 和 const 关键字):

3.5let 与 var 的主要区别:

3.5.1作用域:

3.5.2重声明:

3.5.3提升:

结语:

前言:


在前面我们已经学习了关于JavaScript的流程控制语句的初始JavaScript的内容今天开始我们就将要开始学习一下关于JavaScript的函数基础,这些都是我个人在学习过程中的学习笔记或许会有所遗漏欢迎大家的指正和指点.

1.函数是什么:

函数(function)是一段可以重复使用的代码块,它执行一个特定的任务。在编程中,当我们发现有一段代码经常需要在多个地方重复使用,或者为了使代码更加模块化和易于管理,我们可以将这段代码封装成一个函数。

 在JavaScript中,函数可以通过关键字function来定义。例如:

function greet(name) { 
console.log('Hello, ' + name + '!');}

 在这个例子中,我们定义了一个名为greet的函数,它接受一个参数name,并在控制台上打印出一条问候消息。当我们需要向某人打招呼时,只需调用这个函数并传入相应的名字即可,例如:

function greet(name) { 
console.log('Hello, ' + name + '!'); 
}

JavaScript还提供了许多内置函数,如console.log()用于在控制台输出信息,alert()用于显示一个警告框等。这些内置函数为我们提供了丰富的功能,使我们能够更轻松地编写JavaScript代码。

总结来说,函数在编程中扮演着非常重要的角色,它们允许我们重用代码、提高代码的可读性和可维护性,并使我们的程序更加模块化和易于扩展。

2.函数的基本使用:


2.1 定义函数:

在JavaScript中,函数可以通过function关键字进行定义,后跟函数名和一对圆括号。函数体包含在大括号中,其中包含了函数应执行的代码。

function fun() {  alert('多喝热水');  
}

这个例子中,fun是函数的名称,而alert('多喝热水');是函数被调用时要执行的代码。

2.2. 调用函数

调用函数非常简单,只需使用函数名后跟一对圆括号即可。

fun(); // 调用函数,将显示一个警告框,内容为“多喝热水”

如果函数有返回值,可以通过输出语句或将其赋值给变量来使用这个返回值。

console.log(fun()); // 如果fun()有返回值,这里会打印出来  let result = fun(); // 如果fun()有返回值,该值将被赋给result变量

函数没有明确的返回值,因此调用fun()时将返回undefined。如果想让函数返回一个值,可以这样做:

function getMessage() {  return '多喝热水';  
}  console.log(getMessage()); // 输出:“多喝热水”

2.3函数命名规范:

2.3.1由数字、字母、下划线组成

这意味着函数名可以包含这些字符,但不能包含空格、特殊字符或其他非法字符。

2.3.2区分大小写

在JavaScript中,变量和函数名是区分大小写的。因此,Funfun是两个不同的函数名。

2.3.3不能数字开头,也不能是关键字

函数名不能以数字开头,因为这可能会导致解析错误。同时,函数名也不能是JavaScript的保留关键字,如ifforwhile等。

2.3.4自定义函数纯小写

这是一种常见的编码约定,用于区分自定义函数和JavaScript内置的函数或对象方法。内置的函数或方法通常使用驼峰命名法(camelCase),而自定义函数则通常全部使用小写字母。

2.3.5见名知意

函数名应尽可能地描述函数的功能或目的,这样其他开发者在阅读代码时能够更容易地理解函数的用途。例如,一个用于计算平均值的函数可以命名为calculateAverage

2.4返回值(return)的应用:

在JavaScript函数中,return语句用于指定函数返回的值。当函数被调用时,会执行函数体内的代码,直到遇到return语句,此时函数会立即停止执行,并返回指定的值。

function add(a, b) {  let sum = a + b;  return sum; // 返回a和b的和  
}  let result = add(5, 3); // 调用函数,并将返回值存储在result变量中  
console.log(result); // 输出:8

2.4.1函数、函数代码和函数返回值:

2.4.1.1函数

代表了一个可以被调用的代码块,它执行一个特定的任务。

2.4.1.2函数代码

是执行任务的具体过程,描述了如何完成这个任务。

2.4.1.3函数返回值

是函数执行后产生的结果,可以通过return语句来指定。

2.4.2函数内的数据和返回值:

如果函数内的数据仅通过输出语句(如console.log)打印出来,那么这些数据只能被查看,但不能被函数外部的代码所使用。

如果使用return语句返回数据,则这些数据可以被其他函数或变量所使用,因为它们成为了函数的返回值。

2.4.3默认返回值:

如果在函数中没有明确设置return语句,或者return后面没有跟任何值,那么函数的返回值默认为undefined

例如:

function noReturn() {  // 没有return语句  
}  let value = noReturn(); // value将是undefined,因为没有返回值  
console.log(value); // 输出:undefined

2.5函数参数的使用:

2.5.1函数参数:

适当的使用函数参数可以使得里面的数据更加灵活因为里面的数据不是固定的而是可以随时改变的。

2.5.1.1形参(形式参数)

在函数定义时声明的参数,它们没有具体的值,只是占位符。当函数被调用时,形参会接收传入的实参值。

2.5.1.2实参(实际参数)

在函数调用时传递给函数的实际值,这些值会替换形参并执行函数。

2.5.2必备参数:

对于必备参数,函数在定义时指定了需要传递的参数数量和类型。在调用函数时,必须提供与形参数量相匹配的实参,否则函数可能无法正常工作或产生错误。

function fun2(name, age) {  console.log(`你好,我叫${name},我今年${age}岁`);  
}  
fun2('麒麟', 28); // 正确调用,提供了两个必备参数

如果调用fun2时只提供了一个参数,那么第二个参数age将会是undefined,除非在函数内部有相应的处理逻辑。

2.5.3默认参数:

默认参数允许在函数定义时为形参设置默认值。当函数调用时没有提供该形参的实参时,将使用这个默认值。这可以使函数调用更加灵活,并减少因缺少参数而导致的错误。

例如:

function fun3(name, age = 18) {  console.log(`你好,我叫${name},我今年${age}岁`);  
}  
fun3('玫玫'); // 正确调用,只提供了一个参数,age使用默认值18

在这个例子中,如果调用fun3时没有提供age参数,那么age将默认为18。需要注意的是,如果有多个默认参数,它们只能从右到左赋值,也就是说,默认参数必须位于参数列表的末尾。

2.6匿名函数的使用:

匿名函数(也称为自执行函数或立即执行函数表达式,IIFE - Immediately Invoked Function Expression)在JavaScript中常常用于创建一个独立的作用域,以避免变量污染全局命名空间。这种函数定义后立即执行,且只执行一次。

2.6.1匿名函数的特点:

2.6.1.1只执行一次

匿名函数在定义后会立即执行,而且只执行一次。

2.6.1.2自动执行

无需外部调用,定义后即自动运行。

2.6.1.3独立作用域

匿名函数内部声明的变量不会泄漏到全局作用域,有助于防止全局命名空间的污染。

2.6.2语法和用法:

通常,匿名函数采用以下形式:

!(function(参数) {  // 函数代码  
})(实参);

这里的!或括号()的作用是将函数声明转变为函数表达式,从而能够立即执行。在JavaScript中,函数声明和函数表达式是不同的。函数声明不能立即执行,而函数表达式可以。通过在匿名函数前面加上!+-~等一元操作符,或者将匿名函数包裹在括号内,都可以将其转变为函数表达式。

示例:

下面是一个简单的匿名函数示例:

!(function(greeting) { 
console.log(greeting + ', this is an immediately-invoked function expression!'); 
})
('Hello');

注意点:

  • 匿名函数通常用于封装代码块,以避免全局变量的污染。
  • 匿名函数可以接收参数,并在其内部使用这些参数。
  • 匿名函数内部的变量不会泄露到全局作用域中。
  • 在实际开发中,匿名函数常用于插件开发、模块化代码等场景。

3.拓展知识:

3.1作用域:

在JavaScript中,作用域指的是一个变量或数据的可访问范围。理解作用域是编写可靠和可维护代码的关键部分。letvar的关键字确实与作用域紧密相关,它们在声明变量时具有不同的作用域行为

3.2全局作用域:

全局作用域中的变量在整个代码中都是可见的。在浏览器环境中,全局作用域通常是window对象。

 

var globalVar = 'I am global'; // 声明在全局作用域

3.3局部作用域(函数作用域)

在函数内部声明的变量具有局部作用域,它们只能在该函数内部被访问。

function myFunction() {  var localVar = 'I am local'; // 声明在局部(函数)作用域  
}

3.4块级作用域(let 和 const 关键字):

let 和 const 关键字在ES6中被引入,它们提供了块级作用域,这意味着它们声明的变量只在声明它们的代码块({} 内)中可见。

if (true) {  let blockScopedVar = 'I am block-scoped'; // 声明在块级作用域  console.log(blockScopedVar); // 可以访问  
}  
console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

3.5let 与 var 的主要区别:

3.5.1作用域

var 具有函数作用域,而 let(和 const)具有块级作用域。

3.5.2重声明

在同一个作用域内,var 允许你重新声明同一个变量,而 let 不允许这样做。

3.5.3提升

var 声明的变量会发生变量提升(hoisting),意味着变量可以在声明之前被使用(但值为 undefined)。而 let 声明的变量虽然也存在提升,但是在声明之前的访问会导致一个错误(暂时性死区)。

// var 的作用域和重声明示例  
function varExample() {  if (true) {  var x = 10;  console.log(x); // 输出 10  }  console.log(x); // 输出 10,因为 var 具有函数作用域  var x = 20; // 可以重新声明  console.log(x); // 输出 20  
}  // let 的作用域和重声明示例  
function letExample() {  if (true) {  let y = 10;  console.log(y); // 输出 10  }  console.log(y); // ReferenceError: y is not defined,因为 let 具有块级作用域  let y = 20; // SyntaxError: Identifier 'y' has already been declared,不能重新声明  
}

结语:

好了,关于今天的函数学习我们就先学习到这里了,总的来说,JavaScript的函数是编程中不可或缺的一部分,它们通过封装、重用、模块化和提高可读性等方式,使得代码更加高效、可维护和易于理解。今天先简单的介绍了一下关于函数的知识,这些其实都只是我个人的一些学习的笔记和总结,难免会有所遗漏,所以欢迎各位在评论区留言,也欢迎大家指正我的文章,同时也希望大家多多支持一下小编。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

信阳附大医院-市民心中的健康守护者

信阳附大医院,一所集医疗、预防、保健、科研、教学、康复于一体的现代化综合医院,坐落于信阳市工区路600号,是市卫生部门批准成立的医疗机构,更是市民心中的健康守护者. 医院环境优雅,设施先进,服务周到,汇聚了一支技术精湛、经验丰富的医疗团队.医师们以患者为中心,用心倾听,精…

【UE 网络】DS框架学习路线

目录 0 引言1 如何学习DS框架1. 熟悉Unreal Engine基础2. 学习网络编程基础3. 掌握UE网络概念4. 实践和实验5. 加入社区和论坛6. 官方示例和案例研究7. 专业书籍和在线课程 2 DS框架重要知识点有哪些1. 网络复制2. 远程过程调用(RPC)3. 客户端服务器架构…

基于单片机16路多路抢答器仿真系统设计

**单片机设计介绍,基于单片机16路多路抢答器仿真系统设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机16路多路抢答器仿真系统的设计概要主要涵盖硬件设计、软件编程以及功能实现等方面。以下是针对该设计的详细概…

Mac系统Unity团结引擎打包OpenHomeny项目配置

1、团结引擎下载:直接百度下载即可 2、mac版本的DevEco4.0编辑器下载: widthdevice-width,initial-scale1.0https://docs.openharmony.cn/pages/v4.0/zh-cn/release-notes/OpenHarmony-v4.0-release.md/#%E9%85%8D%E5%A5%97%E5%85%B3%E7%B3%BB3、打开D…

实现RAG:使用LangChain实现图检索查询

你是不是有时会遇到这样的问题:你可能遇到的任何主题或问题,都有大量的文档,但是当尝试将某些内容应用于自己的用途时,突然发现很难找到所需的内容。 在这篇博文中,我们将看一下LangChain是如何实现RAG的,这…

2024年贵州省职业院校技能大赛云计算应用赛项赛题第2套

#需要资源(软件包及镜像)或有问题的,可私聊博主!!! #需要资源(软件包及镜像)或有问题的,可私聊博主!!! #需要资源(软件包…

产品经理和项目经理的区别

1. 前言 本文深入探讨了产品经理与项目经理在职责、关注点以及所需技能方面的显著区别。产品经理主要负责产品的规划、设计和市场定位,强调对用户需求的深刻理解和产品创新的推动;而项目经理则侧重于项目的执行、进度控制和资源管理,确保项目按时、按质、按预算完成。两者在…

在NBA我需要翻译--适配器模式

1.1 在NBA我需要翻译! "你说姚明去了几年,英语练出来了哦,我看教练在那里布置战术,他旁边也没有翻译的,不住点头,瞧样子听懂没什么问题了。" "要知道,最开始&#xff0c…

03-JAVA设计模式-原型模式

原型模式 什么是原型模式 Java原型模式(Prototype Pattern)是一种创建型设计模式,其核心理念在于通过复制(克隆)已有的对象来创建新的对象,而不是通过构造函数来创建。 该模式可以显著提高对象创建的效率…

HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第7章动手实践

7.6 动手实践 学习完前面的内容&#xff0c;下面动手实践一下吧。 请结合给出的素材&#xff0c;运用元素的浮动和定位实现图7-49所示的“焦点图”效果。 链接&#xff1a;https://pan.baidu.com/s/1H98ySBSkd8h3IRA19AV2mw?pwd1024 提取码&#xff1a;1024 index.html <…

代码随想录|Day34|动态规划03|343.整数拆分、96.不同的二叉搜索树

343.整数拆分 动规五步&#xff1a; 确定 dp[i] 含义&#xff1a;拆分数字 i&#xff0c;可以获得的最大乘积为 dp[i]。递推公式&#xff1a;dp[i] max(j * (i - j), j * dp[i - j])。i 可以被拆解为两个数&#xff08;j 和 i - j&#xff09;或者多个数&#xff08;j 和 dp[i…

KMP刷leetcode速通

前言 KMP真厉害&#xff0c;刷题刷到 28.找出字符串中第一个匹配项的下标 和 1668.最大重复子字符串 next 数组用来匹配不上时&#xff0c;前缀 j j j 可以快速回退到 n e x t [ j − 1 ] next[j-1] next[j−1] 的位置。 void getNext(vector<int>& next, const…

5毛钱的DS1302 N/Z串行实时时钟IC

推荐原因&#xff1a; 便宜&#xff0c;够用 该器件最早为DALLAS的产品&#xff0c;所以冠有DS&#xff0c;现国内有多个厂家生产&#xff0c;部分价格不到5毛钱的含税价格&#xff0c;有此自行车&#xff0c;还要什么宝马&#xff1f; 下述为简介&#xff0c;使用前请参阅相应…

Linux 网络配置 主机名解析过程

Windows查看网络信息 ipconfigLinux中查看网络配置&#xff1a; ifconfigVMware的网络编辑器&#xff1a; 测试两台主机网络是否连通&#xff1a; ping ip地址自动获取IP 自动获取IP&#xff0c;可以避免IP冲突&#xff0c;但IP可能会变&#xff0c;使用图形界面&#xf…

xilinx AXI CAN驱动开发

CAN收发方案有很多&#xff0c;常见的解决方案通过是采用CAN收发芯片&#xff0c;例如最常用的SJA1000,xilinx直接将CAN协议栈用纯逻辑实现&#xff0c;AXI CAN是其中一种&#xff1b; 通过这种方式硬件上只需外接一个PHY芯片即可 上图加了一个电平转换芯片 软件设计方面&…

书生·浦语大模型-第三节课笔记/作业

笔记 作业 原版 prompt控制节奏&#xff0c;实现类似关键词检索、主题、信息抽取等功能注意这里根据llm返回的topic (prompt: 告诉我这句话的主题&#xff0c;直接说主题不要解释)进行召回检索(CacheRetriever), 并再次让大模型判断query与返回的检索的相关程度. 如果本地检索…

蓝桥杯 子串简写(暴力)

题目&#xff1a;子串简写 代码1&#xff1a; #include<algorithm> #include<iostream> #include<cstring> #include<queue> #include<cmath>using namespace std;char c1,c2; int k; char s[100010]; int a[100010]; int b[100010]; int cnt; …

Nginx服务 高级配置

五、高级配置 1. 网页的状态页 基于 nginx 模块 ngx_http_stub_status_module 实现&#xff0c;在编译安装nginx的时候需要添加编译参数 --with-http_stub_status_module&#xff0c;否则配置完成之后监测会是提示语法错误注意。状态页显示的是整个服务器的状态&#xff0c;而…

Python学习之-logging模块及彩色日志详解

前言&#xff1a; Python的logging模块是内建的、功能强大的日志系统&#xff0c;可通过简单的配置&#xff0c;就能满足基本到复杂的日志管理需求。它可以让你以各种方式记录错误、调试信息、以及其他运行时的信息&#xff0c;这些都是应用程序健壯性、可维护性的关键。 1 基…

分公司=-部门--组合模式

1.1 分公司不就是一部门吗&#xff1f; "我们公司最近接了一个项目&#xff0c;是为一家在全国许多城市都有分销机构的大公司做办公管理系统&#xff0c;总部有人力资源、财务、运营等部门。" "这是很常见的OA系统&#xff0c;需求分析好的话&#xff0…