当前位置：首页 > news >正文

详解js在事件中，如何传递复杂数据类型（数组，对象，函数）

news 2025/10/22 12:05:48

文章目录

前言
一、何谓预编译，变量提升？
二、复杂数据类型的传递
- 1.数组
- 2.对象
- 3.函数
总结

前言

在JavaScript这门编程语言学习中，如何传参，什么是变量提升，js代码预编译等等。要想成为一名优秀的js高手，这些内容是你不得不去认真研究和深挖的。今天我们就来具体看看这几件事，它到底是怎么回事儿。

一、何谓预编译，变量提升？

其实这一概念是javaScript非常基础而本质的内容，通过对一门编程语言底层封装的一些内容、概念的深入研究。我们可以逐步接近语言的逻辑，本源，也能更好的理解编译这门语言的人当时的思路，这也算是跨越时空的对话了。

在js代码执行之前，会有一段时间。这段时间是用来给js代码做准备的。那么这段时间，我们称之为预编译时间。而这段预编译时间，编译器干的最重要的事情就是给js代码进行变量提升，函数提升，以及形参实参的统一。

换句话说，女孩子出门游玩之前会有一段时间，这段时间是用来给她自己出去游玩做准备的。这段时间发生的最重要的事就是，化妆，换衣服等等。

预编译期间会将变量声明和函数声明提升到对应作用域的最顶端，只提升声明，不提升值！

如果是全局变量，则提升到全局作用域最顶端。如果是局部的变量，则提升到局部作用域的最顶端。

eg1：
	    oo();function oo(){	console.log(`oo`);}// 此函数为普通函数,这样的函数预解析时有函数提升,所以可以在函数声明之前调用// 如果是下面这种写法,则预解析时，会被转化成上面这样,function oo(){	console.log(`oo`);}oo();
eg2：
		var a = function(){console.log(`哈哈`);}a();// 函数表达式,只能在声明之后调用// 如果是var声明的函数表达式,具有变量提升的特点.但是只会返回undefined,因为只提升声明,不提升值// 如果是let,const声明的函数表达式,则不具备变量提升的特点.这是var特有的// 如果是上面这种写法,则预解析会被转化成下面这样var a;a = function(){console.log(`哈哈`);}a();
我相信js预解析，以及函数提升，变量提升到这应该是说明白了

二、复杂数据类型的传递

本人上一篇博客已经非常详细的解释了形参，实参，以及简单数据的传参。今天看看复杂数据类型的传递。

传参实质就是传实参给形参，最终让形参等于实参即可，形参用来接收实参的值，如此而已。

1.数组

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div onclick="fun([1,2,'hh'],[45,'',47])">兔年大吉</div><script>var a = 1;var b =8;function fun(a,b){console.log(a,b);}fun(a,b); fun(3);</script></body>
</html>

以上代码，我们是将数组[1,2,'hh'],[45,'',47]作为参数，进行传递的。

那么对应的a=[1,2,'hh']，而b=[45,'',47]

这个以数组作为参数传递，只有在点击的时候才会执行

另外一个问题就是，此函数被调用了两次，在不点击调用的情况下，自执行两次。

第一次执行fun（a，b）输出结果为1 8

此时a，b作为形参，而形参a，b两个变量被声明且赋值了，相当于初始化，分别给了a，b一个值，因此打印出来1 8

第二次执行fun（3）输出结果为 3 undefined

这是因为，此时3作为实参，传给形参（a，b），但形参只有一个，而实参有两个。所以相当于给a赋值为3，b只声明未赋值，为undefined

总结：

形参和实参是一一对应关系，如同映射
当实参个数等于形参个数，则输出正确结果
当实参个数多于形参个数，只取形参个数
当实参个数小于形参个数，多出的形参只声明未赋值，属于未定义

2.对象

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div onclick="fn({name:'张三'})">法外狂徒</div><script>function fn(n){console.log(n);}</script></body>
</html>

这个就是点击事件以对象作为实参，进行传参的

当点击div以后，n={name：“张三”}，这是一种变量赋值操作，只不过n没有被声明罢了

3.函数

这里我要重点说明一下

上面这两种写法，是完全不一样的，

A盒子表示将函数fk（）的值作为参数进行传参

