JavaScript函数基础

news2024/11/15 15:32:02

●我们代码里面所说的函数和我们上学的时候学习的什么三角函数、二次函数之类的不是一个东西

函数的概念
●对于 js 来说,函数就是把任意一段代码放在一个 盒子 里面
●在我想要让这段代码执行的时候,直接执行这个 盒子 里面的代码就行
●先看一段代码

// 这个是我们以前写的一段代码
for (var i = 0; i < 10; i++) {
    console.log(i)
}

// 函数,这个 {} 就是那个 “盒子”
function fn() {
    // 这个函数我们以前写的代码
    for (var i = 0; i < 10; i++) {
        console.log(i)
    }
}

函数的两个阶段(重点)
●按照我们刚才的说法,两个阶段就是 放在盒子里面 和 让盒子里面的代码执行
○放在盒子里面 这个是不专业的称呼 专业称呼叫 函数声明
○让盒子里面的代码执行 专业称呼 函数调用

函数声明(定义)阶段
●定义阶段就是我们把代码 放在盒子里面
●我们就要学习怎么 放进去,也就是书写一个函数
●声明(定义)一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分
●我们有两种定义方式 声明式 和 赋值式
●函数名的命名规则与变量是一致的,并且尽量保证函数名的语义。

声明式
●使用 function 这个关键字来声明一个函数
●语法:

function fn() {
    // 一段代码
}
// function: 声明函数的关键字,表示接下来是一个函数了
// fn: 函数的名字,我们自己定义的(遵循变量名的命名规则和命名规范)
// (): 必须写,是用来放参数的位置
// {}: 就是我们用来放一段代码的位置(也就是我们刚才说的 “盒子”)

赋值式
●其实就是和我们使用 var 关键字是一个道理了
●首先使用 var 定义一个变量,把一个函数当作值直接赋值给这个变量就可以了
●语法:

var fn = function() {
    // 一段代码
}
// 不需要在 function 后面书写函数的名字了,因为在前面已经有了

函数调用阶段
●就是让 盒子里面 的代码执行一下,函数必须调用才会真正被执行
●就是让函数执行
●两种定义函数的方式不同,但是调用函数的方式都以一样的

调用一个函数
●函数调用就是直接写 函数名() 就可以了

// 声明式函数
function fn() {
    console.log('我是 fn 函数')
}
// 调用函数
fn()

// 赋值式函数
var fn2 = function() {
    console.log('我是 fn2 函数')
}
// 调用函数
fn2()

○注意: 定义完一个函数以后,如果没有函数调用,那么写在 {} 里面的代码没有意义,只有调用以后才会执行

调用上的区别
●虽然两种定义方式的调用都是一样的,但是还是有一些区别的
●声明式函数: 调用可以在 定义之前或者定义之后

// 可以调用
fn()
// 声明式函数
function fn() {
    console.log('我是 fn 函数')
}
// 可以调用
fn()

●赋值式函数: 调用只能在 定义之后调用,定义之前就调用会报错

// 会报错
fn()
// 赋值式函数
var fn = function() {
    console.log('我是 fn 函数')
}
// 可以调用
fn()

函数的参数(重点)
●函数是 js 数据类型中的一种复杂数据类型也叫引用数据类型
●我们在定义函数和调用函数的时候都出现过 ()
●现在我们就来说一下这个 () 的作用
●就是用来放参数的位置
●参数分为两种 行参 和 实参
●声明(定义)函数时括号中的变量叫做形参,调用函数时括号中的数据为实参,实参是专门为形参赋值的。

// 声明式 语法
function fn(行参写在这里) {
    // 一段代码
}
fn(实参写在这里)

// 赋值式 语法
var fn = function(行参写在这里) {
    // 一段代码
}
fn(实参写在这里)

行参和实参

行参
●就是在函数内部可以使用的变量,在函数外部不能使用
●每写一个单词,就相当于在函数内部定义了一个可以使用的变量(遵循变量名的命名规则和命名规范)
●多个单词之间以 英文状态下的 逗号 分隔

