前端基础知识点:JS中的参数传递详解

article/2025/3/4 19:30:05

JS语法中的传递参数,对于初学者是一个非常重要的概念。很多小伙伴在学习“值传递”和“引用传递”时,会有不少烦恼。今天我们就来通过各种姿势全方位剖析JS中的值传递。

本文章将会用10分钟时间无死角的解析JS的传参方式,希望能对您有所帮助。

先说结论,JS只有值传递,没有引用传递。这句话可能会颠覆一些小伙伴的认知,但请先别急,马上你将会赞同我。

  1. 值传递是什么?
    在函数传参的过程中,实参将数值传递给形参。
EXP:
function fun(x) {console.log(x);
}
let a = 123;
fun(a);

运行结果;
在这里插入图片描述

在fun(a)这个函数调用语句中,实参为a、形参为x,从输出结果来看,可以证明实参a将数值123传给了形参x。

疑问:是否可以通过形参x数值的修改,来改变实参a的值?

EXP:
function fun(x) {x = 666;
}
let a = 123;
fun(a);
console.log(a);

运行结果:
在这里插入图片描述

可以看到实参a的数值并没有因为x的改变而发生变化。是因为值传递的特点决定,咱们接着往下看。
2、值传递的特点:
单向传递,只能将实参的数值传递给形参,不能将形参的值传递给实参。
EXP:
我们希望编写一个交换两个变量数值的函数swap。

function swap(x, y) {let t;t = x;x = y;y = t;
}
let a = 123;
let b = 456;
swap(a, b);
console.log(a, b);

运行结果:
在这里插入图片描述

虽然swap(a, b)被调,但是实参a,b的值并未发生改变。是因为实参a,b与形参x,y在内存中是不同的空间。这里我们引入一个地址的概念。

地址就是内存中的一个编号,等价于我们常说的引用ID(引用ID是优化后的地址)。

可以将内存想象成一栋高楼,那么地址号就是楼房中的某个房间号。
咱们来通过内存模拟一下实参与形参的交换过程。(如下图)假设实参a的地址18,实参b的地址为19。而形参x的地址为20,形参y的地址为21。
在这里插入图片描述

那么在swap函数执行完后。形参x和y的值确实进行了交换,但是由于形参与实参是不同的空间,所以形参x,y的改变,是无法影响到实参a,b的。
在这里插入图片描述

疑问:有没有其他办法可以通过形参改变实参的数值呢?

有,当传递的实参为引用类型时,可以通过形参改变实参所指向空间的数值。

这句话比较难以理解。别急,下面咱们来讨究这个问题。

  1. 内置基本类型与引用类型作为实参的区别:
    首先无论实参是什么类型的数据,实参传递给形参的一定是实参的数值本身。
    通过刚才的swap函数,其实我们已经得出了一个结论:
    当传递的实参为内置基本类型时,形参是无法改变实参的数值。
    而当实参为引用类型数据时,又会又怎样的结果呢?
    EXP:
    我们依然希望编写一个具有交换功能的swap函数,只不过这次swap函数的参数是一个引用类型数据数组。通过swap函数实现数组内部元素的交换。
let arr = [1, 2];
function swap(arr1) {let t;t = arr1[0];arr1[0] = arr1[1];arr1[1] = t;
}
swap(arr);
console.log(arr[0], arr[1]);

运行结果:
在这里插入图片描述

这次确实交换了arr数组中的arr[0],arr[1]两个元素的值。
原因是引用类型在内存中是由两块空间构成的:
咱们依然用内存模拟应用类型数据在内存中的存储方式,20代表一块空间,18代表一块空间。如图所示,18的空间是真正存储数据的空间(new出来的堆空间),20是存储真正数据所在空间的地址。在这里插入图片描述

而在swap函数调用时,实参arr将数值18(也就是new出来空间的地址)传值给形参arr1。也就意味着他们都指向同一块空间,那么在swap函数中操作arr1就等价于操作arr本身。就好比一个房子,有两把钥匙,任意一把钥匙都能打开房子。所以arr数组的数值就会发生交换。
总结:

  1. JS的传参只有值传递,所谓的引用传递本质就是值传递。
  2. 值传递是单向的。
  3. 内置基本类型做为实参时,不能通过形参改变实参的数值。
  4. 引用类型做为实参时,可以通过形参改变实参所指向空间的值。
    思考:(如果有问题,欢迎私聊讨论)

let arr1 = [1, 2];
let arr2 = [3, 4];
function swap(arr1, arr2) {
let t;
t = arr1;
arr1 = arr2;
arr2 = t;
}
swap(arr1, arr2);
console.log(arr1, arr2);

陆荣涛前端学习交流Q群858752519
加群备注:CSDN推荐


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

相关文章

Javascript基础知识(三):函数参数(传参)

1.函数参数分类及使用 上一篇博客已经讲到函数参数有实参和形参两种。 函数参数使用时需要注意以下几点&#xff1a; 1.如果形参有两个赋值&#xff0c;而实参只给了一个值&#xff0c;那么就要把这个值赋予第一个形参.第二个形参没有赋值。 示例&#xff1a; <script&g…

js 基础-函数传参

函数中的参数传递是所有编程语言的中的基础内容。本文是介绍了js中保存基本数据类型和引用数据类型的两种方式以及在函数传参的本质。 1 简介 本文介绍了js中两种不同数据类型的数据的保存问题&#xff0c;以及赋值操作的本质&#xff0c;最后指出函数传参就是赋值操作&#…

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

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

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

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

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

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

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

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

python调用QQ音乐API

python调用QQ音乐API 1. 音乐搜索接口、其他接口 2. 获取token 3. 拼接播放地址 先上一份代码&#xff1a; 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 说明&#xff1a;此API主要针对移动端直接调用QQ音乐API用&#xff0c;API只能在QQAPP内执行&#xff0c;上线时间尚短。 http://y.qq.com/m/api/api.html 自己分析的API 说明&#xff1a; 根据官网https://y.qq.com/分析的API&#xff0c;经过测试&#xff0c;可以…

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

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

QQ音乐API整理

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

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

网易云音乐接口文档 基础访问地址&#xff08;api的跟地址&#xff09;&#xff1a;https://autumnfish.cn/ 接口文档地址&#xff1a;https://binaryify.github.io/NeteaseCloudMusicApi/ QQ音乐接口文档 基础访问地址&#xff08;api的跟地址&#xff09;&#xff1a;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音乐任意歌曲方法&#xff1a; 1.首先在QQ音乐任意播放页面 2.进入开发者模式按F12即可 3.选择network&#xff0c;按ctrlR进行筛选多媒体文件 4.优先选择大小排序右击最大的多媒体文件出来快捷菜单&#xff0c;选择如下图的选项即可进入歌曲播放页面 5.如下链接就是播放…

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

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

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

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

QQ音乐API爬取全过程

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

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

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

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

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

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

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

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

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