B盒子表示将函数fk作为参数进行传参

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div onclick="fm(fk())" >哈哈哈</div><div onclick="fm(fk)" >哈哈哈</div><script>function fk(){console.log(3);return 10;}function fm(result){	console.log(result);console.log( typeof result);							fk()															result()console.log( result.prototype === fk.prototype );}</script>	</body>
</html>

第二个div，在这里将fk函数作为实参进行传参的时候，本质上fk是一个变量；

fk（） = result（）；

result作为形参相当于一个声明,利用变量名调用函数；

result相当于 var result = function fk(){}；

总结

js预解析是非常重要的，这里面注意var与const和let的区别
以数组，对象等数据类型传参，记得注意参数之间存在一一对应关系
可以在调用函数的时候，把括号里面的内容看作实参，但本质上是变量。函数本身有时候也可以理解为未声明的变量，但这仍然需要深度思考。函数是怎么传的，怎么执行的。文章只能给大家作为参考，最重要还是要自己深度思考。

创作不易，如果对你有帮助，希望不吝一键三连。

详解js在事件中，如何传递复杂数据类型（数组，对象，函数）

文章目录前言一、何谓预编译，变量提升？二、复杂数据类型的传递 1.数组2.对象3.函数总结前言在JavaScript这门编程语言学习中，如何传参，什么是变量提升，js代码预编译等等。要想成为一名优秀的js高手，这些内…...

编程日记 2023/4/25 4:25:30

高并发架构第一章大型网站数据演化——核心解释与说明。大型网站技术架构——核心原理与案例分析

大型网站架构烟花发展历程1.1.1初始阶段的网站构架1.1.2应用服务和数据服务分离1.1.3使用缓存改善网络性能1.1.4使用应用服务器集群改善网站的并发处理能力1.1.5数据库读写分离1.1.6使用反向代理和cdn加速网站相应1.1.1初始阶段的网站构架大型网站都是由小型网站一步步发展而…...

编程日记 2023/5/9 2:28:52