// 书写一个参数
function fn(num) {
    // 在函数内部就可以使用 num 这个变量
}

var fn1 = function(num) {
    // 在函数内部就可以使用 num 这个变量
}

// 书写两个参数
function fun(num1, num2) {
    // 在函数内部就可以使用 num1 和 num2 这两个变量
}

var fun1 = function(num1, num2) {
    // 在函数内部就可以使用 num1 和 num2 这两个变量
}

○如果只有行参的话,那么在函数内部使用的这个变量是没有值的,也就是 undefined
○行参的值是在函数调用的时候由实参决定的

实参
●在函数调用的时候给行参赋值的
●也就是说,在调用的时候是给一个实际的内容的

function fn(num) {
    // 函数内部可以使用 num
}
// 这个函数的本次调用,书写的实参是 100
// 那么本次调用的时候函数内部的 num 就是 100
fn(100)

// 这个函数的本次调用,书写的实参是 200
// 那么本次调用的时候函数内部的 num 就是 200
fn(200)

○函数内部的行参的值,由函数调用的时候传递的实参决定
●多个参数的时候,是按照顺序一一对应的

function fn(num1, num2) {
    // 函数内部可以使用 num1 和 num2
}
// 函数本次调用的时候,书写的参数是 100 和 200
// 那么本次调用的时候,函数内部的 num1 就是 100,num2 就是 200
fn(100, 200)

案例1: 求两个数字的和

// 通过函数求任意两个数字的和
定义一个函数用于求和
function fn(a, b) {
    // 计算两个数的和并且返回结果
    var res = a + b
    console.log(res);
}
fn(10, 20)
fn(100, 200)

案例2: 求三个数字的和

// 通过函数求任意三个数的和
// 定义一个函数
function fun(a, b, c) {
    var res = a + b + c
    console.log(res);
}
// 调用函数
fun(10, 20, 30)
fun(20, 62, 32)

函数的返回值return(重点)
●return 返回的意思,其实就是给函数一个 返回值 和 终断函数
●函数的本质是封装(包裹),函数体内的逻辑执行完毕后,函数外部如何获得函数内部的执行结果呢?要想获得函数内部逻辑的执行结果,需要通过 return 这个关键字,将内部执行结果传递到函数外部,这个被传递到外部的结果就是返回值

终断函数
●当我开始执行函数以后,函数内部的代码就会从上到下的依次执行
●必须要等到函数内的代码执行完毕
●而 return 关键字就是可以在函数中间的位置停掉,让后面的代码不在继续执行

function fn() {
    console.log(1)
    console.log(2)
    console.log(3)
    // 写了 return 以后,后面的 4 和 5 就不会继续执行了
    return
    console.log(4)
    console.log(5)
}
// 函数调用
fn()

返回值
●函数调用本身也是一个表达式,表达式就应该有一个值出现
●现在的函数执行完毕之后,是不会有结果出现的

// 比如 1 + 2 是一个表达式,那么 这个表达式的结果就是 3
console.log(1 + 2) // 3

function fn() {
    // 执行代码
}

// fn() 也是一个表达式,这个表达式就没有结果出现
console.log(fn()) // undefined

●return 关键字就是可以给函数执行完毕一个结果

function fn() {
    // 执行代码
    return 100
}

// 此时,fn() 这个表达式执行完毕之后就有结果出现了
console.log(fn()) // 100

○我们可以在函数内部使用 return 关键把任何内容当作这个函数运行后的结果

案例1: 求任意两个数字的和

// 需求: 求任意两个数的和
// 声明一个函数 , 定义两个形参
function f1(a, b) {
    // 计算求和的结果,赋值给res
    // res就是我们要求的任意的两个数的和
    var res = a + b
    // console.log(res);
    // 返回我们的结果,这样我们才可以在函数的外面拿到这个结果
    return res
}
// 调用我们的函数 传递实参
// 函数调用就获取到了我们的结果
// 我们把这个结果赋值给了sum
var sum = f1(10, 20)
console.log(sum);

 

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

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

相关文章

