js 基础-函数传参

article/2025/3/4 19:01:54

函数中的参数传递是所有编程语言的中的基础内容。本文是介绍了js中保存基本数据类型和引用数据类型的两种方式以及在函数传参的本质。

1 简介

本文介绍了js中两种不同数据类型的数据的保存问题,以及赋值操作的本质,最后指出函数传参就是赋值操作,并用图形的方式介绍了参数传递的过程。

 

本文属于基础内容。你可以先检查看下如下练习题,如果很轻易就可以完成,就不必往下看啦。

2 练习题

以下有6道题。

题1

var a = [1];var b = a;b = [10]console.info(a)console.info(b)

题2

var a = [1];var b = a;b[1] = 10console.info(a)console.info(b)

题3

var a = [1];function f(a){    a = [10]}f(a);console.info(a)

题4​​​​​​​

var a = 1;function f(a){    a = 10}f(a);console.info(a)

题5​​​​​​​

var a = [1];function f(a){    a[1] = 10}f(a);console.info(a)

题6​​​​​​​

var a = [1];function f(a){    a[1] = 10    a = 3;}f(a);console.info(a)

答案:

题1:a:[1], b: [10]

题2:a:[1,10], b: [1,10]

题3:a:[1]

题4:a: 1

题5:a: [1,10]

题6:a: [1,10]

3 内容

•数据的保存方式•赋值运算符的含义•参数传递的本质•例题讲解

4 数据的保存方式

js中的数据类型分成两大类:基本数据类型和引用数据类型。不论是何种数据类型都需要有一个地方把数据的内容保存下来,在我们给变量赋值的过程中,就是在做保存的过程。

在如下两行代码中,我们分别把一个基本数据类型的数据和引用类型的数据保存在两个变量中,​​​​​​​

var a = [10];var b = 1;

我们先回顾数据保存的方式:

(1)基本数据类型的类型保存在栈区;

(2)引用数据类型的数据要用到两个区域:在栈区保存的是一个地址信息,而在堆区保存着真正的数据,这个堆区的地址就在栈区中保存着。

 

所以上面两句代码对应的效果是:

 

5 赋值运算符的含义

赋值运算符是我们最常用的运算符:= 。当我们在写一个赋值运算符时,其实背后的工作还是很多的。=的左边是变量(或者是常量),而等号的右边的情况会复杂一些:

  • 是值

  • 是变量

  • 是函数

5.1 右边是值

varName = value;

它表示把等号右边的值保存到等号左边的变量(或者是常量)中。

背后做的事有:

1.检查等号左边的这个变量是否存在。如果不存在,是否允许创建这个变量。这一步没有问题了,再去看右边。

      2.把右边的值找个地方存起来,此时就要根据右边的值是引用类型还是基本数据类型来决定如何去保存它了,如果是基本数据类型,则直接保存在栈区;如果是引用类型,则先在堆区中保存数据,再把地址保存在栈区。

 

 

5.2 右边是变量

varName = var1;

它表示把等号右边的变量中保存的值赋值到等号左边的变量(或者是常量)中。是直接把栈区中的保存的内容进行赋值。

5.3 右边是函数调用

varName = 函数调用();

先把函数执行完成,再把函数的返回值保存在左边的变量中。​​​​​​​

var obj ={}function f(){   alert(1) }obj.a.b = f(); //这里会报错,因为obj.a不存在。

如上代码中可以发现,虽然第5句代码不能正确赋值,但函数f还是执行了的。

5.4 例子

我们来看一个简单的例子:​​​​​​​

var a = [1];var b = a; // 注意这一句

以上的赋值操作是把变量a在栈区的内容保存到了变量b中,所以导致a,b指向同一个数组。

 

接下来,给通过下标给b赋值​​​​​​​

var a = [1];var b = a; b[1] = 10; // 把10保存在第二个元素中。

结果如下:

很明显,数组的内容发生了变化。

 

再接下来,重新给b赋值

​​​​​​​

var a = [1];var b = a; b[1] = 10; b = [10]; // 把数组保存在b中

 

b=[10] 的运行结果是:

(1)找个地方保存数组,由于数组是引用数据类型,所以需要栈区和堆区一起配合。

(2)把地址保存在变量b中。从a,b不再指向同一个数组,它们从此是路人。

