JavaScript【四】JavaScript中的函数

news2025/1/11 14:57:08

文章目录

  • 🌟前言
  • 🌟什么是函数?
  • 🌟函数声明方式
    • 🌟 function关键字
    • 🌟 字面量定义(匿名函数)
    • 🌟 实例化构造函数
  • 🌟函数调用方式
    • 🌟通过括号调用
    • 🌟自调用(IIFE)
    • 🌟通过事件调用
    • 🌟注意事项
    • 🌟函数声明覆盖
    • 🌟函数调用顺序
    • 🌟 函数在不同块调用顺序
  • 🌟箭头函数
    • 🌟 箭头函数语法
  • 🌟函数的参数
    • 🌟 参数作用
    • 🌟 参数类型
    • 🌟 参数详解
    • 🌟 参数数据类型
    • 🌟 参数个数
    • 🌟 参数尾逗号
  • 🌟函数的重载
  • 🌟函数参数默认值
    • 🌟ES5设置默认值方式
    • 🌟ES6函数参数设置默认值
    • 🌟 函数的length属性
  • 🌟函数返回值：在函数调用的地方相当于函数的返回值
    • 🌟return 的功能
    • 🌟 函数返回值使用事项
  • 🌟写在最后

在这里插入图片描述

🌟前言

哈喽小伙伴们，本文将收录在JavaScript【前端童子功】这个专栏里；这个专栏里边会收录一些JavaScript的基础知识和项目实战；希望大家可以多多支持，你们的支持就是我创作的动力；让我们一起来看看吧🤘

🌟什么是函数?

函数：将完成某一特定功能的代码封装起来，并且可以重复调用的代码块。

为何使用函数？

  1. 能够对代码进行复用：只要定义一次代码，就可以多次使用它。
  2. 能够多次向同一函数传递不同的参数，以产生不同的结果。
  3. 使程序更加简洁、具有逻辑性、维护方便

🌟函数声明方式

🌟 function关键字

function 函数名([参数1],[参数2],...[参数n]){
    函数体
    [retrun]  //返回值
}

🌟 字面量定义(匿名函数)

var 变量 = function ([参数1],[参数2]....){
    函数体
    [retrun]  //返回值
}

🌟 实例化构造函数

var 变量 = new Function([参数1],[参数2]...,"函数体");

 //实例化构造函数--例二
    function Animal(name,sex,age){
        this.name=name;
        this.sex=sex;
        this.age=age;
        this.eat=function(eat){
            return "骨头"
        }
    }
    var animal1=new Animal("狗","男","20","骨头");
    console.log(animal1);
    var animal2=new Animal("猪","母","5");
    console.log(animal2);
    var animal3=new Animal("猫","公","18");
    console.log(animal3);
    console.log(animal2.name);
    console.log(this);

    // 例三
    function Person(name,age){
        this.name=name;
        this.age=age;
        this.play=function(){
            return "猫";
        }
    }
    var zs=new Person("zs","20")
    console.log(zs);
    var ls=new Person("ls","18")
    console.log(ls);

🌟函数调用方式

🌟通过括号调用

用于具名函数的调用

  • 函数名()
  • 变量名()
function fun1(){}
fun1()

var fun2 = function (){}
fun2()

🌟自调用(IIFE)

用于匿名函数的调用，匿名函数还可以通引用变量来调用。

//第一种
(function (){
    //函数体;
})()

//第二种
!function(){
    //函数体;
}()

//第三种
(function(){
    //函数体;
}())

注意： 在进行函数自调用时，上一条语句必须结尾有;

🌟通过事件调用

<script>
    function fun(){}
</script>
<div onclick="fun()"></div>

🌟注意事项

创建/调用函数注意问题:

  1. 如果两个函数的命名相同，后面的将会覆盖前面的函数。
  2. 以function声明的函数可以前置调用，以字面量方式声明方式后置调用。
  3. 在不同的<script></script>块中声明函数，声明之后块中调用。

🌟函数声明覆盖

如果两个函数的命名相同，后面的将会覆盖前面的函数。

function bb(){
    alert("这是第一个声明");
}
function bb(){
    alert("这是第二个声明");
}
bb(); //结果为  “这是第二个声明

🌟函数调用顺序

