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

JavaScript 简单类型与复杂类型

在JavaScript中,根据数据存储的方式不同,变量可以分为两大类:简单类型(也称为基本数据类型或原始类型)和复杂类型(也称为引用数据类型)。理解这两者的区别对于编写高效且无误的代码至关重要。本文将详细介绍JavaScript中的简单类型和复杂类型,并探讨它们各自的特性及其应用场景。

简单类型(基本数据类型)

简单类型是指那些直接存储在栈内存中的数据类型,其值直接存储在变量的位置上。JavaScript中有六种简单类型:

  • undefined
  • null
  • boolean
  • number
  • string
  • symbol (ES6新增)

特性

  1. 按值传递:当简单类型的值被作为参数传递给函数时,实际上是创建了一个副本,这意味着对参数的任何修改都不会影响原始值。

    function changeValue(x) {x = 10;
    }
    let a = 5;
    changeValue(a);
    console.log(a); // 输出: 5
  2. 比较方式:两个简单类型的变量通过===运算符进行比较时,只有当两者的内容完全相同时才会返回true

    console.log(5 === 5); // 输出: true
    console.log('hello' === 'hello'); // 输出: true

常见用法

  • 布尔值用于控制流程(如条件语句和循环)。
  • 数字用于数学计算。
  • 字符串用于文本处理。
  • **未定义(undefined)**表示尚未赋值的变量。
  • **空值(null)**表示有意设置为空的值。
  • **符号(Symbol)**提供了一种创建唯一标识符的方法,通常用于对象属性键。

复杂类型(引用数据类型)

复杂类型指的是那些存储在堆内存中的数据类型,变量实际上保存的是指向实际数据的一个引用地址。JavaScript中最常见的复杂类型包括:

  • Object
  • Array
  • Function
  • 其他自定义对象

特性

  1. 按引用传递:当一个复杂类型的值被作为参数传递给函数时,传递的是该对象的引用地址而不是副本。因此,在函数内部对该对象所做的任何更改都会反映到原始对象上。

    function modifyObject(obj) {obj.name = "World";
    }
    let obj = { name: "Hello" };
    modifyObject(obj);
    console.log(obj.name); // 输出: World
  2. 比较方式:两个复杂类型的变量通过===运算符进行比较时,只有当两者引用的是同一个对象时才会返回true

    let obj1 = { name: "Alice" };
    let obj2 = obj1;
    console.log(obj1 === obj2); // 输出: truelet obj3 = { name: "Alice" };
    console.log(obj1 === obj3); // 输出: false

常见用法

  • 对象用于封装数据和方法,支持面向对象编程。
  • 数组用于存储有序的数据集合。
  • 函数不仅可以作为过程调用,还可以作为一等公民被赋值给变量、作为参数传递或返回值。

实际应用案例

案例1:简单类型的比较

let num1 = 10;
let num2 = 10;
console.log(num1 === num2); // 输出: truelet str1 = "test";
let str2 = "test";
console.log(str1 === str2); // 输出: true

案例2:复杂类型的比较

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
console.log(arr1 === arr2); // 输出: falselet obj1 = { key: "value" };
let obj2 = obj1;
console.log(obj1 === obj2); // 输出: true

案例3:浅拷贝 vs 深拷贝

由于复杂类型是按引用传递的,直接赋值不会复制对象本身,而是复制了引用。为了创建对象的独立副本,我们需要使用深拷贝技术。

let original = { a: 1, b: { c: 2 } };
let shallowCopy = Object.assign({}, original);
let deepCopy = JSON.parse(JSON.stringify(original));original.b.c = 3;console.log(shallowCopy.b.c); // 输出: 3
console.log(deepCopy.b.c);    // 输出: 2

结语

感谢您的阅读!如果你有任何问题或想分享自己的经验,请在评论区留言交流!

相关文章:

JavaScript 简单类型与复杂类型

在JavaScript中,根据数据存储的方式不同,变量可以分为两大类:简单类型(也称为基本数据类型或原始类型)和复杂类型(也称为引用数据类型)。理解这两者的区别对于编写高效且无误的代码至关重要。本…...

AI绘画软件Stable Diffusion详解教程(1):Windows系统本地化部署操作方法(专业版)

一、事前准备 1、一台配置不错的电脑,英伟达显卡,20系列起步,建议显存6G起步,安装win10或以上版本,我的显卡是40系列,16G显存,所以跑大部分的模型都比较快; 2、科学上网&#xff0…...

大白话Vue 双向数据绑定的实现原理与数据劫持技术

咱们来好好唠唠Vue双向数据绑定的实现原理和数据劫持技术,我会用特别通俗的例子给你讲明白。 啥是双向数据绑定 你可以把双向数据绑定想象成一个神奇的“同步器”。在网页里有两部分,一部分是数据,就像你记在小本本上的信息;另一…...

VUE 获取视频时长,无需修改数据库,前提当前查看视频可以得到时长

第一字段处 <el-table-column label"视频时长" align"center"> <template slot-scope"scope"> <span>{{ formatDuration(scope.row.duration) }}</span> </template> </el-ta…...

antv G6绘制流程图

效果图&#xff08;优点&#xff1a;可以自定义每一条折线的颜色&#xff0c;可以自定义节点的颜色&#xff0c;以及折线的计算样式等&#xff09;&#xff1a; 代码&#xff1a; <!-- 流程图组件 --> <template><div id"container"></div>…...

完美隐藏滚动条方案 (2024 最新验证)

