【JavaScript】简单数据类型 与 复杂数据类型 ② ( 简单数据类型参数传递 | 复杂数据类型参数传递 )

文章目录

一、简单数据类型参数传递


1、值传递

简单数据类型 的 参数传递时 , 将 该类型的比变量 或 值 作为 实参 传递给 函数形参 时 ,

其本质是 将 栈内存 中存储的 数据值 复制了一份 , 传递给了形参 , 传递的是数据值的副本 ,

在函数内 , 不管如何修改形参 , 都不会影响 栈内存 中存储的 数据值 ( 实参 ) ;

2、代码示例

代码示例 : 下面的代码中 , changeNumber 函数接收一个 number 类型的变量 , 这是简单数据类型 , 函数 实参 传递给 形参 时 , 传递的是数据值 , 只是值的副本 , 在函数内部修改形参的值 , 不会影响外部被传入的变量值 ;

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 定义函数 , 接收简单数据类型形参
        function changeNumber(num) {
            // 函数内修改形参
            num = num + 1;
            // 打印形参修改结果
            // 输出:3 
            console.log(num);
        }

        // 外部的简单数据类型变量
        let originalNumber = 2;
        // 函数实参传递给形参
        changeNumber(originalNumber);
        // 打印外部变量
        // 输出 : 2
        console.log(originalNumber);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

二、复杂数据类型参数传递


1、引用传递

如果将 复杂数据类型 传递给函数 , 传递的是该数据的引用 , 也就是地址 ;

传递的地址 是 栈内存中 存储的数据 , 实际的数据在 地址指向的堆内存中 ;

在 函数内部 修改 复杂数据类型 形参时 , 会改变函数外部的 变量值 ;

2、代码示例

代码示例 :

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 定义函数 , 接收复杂数据类型形参
        function changeArray(arr) {
            // 修改数组数据, 向数组中添加一个元素
            arr.push(3);
            // 输出:(3) [1, 2, 3]
            console.log(arr);
        }

        // 创建数组对象
        let originalArray = [1, 2];
        // 函数引用传递
        changeArray(originalArray);
        // 输出:(3) [1, 2, 3]
        console.log(originalArray);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

相关推荐
excel2 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒9 分钟前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
光军oi10 分钟前
全栈开发杂谈————JAVA微服务全套技术栈详解
java·开发语言·微服务
帮帮志10 分钟前
目录【系列文章目录】-(关于帮帮志,关于作者)
java·开发语言·python·链表·交互
勇往直前plus27 分钟前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
Never_Satisfied29 分钟前
在JavaScript / HTML中,Chrome报错此服务器无法证实它就是xxxxx - 它的安全证书没有指定主题备用名称
javascript·chrome·html
艾小码33 分钟前
零基础学JavaScript:手把手带你搭建环境,写出第一个程序!
javascript
qiuiuiu41333 分钟前
正点原子RK3568学习日记-GIT
linux·c语言·开发语言·单片机
草莓熊Lotso35 分钟前
《C++ STL list 完全指南:从基础操作到特性对比,解锁链表容器高效用法》
开发语言·c++·list
二王一个今1 小时前
Python打包成exe(windows)或者app(mac)
开发语言·python·macos