6 函数中的参数传递

6.1 本质

在函数的调用过程中,存在传值的过程 具体来说,是实参的值传给形参。

 

我们可以这样来理解这个过程:

•函数的形参就是函数内部定义的局部变量。•实参传递给形参的过程就是一个赋值过程。•函数调用结束后,局部变量会被回收。

 

6.2 例子

下面来看一个例子​​​​​​​

var a = [1];function f(a){    a[1] = 10    a = [10]}f(a);console.info(a)

分步骤来讲解这个过程。

初始情况下:

在调用f(a)时,相当于是做了一次赋值操作:把全局变量a的值赋值给局部变量a(赋值的内容是栈中的内容),结果是它们指一个数组。

 

 

 

下面执行函数体中的第一句:

下面执行函数体中的第二句:

 

 

最后一步:

函数调用结束,释放函数中的变量及对应的空间。

 

函数调用完毕,释放空间。局部变量a,及f-堆中的数组全回收了。此时访问的a是全局变量。

7 小结

•基本数据类型只需要用到栈区;引用数据类型需要用到栈区和堆区;•赋值是把右边的值保存到左边的变量中;赋值的过程中传递的栈区的内容;•函数中的形参相当于函数内部的局部变量 ;实参传给形参的过程就是赋值的过程;•函数调用完成后,它的局部变量会随之销毁,除非遇到特殊情况(例如闭包)


http://chatgpt.dhexx.cn/article/p4x2qVfQ.shtml

相关文章

php获取qq音乐的api类,利用QQ音乐api集成的php歌曲搜索

获取最新音乐 url: https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?uin0&notice0&platformh5&needNewCode1&tpl3&pagedetail&typetop&topid27 获取推荐歌曲 url: https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.…

Vue之跨域调用网易云音乐API及QQ音乐API

今天在做VUE项目的时候,发现调用QQ音乐轮播图的API一直失败,timeout真的不是我网络的问题,在客厅对着路由器调了一整天都是报错,我还以为是API失效了,但其实没有........晚上突然又可以获取了 但总不能不写轮播图吧&am…

MusicBee 歌词插件(基于QQ音乐API)

MusicBee 歌词插件(基于QQ音乐API) MusicBee 是一个很棒的免费音乐管理、播放软件,支持通过插件来扩展功能。然而 MusicBee 在初始情况下仅对外国的几个歌词数据库进行检索,得到的结果一般是不带时间轴的纯文本歌词,并…

php开发个人音乐站 QQ音乐api

做位一名优秀的程序员 工作时候戴耳机是不可避免的 然后好听的歌又需要会员 下面小编就给大家简绍我自己听歌的神器 话不多说 开撸! 一,要想获得对应的歌曲肯定要先获得歌曲的id,图片id等 下面主要讲解如何获取歌曲播放id; 1.搜索歌曲API&a…

python调用QQ音乐API

python调用QQ音乐API 1. 音乐搜索接口、其他接口 2. 获取token 3. 拼接播放地址 先上一份代码: import requests import pprint import json from selenium import webdriver# 音乐搜索接口p, n, w 1, 5, 碰 url_1 https://c.y.qq.com/soso/fcgi-bin/client_…

php计算QQ音乐guid,QQ音乐API分析2017

官网提供API 说明:此API主要针对移动端直接调用QQ音乐API用,API只能在QQAPP内执行,上线时间尚短。 http://y.qq.com/m/api/api.html 自己分析的API 说明: 根据官网https://y.qq.com/分析的API,经过测试,可以…

java qq音乐接口 api,GitHub - yan123zi/qqMusicApi: qq音乐Api接口

qq音乐 API qq音乐 Node.js API service QQ音乐API koa2 版本, 通过Web网页版请求QQ音乐接口数据, 有问题请提 issue 当前代码仅共学习,不可做商业用途 API结构图 环境要求 因为本项目采用的是koa2, 所以请确保你的node版本是7.6.0 node -v 📦 安装 git…

QQ音乐API整理

最近准备用vue做个音乐播放器,网上找了找音乐API,看了一圈,还是QQ音乐最合适,这里做个整理 这篇博客已经过时了,下面的不用看了。。。。 歌曲搜索 接口地址 var num 3,name 王菲,urlString http://s.music.qq.co…