[golang gin框架] 25.Gin 商城项目-配置清除缓存以及前台列表页面数据渲染公共数据

配置清除缓存 当进入前台首页时,会缓存对应的商品相关数据,这时,如果后台修改了商品的相关数据,缓存中的对应数据并没有随之发生改变,这时就需要需改对应的缓存数据,这里有两种方法: 方法一 在管理后台操作直接清除缓存中的所有数据,当再次访问前台首页时,就会先从数据库中获取…

巧用千寻位置GNSS软件|直线放样有技巧

日常测量作业中&#xff0c;直线放样是对设计好的直线进行放样&#xff0c;其中包括直线的里程&#xff0c;左右偏距及设计直线范围内的高程控制。本文将介绍如何运用千寻位置GNSS软件完成日常的直线放样。 点击【测量】->【直线放样】->【直线库】&#xff0c;选择一条直…

Python数组仿射变换

文章目录 仿射变换坐标变换的逻辑scipy实现 仿射变换 前面提到的平移、旋转以及缩放&#xff0c;都可以通过一个变换矩阵来实现&#xff0c;以二维空间中的变换矩阵为例&#xff0c;记点的坐标向量为 ( x , y , 1 ) (x,y,1) (x,y,1)&#xff0c;则平移矩阵可表示为 [ 1 0 T x …

数据结构和算法学习记录——二叉搜索树的插入操作、删除操作

目录 二叉搜索树的插入 思路图解 代码实现 要点 例题 二叉搜索树的删除 情况一 情况二 情况三 右子树的最小元素 左子树的最大元素 代码实现 二叉搜索树的插入 要进行二叉搜索树的插入&#xff0c; 关键点在于要找到元素应该插入到哪个位置&#xff0c;可以采…

Echarts数据可视化(下)

四、数据可视化项目实战 后台搭建 结合Vue开发图表组件 WebSocket实现数据推送 主题切换/页面合并/全屏切换 4.1 Koa2 学习介绍&#xff1a;koa2 - 简书 官网&#xff1a;Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架 | Koajs 中文文档 4.1.1 Koa2 的介绍 基…