完美隐藏滚动条方案 (2024 最新验证) css /* 全局隐藏竖直滚动条但保留滚动功能 */ html {overflow: -moz-scrollbars-none; /* Firefox 旧版 */scrollbar-width: none; /* Firefox 64 */-ms-overflow-style: none; /* IE/Edge */overflow-y: overlay; …...

单片机的串口(USART)

Tx - 数据的发送引脚&#xff0c;Rx - 数据的接受引脚。 串口的数据帧格式 空闲状态高电平&#xff0c;起始位低电平&#xff0c;数据位有8位校验位&#xff0c;9位校验位&#xff0c;停止位是高电平保持一位或者半位&#xff0c;又或者两位的状态。 8位无校验位传输一个字节…...

实现分布式限流开源项目

以下是10个可以实现分布式限流中间件的开源项目推荐&#xff0c;这些项目基于不同的技术栈&#xff0c;适用于多种应用场景&#xff1a; 1. **Alibaba Sentinel** Sentinel 是阿里巴巴开源的分布式限流中间件&#xff0c;支持多种限流策略&#xff08;如QPS、并发线程数等…...

递归构建行政区域树(二)

概述 这篇博客中构建出的行政区域树利用element-ui的Tree组件展示出来。 实现 源码位于码云&#xff0c;欢迎点击哦。 项目结构 最后 好久没写基于element-ui的项目了&#xff0c;都有点生疏了。 好了&#xff0c;如果对你有帮助&#xff0c;欢迎点个免费的赞哦。...

AR技术下的电商:虚拟试穿/试用/试戴成新风尚

随着科技的日新月异&#xff0c;增强现实&#xff08;AR&#xff09;技术正悄然改变着我们的生活&#xff0c;尤其在电子商务领域&#xff0c;AR技术的融入正掀起一场前所未有的变革。那么&#xff0c;AR技术究竟是何方神圣&#xff1f;它在电商领域又展现出了哪些非凡的应用呢…...

社群团购平台的愿景构建与开源链动2+1模式S2B2C商城小程序应用探索

摘要&#xff1a;在数字经济背景下&#xff0c;社群团购作为一种新兴的商业模式&#xff0c;凭借其独特的互动性和便捷性&#xff0c;展现出巨大的市场潜力。本文旨在探讨社群团购平台愿景的构建策略&#xff0c;并结合开源链动21模式S2B2C商城小程序的应用&#xff0c;为创业者…...

笔记20250225

关于上拉电阻和下拉电阻的作用 原理 上拉电阻&#xff1a;在上拉电阻所连接的导线上&#xff0c;如果外部组件未启用&#xff0c;上拉电阻则“微弱地”将输入电压信号“拉高”。当外部组件未连接时&#xff0c;对输入端来说&#xff0c;外部“看上去”就是高阻抗的&#xff0c…...

【项目】基于Boost自主实现搜索引擎

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 &#x1f525; 所属专栏&#xff1a;Linux系统编程 这里将会不定期更新有关Linux的内容&#xff0c;欢迎大家点赞&#xff0c;收藏&#xff0c;评论&#x1f973;&#x1f973;&#x1f389;&#x1f389;&#x1f389; 文章目…...

使用 Open3D 批量渲染并导出固定视角点云截图

一、前言 在三维点云处理与可视化中&#xff0c;固定视角批量生成点云渲染截图是一个常见的需求。例如&#xff0c;想要将同一系列的点云&#xff08;PCD 文件&#xff09;在同样的视角下生成序列图片&#xff0c;以便后续合成为视频或进行其他可视化演示。本文将介绍如何使用…...

汽车无钥匙进入一键启动操作正确步骤

汽车智能无钥匙进入和一键启动的技术在近年来比较成熟&#xff0c;不同车型的操作步骤可能略有不同&#xff0c;但基本的流程应该是通用的&#xff0c;不会因为时间变化而有大的改变。 移动管家汽车一键启动无钥匙进入系统通常是通过携带钥匙靠近车辆&#xff0c;然后触摸门把…...

JMeter 的基础知识-安装部分

以下将从环境配置开始,为你详细介绍 JMeter 的基础知识,涵盖环境搭建、界面认知、测试计划创建、常用组件使用等方面内容。 1. 环境配置 1.1 安装 Java JMeter 是基于 Java 开发的,所以需要先安装 Java 开发工具包(JDK)。 下载 JDK:访问 Oracle 官方网站(https://www…...

解决后端跨域问题

目录 一、什么是跨域问题&#xff1f; 1、跨域问题的定义 2、举例 3、为什么会有跨域问题的存在&#xff1f; 二、解决跨域问题 1、新建配置类 2、编写代码 三、结语 一、什么是跨域问题&#xff1f; 1、跨域问题的定义 跨域问题&#xff08;Cross-Origin Resource Sh…...

补题A-E Codeforces Round 953 (Div. 2)

https://codeforces.com/contest/1979 A. Guess the Maximum 原题链接&#xff1a;https://codeforces.com/contest/1979/problem/A 求相邻元素的最大值的最小值。 #include <bits/stdc.h> using namespace std; #define IOS ios::sync_with_stdio(0), cin.tie(0), cout…...

【WordPress】发布文章时自动通过机器人推送到钉钉

在您的主题下functions.php中添加如下代码&#xff1a; function wpso_dingding_publish_notify($post_ID) {// 获取文章对象$post get_post($post_ID);// 检查是否是文章首次发布&#xff08;即不是修订版&#xff09;if (get_post_status($post_ID) publish && !g…...

鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影)

鸿蒙开发深入浅出04&#xff08;首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影&#xff09; 1、效果展示2、ets/pages/Home.ets3、ets/views/Home/SearchBar.ets4、ets/views/Home/NavList.ets5、ets/views/Home/TileList.ets6、ets/views/Home/PlanList.ets7、后端…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...