网易云音乐api、QQ音乐api、黑马电商api、小说api、漫画api接口

网易云音乐接口文档 基础访问地址(api的跟地址):https://autumnfish.cn/ 接口文档地址:https://binaryify.github.io/NeteaseCloudMusicApi/ QQ音乐接口文档 基础访问地址(api的跟地址):http…

QQ音乐API

** QQ音乐API ** 效果图: URL: 通过这条接口查找到这10条歌曲每一条的Songmid https://c.y.qq.com/soso/fcgi-bin/client_search_cp?aggr=1&cr=1&flag_qc=0&p=1&n=10&w=邓紫棋; 这条链接获取到QQ音乐当前使用的地址(QQ音乐不定期换地址,本人跳过这…

2019最新版QQ音乐api调用(原创)

下载QQ音乐任意歌曲方法: 1.首先在QQ音乐任意播放页面 2.进入开发者模式按F12即可 3.选择network,按ctrlR进行筛选多媒体文件 4.优先选择大小排序右击最大的多媒体文件出来快捷菜单,选择如下图的选项即可进入歌曲播放页面 5.如下链接就是播放…

QQ音乐api 最新版,亲测可用

关注公众号,每天都能领红包 最近这个api出现了403问题,已经找到原因了 原因是 歌曲不能再以第一参数当id了 要以倒数第5个 如以上的例子 002qU5aY3Qu24y当id,而且前面要加C100,完整的就是 http://ws.stream.qqmusic.qq.com/C1000…

Java版本中最好用的网易云音乐、qq音乐api请求工具,你还在忙于如何使用java调音乐api?来看下这里的实现

去年闲着没事干,就封装了下面QQ和Netease音乐的 api ,目的就是通过java可以更便捷的调用,网易云音乐或者qq音乐的api,另外每个接口我都加了注释,对于不懂的参数,通过接口上的注释直接可以查看,不…

QQ音乐API爬取全过程

QQ音乐API爬取全过程 1. 前序: 在以前的QQ音乐的API爬取中,是非常容易的,采用的是jsonp的请求方式,但现在QQ音乐请求已经全部改成XHR的ajax的方式发送请求,所以要爬取QQ音乐的数据就需要破解QQ音乐发送请求的参数。 …

QQ音乐API分析之-加密参数分析(sign计算)

QQ音乐API加密参数分析 1、背景2、QQ音乐sign计算3、Java代码实现4、总结 1、背景 不知道什么时候开始,各家音乐APP都开始对API进行加密,最近一段时间对六大音乐平台的加密算法进行了研究,逆向了网页端、安卓端等等,已经掌握了各…

微信小程序使用QQ音乐API完整实例

微信小程序使用QQ音乐API完整实例 一、QQ音乐常用API接口:1.1、音乐搜索接口:1.2、最新音乐排行榜top1001.3. 随机推荐 二、请求数据格式(以搜索为例)三、播放链接(重点)3.1、获取歌曲信息3.2 获取token3.3…

音乐播放器之QQ音乐最新api,亲测可用

大家好,前段时间重写了自己的音乐播放器,源码放在github上,源码地址和项目地址下面都有,如果喜欢记得star一下哈。 由于之前给大家分享的api虽然可以用,但是版本太旧了,很多也没有了歌词,今天博…

步数精灵v3.0运动安卓版

软件介绍: 一键修改微信运动、支付宝运动的步数,让你在家足不出户也能走几万步,天天霸占好友排行榜首位! 软件预览图: 软件版本号:3.0 软件是否收费:免费软件/共享软件 运行环境:安卓 软件…

艾出行广告精灵挂机源码+对接码支付即时到账+充值系统+推广下级系统+封装app

简介: 安装说明:请使用win系统 apache php5.6 mysql5.6 进行安装。 1、上传到网站根目录 2、用phpMyadmin导入数据库文件.sql 3、修改数据库链接文件 /APP/Conf/config.php (记得不要用记事本修改,否则可能会出现验证码显示不了问…

支付平台架构:终端安全技术实现

前蚂蚁集团宣布即将IPO之后,9月11日晚间,以金融支付起家的京东数科也要上市了。近年来,第三方支付业务的资金规模不断扩大,支付业务量稳步增长,“第三方支付”及“移动支付”已成为年度搜索热词,支付平台作…