springboot+vue校园新闻网站(源码+说明文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的校园新闻网站。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 &#x1f495;&#x1f495;作者&#xff1a;风歌&a…

【数据结构】树及二叉树的概念

&#x1f61b;作者&#xff1a;日出等日落 &#x1f4d8; 专栏&#xff1a;数据结构 一次失败&#xff0c;只是证明我们成功的决心还够坚强。 ——博 维 目录 &#x1f384;树概念及结构: ✔树的概念: ✔树的相关概念 :​编辑 ✔树的…

【C++】-一文让你半只脚进入C++,还不进来看看??

作者&#xff1a;小树苗渴望变成参天大树 作者宣言&#xff1a;认真写好每一篇博客 作者gitee:gitee 如 果 你 喜 欢 作 者 的 文 章 &#xff0c;就 给 作 者 点 点 关 注 吧&#xff01; C入门 前言一、C关键字二、namespace和using关键字2.1namespace和using的使用2.2names…

WebStorm前端启动JetLinks 物联网基础平台(2.x)

目录 一、环境准备 二、下载源码 三、安装依赖 ​四、修改配置 五、启动项目 六、访问项目 一、环境准备 1.降级node版本为12.22.0 使用node版本管理器gnvm_苍穹之跃的博客-CSDN博客以管理员身份打开cmd&#xff0c;cd到node安装目录。https://blog.csdn.net/wenxingch…

联发科 2024届 IC实习笔试分析

说明 记录一下 4月19日晚&#xff0c;发哥的一场笔试。分享给需要的 IC 人。 岗位&#xff1a;数字IC设计验证&#xff08;安徽 合肥&#xff09; 转载要经本人同意&#xff01; 我的见解不一定都是准确的&#xff0c;欢迎评论区交流指正~~ 1、&#xff08;20分&#xff0…

滚动条如何设置样式和滚动条悬浮显示与隐藏

文章目录 一、滚动条如何设置样式1&#xff1a;滚动条的默认样式&#xff08;如下图&#xff09;1&#xff1a;html代码2&#xff1a;css代码3&#xff1a;效果图 2&#xff1a;CSS设置滚动条的属性&#xff08;重点&#xff09;3&#xff1a;设置滚动条的例子1&#xff1a;css…

java面经01-基础篇-排序算法、ArrayList、Iterator、LinkedList、HashMap、单例模式

文章目录 基础篇1. 二分查找2. 冒泡排序3. 选择排序4. 插入排序5. 希尔排序6. 快速排序7. ArrayList7.1 初始化:7.2 add扩容7.3 addAll扩容 8. Iterator8.1 ArrayList 源码分析8.2 CopyOnWriteArrayList 源码分析 9. LinkedList10. HashMap1&#xff09;基本数据结构2&#xff…

C#基础学习--LINQ(2

标准查询运算符 标准查询运算符由一系列API方法组成 序列指实现了Ienumerable<>接口的类&#xff0c;包括List<>,Dictionary<>,Stack<>,Array等 标准查询运算符的签名 扩展方法是公共的静态方法&#xff0c;尽管定义在一个类中&#xff0c;但目的是为…

python整活时间到——27行代码一键获取写真集~~~

嗨害大家好鸭&#xff01;我是爱摸鱼的芝士❤ 来吧&#xff0c;直接整活~ 先准备一下 首先咱们需要安装一下这两个第三方模块 requests >>> parsel >>> 不会安装的小伙伴&#xff0c;键盘按住winr 在弹出来的运行框 输入cmd 按确定&#xff0c;然后弹出…

【python中的协程了解一下?】

什么是协程 协程&#xff08;Coroutine&#xff09;是一种比线程更加轻量级的并发方式&#xff0c;它不需要线程上下文切换的开销&#xff0c;可以在单线程中实现并发。协程通常具有以下特点&#xff1a; 协程中的代码可以暂停执行&#xff0c;并且在需要的时候可以恢复执行。…

我的Qt作品(18)模仿Qt Creator IDE写了一个轻量级的视觉框架

Qt Creator的源码比较庞大。前几年我陆陆续续读过里面的源码。也写了几篇博文&#xff1a; https://blog.csdn.net/libaineu2004/article/details/104728857 https://blog.csdn.net/libaineu2004/article/details/89407333 最近一直想找机会&#xff0c;借用这个IDE的皮&…

谷歌Chrome浏览器在新标签页打开书签链接的五个方法

方法一&#xff1a;快捷键Ctrl/Command键 Ctrl/Command 左键单击书签 方法二&#xff1a;右键菜单建立新的标签页 在书签上单击右键选择【在新标签页中打开】 方法三&#xff1a;鼠标中键/拖拽到新标签页 拖拽方法&#xff1a;点击对应书签的文字或者图标——拖拽到浏览器…

Unity出模型动画的序列帧(特效序列帧)

模型动画的序列帧 我这里是通过Recorder和Timeline的结合操作&#xff0c;输出带有透明通道是序列帧图片 流程图 #mermaid-svg-ig9s3Ys4ZkUqP2IW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ig9s3Ys4ZkUqP2IW …

机器学习 day03(成本函数,简化后的和一般情况下的成本函数)

1. 成本函数 平方误差成本函数是最通常用于线性回归的成本函数最终&#xff0c;我们要找到一组w和b&#xff0c;让j函数的值最小误差&#xff1a;ŷ - y 2. 简化后的平方误差成本函数&#xff0c;即b 0 当w 1时&#xff0c;f(x) x&#xff0c;J(1) 0 左侧为f(x)函数&am…

QT笔记——信号转发器之QSignalMapper

QSignalMapper类可以看成是信号的翻译和转发器。 它可以把一个无参的信号翻译成带以下4种参数的信号再转发&#xff1a;int、QString、 QObject以及QWidget 。 应用场景一般是&#xff1a;有一些信号&#xff0c;发送的参数都是一样的情况下&#xff0c;常用的方法是给每一个信…