以基本语法声明的函数，会在页面载入的时候提前解析到内存中，以便调用。所以可以在函数的前面调用。但是以字面量形式命名的函数，会在执行到他的时候，才进行赋值。所以只能在函数的后面调用。

aa();      // 结果为 弹出 1
function aa(){
    alert(1)
}
aa();      // 结果为 弹出 1


aa();      // 报错 aa is not a function
var aa = function(){
    alert(1)
}
aa();

🌟 函数在不同块调用顺序

在不同的<script></script>块中，因为浏览器解析的时候是分块解析的，所以前面的块不能调用后面块的函数，所以在不同的块之间调用函数的时候，应该先声明后调用。

<script>
    aa();      //报错
</script>
<script>
    function aa(){
        alert(1)
    }
</script>
<script>
    aa()       //结果为 弹出 1
</script>

🌟箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

🌟 箭头函数语法

箭头函数表达式的语法比普通函数表达式更简洁。

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的：

(单一参数) => {函数声明}
单一参数 => {函数声明}

没有参数的函数应该写成一对圆括号:

() => {函数声明}

🌟函数的参数

可以动态的改变函数的变量的类型与值，使同一函数实现不同的效果

当我们封装一个功能，例如十行十列表格，但是每次使用该功能时想动态改变实现效果，例如想输出为五行五列、两行两列的表格，这时就需要修改函数体代码。 而更好的方法就是，在调用时有使用者传入一些值来控制函数体中的相关功能，即可实现不同效果，这个使用者在调用函数时传入的值就是函数的参数。

🌟 参数作用

可以动态的改变函数的变量的类型与值，使同一函数产生不同的结果。

🌟 参数类型

  • 形参：函数在定义时，括号里所定义的变量。 (形式上存在，只有在被调用时才有值)
  • 实参：函数在调用时，括号里所传入的值。 (进行函数调用时,它们都必须具有确定的值, 以便把这些值传送给形参)
// num 是形参
function ta(num){
    for(var i = 1;i <= num;i++){
        for(var j = 1;j <= num-i;j++){
            document.write("&nbsp;");
        }
        for(var k = 1;k <= i*2-1;k++){
            document.write("*");
        }
        document.write("<br>");
  }
}
ta(6);    // 6 是实参

在实参为形参传递过程中，实参和形参位于内存中两个不同地址中，实参先自己复制一次拷贝，再把拷贝复制给形参。所以，在函数体中，形参的变化不会对实参有任何的影响。例如：

var number = 10
function fun(number){
    number = 100
}

fun(number);
alert(number);   // 10

🌟 参数详解

  1. 参数可以是任何的数据类型
  2. 参数个数
  3. 参数尾逗号

🌟 参数数据类型

参数可以是任何的数据类型

function TYPEOF(type){
alert(typeof type);
}
TYPEOF(1)
TYPEOF("a")
TYPEOF(true)
TYPEOF(null)
TYPEOF()
//甚至可以传入函数：
TYPEOF(function(){alert(1)})

🌟 参数个数

  1. 实参与形参的个数相同时，一一对应。

  2. 实参小于形参时，形参自动赋值为undefined。

     function aa(a,b){
     alert(a);
     alert(b);
 }
 aa(1);  //   1  undefined

  3. 实参大于形参时，使用

    arguments

    对象来获取。

     function aa(a,b){
     alert(a);
     alert(b);
     alert(arguments.length);
     alert(arguments[2]);
     alert(arguments.callee);
 }
 aa(1,5,7);   //依次弹出 1  5  3   7  函数本身

  4. arguments对象 在创建函数时，隐式的创建了arguments对象，它是用来记录函数的参数的信息的，只能在函数内部使用

    它的属性：

    • length: 函数的参数的长度
    • callee: 对函数本身的调用
    • 可以通过下标来访问具体参数的值。

    注：arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。

  5. [es6]rest参数

    ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

     function fun(...a){
     console.log(a);    // [1,2,3,4]
 }
 fun(1,2,3,4)

 function fun(a, ...b){
     console.log(a,b);    //1   [2,3,4]
 }
 fun(1,2,3,4)

 // rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。
 function f(a, ...b, c) {
     // 报错
 }

🌟 参数尾逗号

