前端基础之JavaScript学习——函数的使用

news2024/9/23 13:16:37

大家好我是来自CSDN的前端寄术区博主PleaSure乐事,今天我们继续有关JavaScript的学习,使用的编译器为vscode,浏览器为谷歌浏览器。


函数的声明与使用

声明

在JavaScript当中函数的声明和其他语言类似,使用如下格式即可声明:function 函数名(){函数体},具体例子如下:

<script>
    function bubbleSort(arr) {  
        let n = arr.length;  
        for (let i = 0; i < n - 1; i++) {  
            for (let j = 0; j < n - i - 1; j++) {  
                if (arr[j] > arr[j + 1]) {
                    let temp = arr[j];  
                    arr[j] = arr[j + 1];  
                    arr[j + 1] = temp;  
                }  
            }  
        }  
        return arr;  
    }
</script>

使用

我们声明完函数,就需要对他进行调用,调用方法与Java等类似,使用函数名+要传入的参数就可以。但是需要注意,如果没有需要传入的参数,如下面的函数,就需要加上括号才会被调用:

<script>
    function test() {
        console.log('test');
    }
    test();
</script>

函数命名规范

函数的命名规范与变量命名规则基本一致,使用驼峰命名法。在声明中,前缀尽量使用动词方便判断作用,比如:

  1. can判断是否可以执行
  2. has判断是否含有某个值
  3. is判断是否是某个值
  4. get获取某个值
  5. set设置某个值
  6. load加载一些数据

函数的传参

基本概念

函数的参数传入可以分为单个和多个,多个数据之间需要用逗号隔开,且参数需要在声明函数时就声明,写在函数名后的括号内。传参的格式如下:

<script>
    let a = 1;
    let b = 2;
    //没有参数
    function test() {
        console.log('test');
    }
    test();
    //一个参数
    function test1(a) {
        console.log(a * a);
    }
    test1(a);
    //多个参数
    function test2(a, b) {
        console.log(a * b);
    }
    test2(a, b);
</script>

可以「设定函数的默认值」防止未对函数传参的情况,比如可以对参数设置默认值都为0的条件,若传入参数则用传入的参数,如果没有传入则使用默认值,即存在「优先级问题」 注意传入数组时可以设置空数组防止报错。

<script>
    function test(a = 0, b = 0) {
        console.log(a * b);
    }
    test();
    test(1,2);
</script>

在JavaScript当中,我们也需要注意形参和实参的区别。

形参与实参

定义

在函数定义时列出的参数称为形式参数。它们是函数内部用于接收传入数据的变量。形参只在函数体内部有效,在函数被调用时创建,并在函数执行完毕后被销毁。形参用于在函数内部存储传递给函数的数据,使函数能够对这些数据进行处理。

在函数调用时传递给函数的参数称为实际参数。它们是函数调用时提供的具体值或变量。实参可以是全局变量、局部变量或表达式的值,其作用域和存在时间由它们在函数调用之外的定义决定,在函数调用之前就已经存在,并在函数调用过程中被传递给函数。函数调用结束后,实参仍然存在。

区别

简单来讲,形参与实参的主要区别就是他们的创建时间与作用域不同,且在函数调用时实参的值会被传给形参。在如下例子当中,a和b就是形参,3和4就是实参:

<script>
    function sum(a, b) {  
        return a + b;  
    }
    var result = sum(3, 4);   
    console.log(result);
</script>

函数的返回值

调用某个函数会返回一个值,直接return + 数据即可返回数据,但是需要接收相关数据才行。但是需要注意的是return语句后面的代码不会被执行,需要有返回值的函数可以没有return,但是这样的话会默认返回undefined。如下就是一个需要有返回值但是没有return函数,导致出现undefined的例子:

<script>
    function sum(a, b) {  
        a += b 
    }
    var result = sum(3, 4);   
    console.log(result);
</script>

作用域

函数的使用需要注意作用域,即局部变量和全局变量的使用,for循环,while循环等也一样。在函数内部如果未声明变量,那么该变量也当作全局变量来看,但是这种情况一般是不被允许的。

函数内部的形参可以当作局部变量来看,变量的访问原则:在能够访问到的情况下就一定先局部再全局 只要是符合规范的代码,变量就一定有作用域。

匿名函数

匿名函数是没有名字的函数,无法直接使用。

