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

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

news 2025/12/16 0:12:32

文章目录

  • 前言
  • 一、何谓预编译，变量提升？
  • 二、复杂数据类型的传递
    • 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在事件中，如何传递复杂数据类型（数组，对象，函数）

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

编程日记 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

VPP接口INPUT节点运行数据

在设置virtio接口接收/发送队列函数的最后&#xff0c;更新接口的运行数据。 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学习（九）：延迟队列

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

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

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

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

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

第1章 Memcached 教程

Memcached是一个自由开源的&#xff0c;高性能&#xff0c;分布式内存对象缓存系统。 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】如何检查图像的正确性&#xff1a;不是编程问题&#xff0c;而是数学问题的一个小bug废稿2则&#xff1a;写在前面 全部log&#xff1a; 【2022.11.16】LammpsPythonMATLAB在绘制维诺图时遇到的问题 绘制g6( r )执行步骤【updated…...

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

MySQL使用C语言连接

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

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

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

&#x1f48c; 所属专栏&#xff1a;【JavaScript随手笔记】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#…...

编程日记 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包 没有的可以去下载一个&#xff0c;我的是从这里下载的ojdbc14.jar下载_ojdbc14.jar最新版下载[驱动包软件]-下载之家&#xff0c; 就是无奈关注了一个公众号&#xff0c;有的就不用下了。 二、找到maven的本地仓库的地址 我的地址在这里D:\apach…...

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

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

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

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

git ssh配置

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

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

Linux进程概念（三）

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

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

新手福利——x64逆向基础

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

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

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

文章目录前言一、原生c的枚举类型关键字classint8 - 枚举的基础类型&#xff08;underlying type&#xff09;二、枚举类型的灵活运用位运算枚举循环遍历三、虚幻风格的枚举类型UENUMUMETATEnumAsByte总结前言 虚幻引擎中的代码部分实现了一套反射机制&#xff0c;为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?或者总觉得很迷茫&#xff0c;不知道目标是什么? OKR 与 KPI 的区别 去年公司从KPI换OKR之后&#xff0c;我也有一段抓瞎的过程&#xff0c;然后自己找了两本书看&#xff0c;一本是《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目录下执行以下命令&#xff0c;下载MySQL的repo源&#xff1a; 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

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/12/8 9:12:36

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/12/5 14:12:22

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/12/9 10:21:27

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/12/14 23:17:22

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/12/12 20:29:11