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

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

news 2025/6/20 22:20:14

文章目录

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/6/20 12:22:12

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/6/19 11:25:56

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/6/16 14:20:23

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/6/19 5:54:07

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/6/15 11:32:04

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/6/17 7:48:57

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/6/17 11:03:48

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/6/18 3:37:27

Kubernetes 节点自动伸缩（Cluster Autoscaler）原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

编程新知 2025/6/17 18:01:25

Qt Quick Controls模块功能及架构

Qt Quick Controls是Qt Quick的一个附加模块&#xff0c;提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中&#xff0c;这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构&#xff0c;与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...

编程新知 2025/6/16 20:34:45