使用方法

函数表达式

该方法是将匿名函数赋值给一个变量,并通过改变量名进行调用。例如:

<script>
    let fn = function(){
        
    }
</script>

立即执行函数

立即执行函数的使用场景是避免全局变量之间的污染/相互影响。其语法如下:

方法一

(function(){函数体})(); 需要添加逗号否则可能会被误认为函数没结束 这里面也可以传入参数。样例如下:

<script>
    (function(x,y){
        doucment.write(x+y)
    })(1,2);
</script>

方法二

(function(){函数体}()); 同样可以传入参数。样例如下:

<script>
    (function(x,y){
        console.log(x-y)
    }(1,2));
</script>


总结

今天主要写了有关函数的有关知识点,并且写了一种比较快速便利的函数——匿名函数。希望对大家有所帮助,如果对您有帮助,希望您可以留下点赞与关注,这对我真的很重要,非常感谢!也希望我能与您共同进步!

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

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

相关文章

SpringBoot+Session+redis实现分布式登录

SpringBootSessionRedis实现分布式登录功能实现 文章目录 目录 文章目录 前言 一、引库 二、修改配置文件 三、使用 四、解决乱码问题 1.引库 2.配置redis序列化 3.配置Session-Redis序列化 前言 这里简单介绍一下&#xff0c;如果你想多台机器部署你的项目的话&#xff0c;在…

Python爬虫速成之路(6):Selenium的使用

hello hello~ &#xff0c;这里是绝命Coding——老白~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff1a;绝命Coding-CSDN博客 &a…

Excel的操作

Excel的操作 一、Excel的作用 Excel是一款功能强大的电子表格软件&#xff0c;主要用于数据处理和分析。 二、Excel的基础操作 新建文档 一般情况下&#xff0c;就在桌面空白处&#xff0c;点击鼠标右键&#xff0c;即可新建 三、页面布局 1、快速访问工具栏 主要包含&am…

前端特效动画魔法书:文字渐入效果实现,可做引导页面

前端特效动画魔法书&#xff1a;文字渐入效果实现&#xff0c;可做引导页面 简介 在网页设计的世界中&#xff0c;动画是吸引用户眼球的魔法。Anime.js&#xff0c;一个轻量级且功能强大的JavaScript动画库&#xff0c;是实现这一魔法的完美工具。本文将作为你的技术文档&…

深入理解PHP基础【代码审计实战指南】

文章目录 基础语法单双引号的区别前后端分离数据类型PHP常量函数var_dump函数count函数print_r函数**readfile&#xff08;&#xff09;函数****file_get_contents()函数****file_put_contents()函数**header函数fopen函数fread 函数rename函数copy&#xff08;&#xff09;函数…

什么是单例模式,有哪些应用?

目录 一、定义 二、应用场景 三、6种实现方式 1、懒汉式&#xff0c;线程不安全。 2、懒汉式&#xff0c;线程安全 3、双检锁/双重校验锁&#xff08;DCL&#xff0c;即 double-checked locking&#xff09; 4、静态内部类方式-------只适用于静态域 5、饿汉式 6、枚举…

MATLAB函数介绍——plotm

简述 matlab中&#xff0c;plotm和不带“m”的plot意义相似&#xff0c;都是绘制二维图像的。只是加了m以后&#xff0c;在绘制时将图像投影到了世界地图坐标系上面进行显示。 plotm的第一个输入量是纬度&#xff0c;第二个输入量是经度&#xff0c;单位都是弧度。 例程 官方…

各种复现,保证质量

代码复现&#xff0c;文献复现&#xff0c;模型复现&#xff0c;算法复现&#xff0c;文章复现&#xff0c;创新点等等&#xff0c;python/matlab/c语言/r语言均可&#xff0c;保证高质量完成&#xff0c;可接急单&#xff0c;不成功不收费&#xff01;

docker应用:搭建云手机

简介&#xff1a;近来慵懒&#xff0c;身体懈怠良多&#xff0c;思来想去随手看点小攻略以宽慰不懈怠的心。云手机Cloudphone&#xff0c;就是将云计算技术运用于网络终端服务&#xff0c;通过云服务器实现云服务的手机。其实就是深度结合了网络服务的智能手机&#xff0c;这类…

基于多线程延迟排序的睡眠排序算法的创新与改进