在ES7种，函数实参和形参末尾可以以逗号结束：

function fun(a,b,){ }

fun(10,20,)

功能：重新排列元素项，改变最后一个元素位置时不需要增删逗号

🌟函数的重载

一个函数通过传入的参数的个数不同或者参数类型的不同，可以对应函数的多个实现，而且每一种实现对应一个函数体。
重载函数常用来实现功能类似而所处理的数据类型不同的问题。

模拟函数的重载：

function fun(a,b){
    if(arguments.length == 1){
            alert("只有一个参数"+a);
    }
    if(arguments.length == 2){
            alert(" 有两个参数"+a+"和"+b);
    }
    if(arguments.length >= 3){
            alert("参数太多了");
    }
}
fun(1,3.4,4);

🌟函数参数默认值

// 该函数计算两数之和，但如果调用只传入一个参数则结果是NaN，所以必须为参数设置默认值0
function add(a,b){
    return a+b
}

🌟ES5设置默认值方式

使用短路原则为变量设置默认值

// 利用短路原则为函数参数设置默认值，参数存在则取参数，参数未传则取0
function add(a,b){
   a = a||0;
   b = b||0;
   return a+b
}
// 为变量设置默认值1
var num = num || 1

🌟ES6函数参数设置默认值

ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

function add(x, y = 0) {
console.log(x, y);
}
log(10) // 10 0
log(10, 100) // 10  100
log(10, '') // 10

🌟 函数的length属性

函数的length属性，将返回没有指定默认值的参数个数，仅包括第一个具有默认值之前的参数个数。

function aa(a){}
function bb(a=5){}
function cc(a,b,c=5){}

console.log(aa.length) // 1
console.log(bb.length) // 0
console.log(cc.length) // 2

🌟函数返回值：在函数调用的地方相当于函数的返回值

函数体中的计算结果可以输出查看，但是如果想对函数的结果进行处理则需要用到函数的返回值。

函数体中的关键字 return 可以将函数体中运行的结果返回给函数外部：

function fun(a,b){
    var num = a+b;
    return num;
}
var end = fun(1,2);    // 函数运行结果保存到变量end中

🌟return 的功能

  1. 将函数运行结果返回
  2. 停止并跳出当前函数 （不会执行return后面的语句）
function aa(){
  return;
  alert("hello world");
}
aa();   // 没有弹出 hello world

一个函数可以有多个return语句，但只有一个return执行（常用于判断）

function aa(a){
    if(a>0){
        alert(a);
        return;
    }
    if(a<=0){
        alert(a);
        return;
    }
}
aa(3);  //  3

🌟 函数返回值使用事项

  1. 返回值可以是任何数据类型

  2. 每个函数都默认有返回值，如果一个函数没有写return，会默认返回undefined。

    function aa(a){
   if(a>0){
       alert(a);
       return;
   }
   if(a<=0){
       alert(a);
       return 1;
   }
}
alert(aa(3));   //  3  undefined
alert(aa(0));   //  0  1

  3. 一个函数只能有一个返回值。

    function bb(a,b,c){
   return a,b,c;
}
alert(bb(3,5,7)); //  7

    原因：用逗号做返回值时，是按从左到右赋值的，最终赋值为最后一个值，前面的值被覆盖了。

    如果想返回多个值，则可以将多个值打包为数组或对象

🌟写在最后

更多JavaScript知识以及API请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！

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

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

相关文章

企业电子招投标采购系统——功能模块功能描述+数字化采购管理 采购招投标

企业电子招投标采购系统——功能模块功能描述+数字化采购管理 采购招投标

​ 功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为外…
阅读更多...
windows安装Metasploit

windows安装Metasploit

近期在大佬群里各种炫技&#xff0c;各种工具使用&#xff0c;漏洞利用与复现&#xff0c;感觉自己常规安全测试就是个小学生&#xff0c;于是好心的大佬发了个Rapid7Setup-Windows64.exe的渗透工具&#xff0c;但是自己的电脑安装了&#xff0c;破解不了&#xff0c;导致失败&…
阅读更多...
计算机组成原理——第四章指令系统（上）

计算机组成原理——第四章指令系统（上）

