JavaScript 简单类型与复杂类型
在JavaScript中,根据数据存储的方式不同,变量可以分为两大类:简单类型(也称为基本数据类型或原始类型)和复杂类型(也称为引用数据类型)。理解这两者的区别对于编写高效且无误的代码至关重要。本文将详细介绍JavaScript中的简单类型和复杂类型,并探讨它们各自的特性及其应用场景。
简单类型(基本数据类型)
简单类型是指那些直接存储在栈内存中的数据类型,其值直接存储在变量的位置上。JavaScript中有六种简单类型:
undefinednullbooleannumberstringsymbol(ES6新增)
特性
-
按值传递:当简单类型的值被作为参数传递给函数时,实际上是创建了一个副本,这意味着对参数的任何修改都不会影响原始值。
function changeValue(x) {x = 10; } let a = 5; changeValue(a); console.log(a); // 输出: 5 -
比较方式:两个简单类型的变量通过
===运算符进行比较时,只有当两者的内容完全相同时才会返回true。console.log(5 === 5); // 输出: true console.log('hello' === 'hello'); // 输出: true
常见用法
- 布尔值用于控制流程(如条件语句和循环)。
- 数字用于数学计算。
- 字符串用于文本处理。
- **未定义(undefined)**表示尚未赋值的变量。
- **空值(null)**表示有意设置为空的值。
- **符号(Symbol)**提供了一种创建唯一标识符的方法,通常用于对象属性键。
复杂类型(引用数据类型)
复杂类型指的是那些存储在堆内存中的数据类型,变量实际上保存的是指向实际数据的一个引用地址。JavaScript中最常见的复杂类型包括:
ObjectArrayFunction- 其他自定义对象
特性
-
按引用传递:当一个复杂类型的值被作为参数传递给函数时,传递的是该对象的引用地址而不是副本。因此,在函数内部对该对象所做的任何更改都会反映到原始对象上。
function modifyObject(obj) {obj.name = "World"; } let obj = { name: "Hello" }; modifyObject(obj); console.log(obj.name); // 输出: World -
比较方式:两个复杂类型的变量通过
===运算符进行比较时,只有当两者引用的是同一个对象时才会返回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、科学上网࿰…...
大白话Vue 双向数据绑定的实现原理与数据劫持技术
咱们来好好唠唠Vue双向数据绑定的实现原理和数据劫持技术,我会用特别通俗的例子给你讲明白。 啥是双向数据绑定 你可以把双向数据绑定想象成一个神奇的“同步器”。在网页里有两部分,一部分是数据,就像你记在小本本上的信息;另一…...
VUE 获取视频时长,无需修改数据库,前提当前查看视频可以得到时长
第一字段处 <el-table-column label"视频时长" align"center"> <template slot-scope"scope"> <span>{{ formatDuration(scope.row.duration) }}</span> </template> </el-ta…...
antv G6绘制流程图
效果图(优点:可以自定义每一条折线的颜色,可以自定义节点的颜色,以及折线的计算样式等): 代码: <!-- 流程图组件 --> <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 - 数据的发送引脚,Rx - 数据的接受引脚。 串口的数据帧格式 空闲状态高电平,起始位低电平,数据位有8位校验位,9位校验位,停止位是高电平保持一位或者半位,又或者两位的状态。 8位无校验位传输一个字节…...
实现分布式限流开源项目
以下是10个可以实现分布式限流中间件的开源项目推荐,这些项目基于不同的技术栈,适用于多种应用场景: 1. **Alibaba Sentinel** Sentinel 是阿里巴巴开源的分布式限流中间件,支持多种限流策略(如QPS、并发线程数等…...
递归构建行政区域树(二)
概述 这篇博客中构建出的行政区域树利用element-ui的Tree组件展示出来。 实现 源码位于码云,欢迎点击哦。 项目结构 最后 好久没写基于element-ui的项目了,都有点生疏了。 好了,如果对你有帮助,欢迎点个免费的赞哦。...
AR技术下的电商:虚拟试穿/试用/试戴成新风尚
随着科技的日新月异,增强现实(AR)技术正悄然改变着我们的生活,尤其在电子商务领域,AR技术的融入正掀起一场前所未有的变革。那么,AR技术究竟是何方神圣?它在电商领域又展现出了哪些非凡的应用呢…...
社群团购平台的愿景构建与开源链动2+1模式S2B2C商城小程序应用探索
摘要:在数字经济背景下,社群团购作为一种新兴的商业模式,凭借其独特的互动性和便捷性,展现出巨大的市场潜力。本文旨在探讨社群团购平台愿景的构建策略,并结合开源链动21模式S2B2C商城小程序的应用,为创业者…...
笔记20250225
关于上拉电阻和下拉电阻的作用 原理 上拉电阻:在上拉电阻所连接的导线上,如果外部组件未启用,上拉电阻则“微弱地”将输入电压信号“拉高”。当外部组件未连接时,对输入端来说,外部“看上去”就是高阻抗的,…...
【项目】基于Boost自主实现搜索引擎
🔥 个人主页:大耳朵土土垚 🔥 所属专栏:Linux系统编程 这里将会不定期更新有关Linux的内容,欢迎大家点赞,收藏,评论🥳🥳🎉🎉🎉 文章目…...
使用 Open3D 批量渲染并导出固定视角点云截图
一、前言 在三维点云处理与可视化中,固定视角批量生成点云渲染截图是一个常见的需求。例如,想要将同一系列的点云(PCD 文件)在同样的视角下生成序列图片,以便后续合成为视频或进行其他可视化演示。本文将介绍如何使用…...
汽车无钥匙进入一键启动操作正确步骤
汽车智能无钥匙进入和一键启动的技术在近年来比较成熟,不同车型的操作步骤可能略有不同,但基本的流程应该是通用的,不会因为时间变化而有大的改变。 移动管家汽车一键启动无钥匙进入系统通常是通过携带钥匙靠近车辆,然后触摸门把…...
JMeter 的基础知识-安装部分
以下将从环境配置开始,为你详细介绍 JMeter 的基础知识,涵盖环境搭建、界面认知、测试计划创建、常用组件使用等方面内容。 1. 环境配置 1.1 安装 Java JMeter 是基于 Java 开发的,所以需要先安装 Java 开发工具包(JDK)。 下载 JDK:访问 Oracle 官方网站(https://www…...
解决后端跨域问题
目录 一、什么是跨域问题? 1、跨域问题的定义 2、举例 3、为什么会有跨域问题的存在? 二、解决跨域问题 1、新建配置类 2、编写代码 三、结语 一、什么是跨域问题? 1、跨域问题的定义 跨域问题(Cross-Origin Resource Sh…...
补题A-E Codeforces Round 953 (Div. 2)
https://codeforces.com/contest/1979 A. Guess the Maximum 原题链接: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中添加如下代码: function wpso_dingding_publish_notify($post_ID) {// 获取文章对象$post get_post($post_ID);// 检查是否是文章首次发布(即不是修订版)if (get_post_status($post_ID) publish && !g…...
鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影)
鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影) 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、后端…...
业务系统对接大模型的基础方案:架构设计与关键步骤
业务系统对接大模型:架构设计与关键步骤 在当今数字化转型的浪潮中,大语言模型(LLM)已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中,不仅可以优化用户体验,还能为业务决策提供…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