基于多线程延迟排序的睡眠排序算法的创新与改进 摘要 本文在传统睡眠排序算法的基础上&#xff0c;提出了一种改进方案&#xff0c;旨在优化处理负数和大规模数据集的性能。通过引入线程池管理和数据分段排序技术&#xff0c;改进后的算法在处理大数据集和包含负数的数据集时…

【11】微服务链路追踪SkyWalking

1、skywalking是什么 1.1 链路追踪介绍 对于一个大型的几十个、几百个微服务构成的微服务架构系统&#xff0c;通常会遇到下面一些问题&#xff0c;比如&#xff1a; 如何串联整个调用链路&#xff0c;快速定位问题&#xff1f;如何缕清各个微服务之间的依赖关系&#xff1f;…

【web】-flask-简单的计算题(不简单)

打开页面是这样的 初步思路&#xff0c;打开F12&#xff0c;查看头&#xff0c;都发现了这个表达式的base64加密字符串。编写脚本提交答案&#xff0c;发现不对&#xff1b; 无奈点开source发现源代码&#xff0c;是flask,初始化表达式&#xff0c;获取提交的表达式&#xff0…

C语言 | Leetcode C语言题解之第260题只出现一次的数字III

题目&#xff1a; 题解&#xff1a; int* singleNumber(int* nums, int numsSize, int* returnSize) {int xorsum 0;for (int i 0; i < numsSize; i) {xorsum ^ nums[i];}// 防止溢出int lsb (xorsum INT_MIN ? xorsum : xorsum & (-xorsum));int type1 0, type2…

虚拟机OP的LAN网口设置

问题&#xff1a;unraid通过虚拟机安装OP&#xff0c;然而一个网口连接路由器&#xff0c;总是无法为其他设备提供DHCP&#xff0c;导致无法使用。 一、虚拟机OP配置 二、OP内部配置 对于Lan网口&#xff0c;启用强制&#xff0c;这样可以防止OP被网口接的路由器产生冲突 三、…

安全防御:过滤技术

目录 一、URL过滤 URL过滤的方式 二、HTTP与HTTPS HTTP协议获取URL的方式 HTTP协议做控制管理的流程 HTTPS 1&#xff0c;配置SSL的解密功能 2&#xff0c;直接针对加密流量进行过滤 需求&#xff1a; 三、DNS过滤 四、内容过滤 文件过滤技术 文件过滤技术的处理流…

详解SVN与Git相比存在的不足

原文全文详见个人博客&#xff1a; 详解SVN与Git相比存在的不足截至目前&#xff0c;我们已既从整理梳理的SVN和Git在设计理念上的差异&#xff0c;也重点对二者的存储原理和分支管理理念的差异进行深入分析。这些差异也直接造成了SVN和Git在分支合并、冲突解决、历史记录管理…

Git分支管理基本原理

原文全文详见个人博客&#xff1a; Git分支管理基本原理上文已讨论过svn分支管理的基本原理&#xff0c;本文将继续探讨Git分支管理的基本原理&#xff0c;以便后续进行进一步的理解和对比&#xff1a;https://www.coderli.com/git-branch-method/【Java学习交流(982860385)】…

Git仓库拆分和Merge

1. 问题背景 我们原先有一个项目叫open-api&#xff0c;后来想要做租户独立发展&#xff0c;每个租户独立成一个项目&#xff0c;比如租户akc独立部署一个akc-open-api&#xff0c;租户yhd独立部署一个yhd-open-api&#xff0c;其中大部分代码是相同的&#xff0c;少量租户定制…

鸿蒙开发入门——声明式UI开发入门简介(1)

声明式UI特点 与常规命令式开发的区别在于主导者不同&#xff0c;命令式开发为开发者告诉计算机需要做什么&#xff0c;而声明式开发为开发者告诉计算机自己想要什么结果&#xff0c;怎么做交给预先的程序和算法&#xff0c;让计算机自行推断 声明式描述 开发者只需描述在界⾯…

《0基础》学习Python——第二十讲__网路爬虫/<3>

一、用post请求爬取网页 同样与上一节课的get强求的内容差不多&#xff0c;即将requests.get(url,headershead)代码更换成requests.post(url,headershead),其余的即打印获取的内容&#xff0c;如果content-typejson类型的&#xff0c;打印上述代码的请求&#xff0c;则用一个命…