在设置virtio接口接收/发送队列函数的最后，更新接口的运行数据。 void virtio_vring_set_rx_queues (vlib_main_t *vm, virtio_if_t *vif) { ...vnet_hw_if_update_runtime_data (vnm, vif->hw_if_index); } void virtio_vring_set_tx_queues (vlib_main_t *vm,…...

编程日记 2023/5/6 15:22:40

RabbitMQ学习（九）：延迟队列

一、延迟队列概念延时队列中，队列内部是有序的，最重要的特性就体现在它的延时属性上，延时队列中的元素是希望在指定时间到了以后或之前取出和处理。简单来说，延时队列就是用来存放需要在指定时间内被处理的元素的队列。其实延迟…...

编程日记 2023/5/6 8:50:38

TCP并发服务器（多进程与多线程）

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 TCP并发服务器（多进程与多线程）1. 多进程并发服务器（1）…...

编程日记 2023/5/3 17:41:45

第1章 Memcached 教程

Memcached是一个自由开源的，高性能，分布式内存对象缓存系统。 Memcached是以LiveJournal旗下Danga Interactive公司的Brad Fitzpatric为首开发的一款软件。现在已成为mixi、hatena、Facebook、Vox、LiveJournal等众多服务中提高Web应用扩展性的重要因素…...

编程日记 2023/5/5 10:32:32

【2022.12.9】Lammps+Python 在计算g6(r)时遇到的问题

目录写在前面绘制g6( r )执行步骤【updated】如何检查图像的正确性：不是编程问题，而是数学问题的一个小bug废稿2则：写在前面全部log： 【2022.11.16】LammpsPythonMATLAB在绘制维诺图时遇到的问题绘制g6( r )执行步骤【updated…...

编程日记 2023/5/9 2:30:27

MySQL使用C语言连接

文章目录MySQL使用C语言连接引入库下载库文件在项目中使用库使用库连接数据库下发SQL请求获取查询结果MySQL使用C语言连接引入库要使用C语言连接MySQL，需要使用MySQL官网提供的库。下载库文件下载库文件首先，进入MySQL官网，选择DEVEL…...

编程日记 2023/5/7 3:08:31

JavaScript随手笔记---比较两个数组差异

💌 所属专栏：【JavaScript随手笔记】 😀 作者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！ &#…...

编程日记 2023/5/4 6:23:02

【C++修炼之路】21.红黑树封装map和set

每一个不曾起舞的日子都是对生命的辜负红黑树封装map和set前言一.改良红黑树的数据域结构1.1 改良后的结点1.2 改良后的类二. 封装的set和map2.1 set.h2.2 map.h三. 迭代器3.1 迭代器封装3.2 const迭代器四.完整代码实现4.1 RBTree.h4.2 set.h4.3 map.h4.4 Test.cpp前言上一节…...

编程日记 2023/5/4 14:15:33

下载ojdbc14.jar的10.2.0.1.0版本的包

一、首先要有ojdbc14.jar包没有的可以去下载一个，我的是从这里下载的ojdbc14.jar下载_ojdbc14.jar最新版下载[驱动包软件]-下载之家， 就是无奈关注了一个公众号，有的就不用下了。二、找到maven的本地仓库的地址我的地址在这里D:\apach…...

编程日记 2023/5/3 20:17:05

关于欧拉角你需要知道几个点

基础理解，参照：https://www.cnblogs.com/Estranged-Tech/p/16903025.html 欧拉角、万向节死锁（锁死）理解一、欧拉角理解举例讲解欧拉角用三次独立的绕确定的轴旋转角度来表示姿态。如下图所示经过三次旋转，旋…...

编程日记 2023/4/25 4:21:21

git ssh配置

ssh配置执行以下命令进行配置 git config --global user.name “这里换上你的用户名” git config --global user.email “这里换上你的邮箱” 执行以下命令生成秘钥： ssh-keygen -t rsa -C “这里换上你的邮箱” 执行命令后需要进行3次或4次确认。直接全部回车就…...

编程日记 2023/5/3 2:04:46

Linux进程概念（三）

环境变量与进程地址空间环境变量什么是环境变量常见环境变量环境变量相关命令环境变量的全局属性PWDmain函数的三个参数进程地址空间什么是进程地址空间进程地址空间，页表，内存的关系为什么存在进程地址空间环境变量什么是环境变量我们所有写的程序都…...

编程日记 2023/4/29 6:51:42

新手福利——x64逆向基础

一、x64程序的内存和通用寄存器随着游戏行业的发展，x32位的程序已经很难满足一些新兴游戏的需求了，因为32位内存的最大值为0xFFFFFFFF，这个值看似足够，但是当游戏对资源需求非常大，那么真正可以分配的内存就显得捉襟…...

编程日记 2023/5/5 23:41:11

虚幻c++中的细节之枚举类型（enum）

文章目录前言一、原生c的枚举类型关键字classint8 - 枚举的基础类型（underlying type）二、枚举类型的灵活运用位运算枚举循环遍历三、虚幻风格的枚举类型UENUMUMETATEnumAsByte总结前言虚幻引擎中的代码部分实现了一套反射机制，为c代码带了…...

编程日记 2023/5/4 23:58:54

判断某个字符串在另一个字符串中的个数

/** * 用于判断字符串中字符的个数 * * param str1 原字符串 * param str2 需要判断的字符 * return 返回有几个 */ private int getCount(String str1, String str2) { //获取两个字符串的长度 int oneLength str1.length(); int toLength str2.length(); //定义两个整数&am…...

编程日记 2023/4/2 9:39:34

测试人员如何运用好OKR

在软件测试工作中是不是还不知道OKR是什么?又或者每次都很害怕写OKR?或者总觉得很迷茫，不知道目标是什么? OKR 与 KPI 的区别去年公司从KPI换OKR之后，我也有一段抓瞎的过程，然后自己找了两本书看，一本是《OKR工作法》&#xf…...

编程日记 2023/5/4 3:09:46

CentOS7 Hive2.3.9 安装部署（mysql 8.0)

一、CentOS7安装MySQL数据库查询载mariadb rpm -qa | grep mariadb卸载mariadb rpm -e --nodeps [查询出来的内容]安装wget为下载mysql准备 yum -y install wget在tools目录下执行以下命令，下载MySQL的repo源： wget -P /tools/ https://dev.mysql.…...

编程日记 2023/5/4 13:18:12

【PTA Advanced】1142 Maximal Clique（C++）

目录题目 Input Specification: Output Specification: Sample Input: Sample Output: 思路代码题目 A clique is a subset of vertices of an undirected graph such that every two distinct vertices in the clique are adjacent. A maximal clique is a clique …...

编程日记 2023/4/24 2:37:10

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。发送模版消息： import requests da…...

编程新知 2025/10/19 4:40:36

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/10/18 6:51:28

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/10/15 2:16:53