【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>

执行结果 :

相关推荐
会跑的葫芦怪27 分钟前
若依Vue 项目多子路径配置
前端·javascript·vue.js
兩尛35 分钟前
c++知识点2
开发语言·c++
fengfuyao98539 分钟前
海浪PM谱及波形的Matlab仿真实现
开发语言·matlab
xiaoye-duck1 小时前
C++ string 底层原理深度解析 + 模拟实现(下)——面试 / 开发都适用
开发语言·c++·stl
xiaoqi9221 小时前
React Native鸿蒙跨平台如何进行狗狗领养中心,实现基于唯一标识的事件透传方式是移动端列表开发的通用规范
javascript·react native·react.js·ecmascript·harmonyos
jin1233222 小时前
React Native鸿蒙跨平台剧本杀组队消息与快捷入口组件,包含消息列表展示、快捷入口管理、快捷操作触发和消息详情预览四大核心功能
javascript·react native·react.js·ecmascript·harmonyos
Hx_Ma162 小时前
SpringMVC框架提供的转发和重定向
java·开发语言·servlet
期待のcode3 小时前
原子操作类LongAdder
java·开发语言
烬头88213 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
pas1363 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js