提示&#xff1a;待到秋来九月八&#xff0c;我花开后百花杀 文章目录前言4.1.1 指令格式4.1.2 扩展操作码指令格式4.2.1 指令寻址4.2.2 数据寻址4.2.3 偏移寻址4.2.4 堆栈寻址汇总前言 通过第二章我们学习了运算器是如何进行加减乘除&#xff0c;移位运算操作的&#xff0c;通…
阅读更多...
【密码算法 之七】GCM 浅析

【密码算法 之七】GCM 浅析

文章目录1. 概述1.1 GHASH1.3 GCTR2. GCM 加密3. GCM 解密4. 总结在我的另一篇博客【密码算法 之三】分组密码工作模式 &#xff08;ECB \ CBC \ CFB \ OFB \ CTR \ XTS&#xff09;浅析 中已经详细的介绍了对称算法&#xff08;也称为“分组密码算法”&#xff09;的各种工作模…
阅读更多...
排序算法（一）

排序算法（一）

一、排序算法 排序算法就是将数组按照数值或者字母序排列&#xff0c;常用的排序算法有很多&#xff0c;如下&#xff1a; 详细细节可以直接看维基百科&#xff1a;https://zh.wikipedia.org/zh-cn/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95 C的库中实现了常用的排序算法&#x…
阅读更多...
Linux_红帽8学习笔记分享_4

Linux_红帽8学习笔记分享_4

Linux_红帽8学习笔记分享_4 文章目录Linux_红帽8学习笔记分享_41.用户管理useradd命令的使用1.1使用useradd添加用户1.2 Linux系统底层的四个连锁反应2.账户信息文件/etc/passwd中七个字段的含义3.组信息文件/etc/group中四个字段的含义4.影子文件/etc/shadow两个字段的含义5.相…
阅读更多...
C++STL——map与set介绍及使用

C++STL——map与set介绍及使用

map与set介绍及使用关联式容器健值对setmultisetmapmultimap关联式容器 之前我们学的list&#xff0c;vector等等是序列式容器&#xff0c;这里的set和map和之后的哈希表都是关联式容器&#xff0c;比如说搜索二叉树我们想插入一个值&#xff0c;不能随意的插入&#xff0c;因…
阅读更多...
【JVM】JVM之执行引擎

【JVM】JVM之执行引擎

文章目录前言名词解释机器码指令指令集汇编语言高级语言字节码虚拟机&物理机前端编译器&后端编译器JVM之执行引擎执行引擎是如何工作的&#xff1f;解释器即时编译器&#xff08;JIT&#xff09;分层编译策略虚拟机执行模式热点代码&探测方式1&#xff09;方法调用…
阅读更多...
Android 屏蔽锁屏界面上的通知显示

Android 屏蔽锁屏界面上的通知显示

一. 前言 [定制需求描述]:在插入SD后, 锁屏状态下&#xff0c; 去掉提示“SD卡可用于传输照片和媒体文件” 需求拆解: 要求正常显示在SystemUI下拉状态栏, 只需要屏蔽在锁屏状态下的通知. 二. 发送通知 首先来找找这个字符串"可用于传输照片和媒体文件" 是在/f…
阅读更多...
buuctf_随便注

buuctf_随便注

根据题目猜测这是一道SQL注入的题目输入一个单引号触发报错&#xff0c;根据报错信息得知闭合条件就是一对单引号继续构造表达式&#xff0c;得出一共包含两个回显位构造表达式求出当前数据库的名称&#xff0c;但是根据回显数据和实践来看&#xff0c;此题是对select进行了过滤…
阅读更多...
【软件设计师12】数据流图DFD

【软件设计师12】数据流图DFD

数据流图DFD 必考下午第一道大题&#xff01;&#xff01;&#xff01; 基本概念、数据字典、数据平衡原则 1. 基本概念 顶层图是系统&#xff0c;再看中间跟外部数据的交换流不变&#xff0c;内部细化&#xff0c;最底层图进一步细化 数据存储在题干描述时&#xff0c;要么…
阅读更多...
一文弄清-BP的过拟合与validationCheck

一文弄清-BP的过拟合与validationCheck

