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

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

news 2026/2/7 15:33:55

文章目录

  • 前言
  • 一、何谓预编译，变量提升？
  • 二、复杂数据类型的传递
    • 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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/5 15:43:28

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2026/2/6 3:59:37

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/31 5:06:34

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/12/7 12:35:20

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23