本站原创文章&#xff0c;转载请说明来自《老饼讲解-BP神经网络》bp.bbbdata.com BP神经网络的训练经常会遇到过拟合的情况&#xff0c;导致模型在训练效果上很好但预测效果差 正因如此&#xff0c;matlab工具箱引入validationCheck来防止BP神经网络走向过拟合 本文介绍过拟合是…
阅读更多...
SOTIF 预期功能安全ISO21448介绍、功能安全标准ISO26262 与若干安全标准的适用范围和开发流程映射

SOTIF 预期功能安全ISO21448介绍、功能安全标准ISO26262 与若干安全标准的适用范围和开发流程映射

SOTIF 预期功能安全ISO21448介绍、功能安全标准ISO26262 与若干安全标准的适用范围和开发流程映射 ISO 21448 中规定了预期功能安全的设计开发流程图&#xff0c; 如下图所示。首先从 第 5 条出发&#xff0c; 进行规范和设计。该部分是将进行整车级、 系统级、 组件级等功能规…
阅读更多...
快速了解Depop注册新方法，轻松一分钟入驻

快速了解Depop注册新方法，轻松一分钟入驻

东哥我是在几个月前第一次认识depop这个平台&#xff0c;原因是当时主要是让手底下的员工去操作&#xff0c;团队毕竟涉及到的平台都比较多&#xff0c;我就没那么多精力放在depop上&#xff0c;但却意外发现这个平台给我们带来很不错的业绩&#xff01;所以东哥今天打算给大家…
阅读更多...
阿里p8大牛三年整理出全网最全的5万字的《Java核心知识手册》

阿里p8大牛三年整理出全网最全的5万字的《Java核心知识手册》

利用空余时间整理了一份《Java核心知识手册》&#xff0c;初衷也很简单&#xff0c;就是希望在面试的时候能够帮助到大家&#xff0c;减轻大家的负担和节省时间。 前段时间&#xff0c;朋友圈分享了这份这份面试手册的初稿&#xff0c;在几位同学的提议下&#xff0c;对手册进…
阅读更多...
线程夯死的排查及解决

线程夯死的排查及解决

最近做的业务一直是和第三方交互的业务&#xff0c;为了加快速度&#xff0c;基本上都是采用多线程&#xff0c;然而时不时总是发生一些推送任务莫名的卡死&#xff0c;知道前几天的一次发现&#xff0c;让我开始了线程的排查之路&#xff0c;希望对大家的有一定的启发和借鉴一…
阅读更多...
使用Mybatis-plus在xml文件中实现自己定义的sql逻辑

使用Mybatis-plus在xml文件中实现自己定义的sql逻辑

1、创建数据库表(前提安装配置好Mysql&#xff0c;并且会使用) DROP TABLE IF EXISTS USER; CREATE TABLE USER (id BIGINT(20) NOT NULL COMMENT 主键ID,NAME VARCHAR(30) NULL DEFAULT NULL COMMENT 姓名,age INT(11) NULL DEFAULT NULL COMMENT 年龄,email VARCHAR(50) NUL…
阅读更多...
【C51单片机】8-温湿度监测显示系统（LCD1602、温湿度传感器、IIC、OLED）

【C51单片机】8-温湿度监测显示系统（LCD1602、温湿度传感器、IIC、OLED）

1.LCD1602概述 LCD1602&#xff08;Liquid Crystal Display&#xff09;是一种工业字符型液晶&#xff0c;能够同时显示 1602 即 32 字符(16列两行) //硬件接线 //电源 VSS -- GND VDD -- 5V //对比度 VO -- GND //控制线 RS -- P1.0 RW -- P1.1 E -- P1.4 //背光灯 A -- 5…
阅读更多...
华为VRRP配置

华为VRRP配置

拓扑图 PC1电脑配置 指定ip192.168.10.1 网关192.18.10.254 LSW1交换机配置 ge0/0/1 access &#xff0c;vlan10 ge0/0/2 trunk ge0/0/3 trunk <Huawei>system-view Enter system view, return user view with CtrlZ. [Huawei]undo info-center enable Info: Informa…
阅读更多...
基础练习 闰年判断

基础练习 闰年判断

def is_leap_year(year):if year % 4 0 and year % 100 ! 0 or year % 400 0:print("yes")else:print("no")if __name__ __main__:is_leap_year(int(input()))
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023