揭开JavaScript数据类型的神秘面纱

🧑‍🎓 个人主页:《爱蹦跶的大A阿》

🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》

​ 

✨ 前言

        JavaScript作为一门动态类型语言,其数据类型一直是开发者们关注的话题。本文将深入探讨JavaScript中的数据类型,揭开这块神秘的面纱。

JavaScript中主要有以下几种数据类型:

  1. 基本类型(Primitive Types):包括Undefined、Null、Boolean、Number、String、Symbol这6种原始类型。
  2. 引用类型(Reference Types):包括Object、Array、Function等引用类型。

        这些不同类型的数据在存储方式、传参方式上都有区别,合理运用不同的数据类型可以编写出更优雅的代码。例如基本类型传递的是值,引用类型传递的是地址。

        本文将详细介绍各数据类型的特征、使用场景和注意事项,帮助读者深入理解JavaScript中的数据类型,避免在开发中出现问题。

通过本文,读者可以学习到:

  • 每种数据类型的定义及基本特征
  • 不同数据类型的内存分配方式
  • 基本类型和引用类型的区别
  • 数据类型转换的规则
  • 如何正确判断数据类型
  • 每种数据类型的常见错误及解决方法

准备好了吗,让我们开始探索JavaScript这片神秘的数据类型之地吧!

Undefined

  • 定义:是一个表示"无"的值。
  • 特征:只有一个值undefined,类型转换为字符串会变成"undefined"。
let x; //变量声明但未初始化,默认为undefined
let y = undefined; //直接赋值为undefined

console.log(x); //undefined
console.log(y); //undefined
console.log(typeof x); //"undefined"

让我再详细解读一下Undefined类型: 

  • Undefined类型只有一个值,即undefined。
  • 当声明一个变量但未对其进行初始化时,该变量的值就是undefined。
    let x;
    console.log(x); // undefined
  • 定义一个函数时,如果不设置返回值,则该函数的默认返回值是undefined。
    function f() {
      // no return statement 
    }
    
    let x = f(); // x is undefined
  • 对一个未初始化的对象访问不存在的属性时,也会返回undefined。
    let obj = {};
    console.log(obj.name); // undefined
  • void操作符会使任何表达式返回undefined。
    let x = void(0); // x is undefined
  • 函数参数未传入时,该参数等于undefined。
    function f(x) {
      console.log(x); // undefined
    }
    
    f();
  • 任何数据类型与undefined进行运算时,结果都为NaN。
    undefined + 1 // NaN
    undefined - 1 // NaN

         综上所述,Undefined类型表示"无"的值,在变量未初始化、函数没有返回值等场景下会返回undefined。需要注意undefined与null的区别,null表示空值,需要手动设置,而undefined由系统自动初始化。

NULL

  • 定义:表示一个空值。
  • 特征:只有一个值null,类型转换为字符串会变成"null"。
let x = null;

console.log(x); //null
console.log(typeof x); //"object"

让我来详细解读一下Null类型:

  • Null类型只有一个值,即null。它代表空值。
  • null需要由开发者手动设置,表示一个空对象引用。
    let x = null;

  • 和undefined不同,null是一个有意义的空值,而undefined是一个未定义的值。
  • 当想表示一个变量将来用于保存对象,还不知道会保存哪个对象时,可以将该变量初始化为null。
    let obj = null; // 后面会给obj赋值为对象
  • null的类型为object,这是JS存在的怪癖之一。
    typeof null // "object"
  • null通常用来表示不存在的对象,作为函数的参数表示对象不合法。
    function setName(obj) {
      obj.name = "Jack"; 
    }
    
    setName(null); // obj不合法,会报错
  • null与undefined的相等运算结果为true。
    null == undefined // true

        总之,null是一个特殊的空值,需要开发者手动设置,主要用于表示不存在的对象引用,与undefined的区别需要牢记。

 Boolean

  • 定义:表示逻辑上的真或假的值。
  • 特征:只有true和false两个值。
let x = true;
let y = false;

let a = Boolean(1); //true
let b = Boolean(0); //false

关于Boolean类型,让我详细解读如下:

  • Boolean表示逻辑上的值true和false。
  • 它有两个字面值:true和false。
  • 布尔值常用于逻辑表达式和流程控制。
    let a = true;
    let b = false;
    
    if (a) {
      // 执行代码
    }
  • 调用Boolean函数可以将其他类型的值转换为布尔值。
    Boolean(1); // true
    Boolean(0); // false
    Boolean("hello"); // true
    Boolean(""); // false
  • 以下值转换为false:0、NaN、null、undefined、空字符串。其他值都转换为true。
  • 逻辑运算符如&&、||、!可以对布尔值进行运算。
    true && false // false
    true || false // true 
    !true // false
  • 条件表达式会隐式进行布尔转换。
    if (score) { } // score不为0都会执行
  • Boolean是基于二进制的,但JS不支持Bit运算。

        Boolean有true和false两个值,用于逻辑判断和流程控制。可以用Boolean函数将其他类型转换为布尔值,并支持逻辑运算。正确使用布尔类型可以使代码更简洁。

Number

  • 定义:用于表示数值,如整数和浮点数。
  • 特征:支持各种运算,可以表示正数、负数、0。
let x = 3; 
let y = 3.14;

let a = x + y;

让我来详细解读下JavaScript中的Number类型:

        Number类型可以表示整数和浮点数,但有精度限制。支持各种运算方法,但也有最大和最小表示范围。需要注意其中特殊值的含义。

String

let s = 'hello';
let s2 = "world"; 

let s3 = s + ' ' + s2; //连接
console.log(s3[0]); //访问单个字符

让我来详细解读下JavaScript中的String类型:

        String用于文本数据,可以拼接、查找子串、大小写转换等,模板字符串提供高级语法。需要注意String是不可变的。

Symbol

let x = Symbol('demo');
let y = Symbol('demo'); 

console.log(x === y); //false,值唯一

让我来详细解读下JavaScript中新增的Symbol类型:

        Symbol可以创建唯一的值,不会发生冲突,用于解决命名问题,也可以用于定义对象的属性名。但不能进行运算,需要转成字符串才能输出。

 

✨ 结语   

        JavaScript作为一门动态类型语言,其丰富的数据类型是其极大优势之一。通过本文的详细介绍,相信大家对各种数据类型已经有了更深入的了解。

        我们重点探讨了六种基本数据类型的定义、特征、使用场景和注意事项,并辅以大量代码实例加深理解。此外,我们还对基本类型和引用类型的区别进行了概述。

        数据类型的运用贯穿整个JavaScript程序开发。合理选择和使用数据类型,对编写简洁优雅的代码 big必须。同时,深入理解数据类型也是避免潜在问题的重要一步。

        本文内容仅是JavaScript数据类型这个宏大主题的一瞥。如果大家对某些数据类型还有疑问,欢迎在评论区留言讨论。我们会持续关注数据类型相关的新特性,并带来更多高质量的内容。

        再次感谢大家的阅读!希望本文可以成为你JavaScript数据类型学习的知识体系指南。让我们继续探索JavaScript的世界,发现更多精彩。

  • Number用于表示数字,包括整数和浮点数。
  • JavaScript不区分整数和浮点数,都使用Number类型。
    let a = 123; //整数
    let b = 3.14; //浮点数 
    
    typeof a; //"number"
    typeof b; //"number"
  • Number类型使用IEEE 754标准表示,可以表示正数、负数和0。
  • 但Number类型的整数精度有限,大于2^53-1的整数无法精确表示。
    Math.pow(2, 53); //精确的值
    Math.pow(2, 53) + 1; //无法精确表示,会舍入

  • Number提供各种运算方法,如isNaN(), toFixed(), toPrecision()等。
  • Number可以表示的最大值约为1.79e+308,最小值约为-1.79e+308。超出此范围无法表示。
    • 特殊的Number值:
      • Infinity代表无穷大
      • -Infinity代表无穷小
      • NaN代表非数值
    • Number可以通过parseInt(), parseFloat()进行转换。
    • 定义:用于表示文本类型的数据。
    • 特征:用单引号或双引号包裹起来,支持连接、访问单个字符等。
    • String用于表示文本的数据,需要使用单引号或双引号包裹。
      let s = 'hello';
      let s2 = "world";
    • 可以使用+进行字符串拼接。
      let s3 = s + ' ' + s2; // "hello world"
    • 可以通过索引访问字符串中的单个字符。
      let s = 'hello';
      s[0]; // 'h'
    • 常用的字符串方法:
      • length属性
      • indexOf()/lastIndexOf()
      • slice()/substring()/substr()
      • toUpperCase()/toLowerCase()
      • split()/join()
    • 可以使用\进行转义,像\n、\t等。
    • 模板字符串使用反引号,可以内嵌表达式。
      let n = 123;
      `${n} is a number`; // "123 is a number"
    • String是不可变的(immutable),方法不会改变原字符串。
    • 定义:一种唯一且不可变的数据类型,可以作为对象属性的标识符。
    • 特征:每次调用会返回一个唯一的值。
    • Symbol是ES6中新增的一种基本数据类型。
    • Symbol的值是唯一的,每个从Symbol()返回的值都不相等。
      let s1 = Symbol('foo');
      let s2 = Symbol('foo');
      
      s1 === s2; // false
    • Symbol主要用于解决命名冲突问题。
    • 可以给Symbol附加一个描述,便于调试。
      let s1 = Symbol('foo');
    • Symbol不能与其他类型的值进行运算。
      let sym = Symbol('a');
      sym + 'x'; // TypeError
    • Symbol可以显式转为字符串或者Boolean值。
      let sym = Symbol('a');
      String(sym); // "Symbol(a)"  
      Boolean(sym); // true
    • Symbol值可以作为对象属性的标识符,该属性是公有属性而非私有属性。
      let sym = Symbol('a');
      let obj = {
        [sym]: function() {} 
      };

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/301686.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

创建K8s节点的虚拟机

1、点击“创建新的虚拟机” 2、选择自定义,点击“下一步” 3、默认,点击“下一步” 4、默认,点击“下一步” 5、默认,点击“下一步” 6、设置虚拟机名称和位置,点击“下一步” 7、点击“下一步” 8、设置2048MB&#x…

x-cmd pkg | gitui - git 终端交互式命令行工具

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 gitui 由 Stephan D 于 2020 年使用 Rust 语言构建的 git 终端交互式命令行工具,旨在终端界面中便捷管理 git 存储库。 首次用户 使用 x gitui 即可自动下载并使用 在终端运行 eval "$(curl https:/…

C语言动态内存管理

我们目前知道的开辟内存空间的方法有: 1.创建变量 2.创建数组; 但是这2种方法开辟的空间大小都是固定的,如果是数组的话确认了大小之后是无法改变的; int a10;//在栈区空间上开辟4个字节的空间;int arr[10];//在栈…

【每日一题】回旋镖的数量

文章目录 Tag题目来源解题思路方法一:组合数学 写在最后 Tag 【组合数学】【数组】【2024-01-08】 题目来源 447. 回旋镖的数量 解题思路 方法一:组合数学 思路 以数组 points 中的每一个为回旋镖的中心 i,在数组 points 中找距离中心 i…

leetcode:滑动窗口

目录 1.定长滑动窗口 1.1 几乎唯一子数组的最大和(使用map来计数) 1.2 长度为k子数组中的最大和 2.不定长滑动窗口 2.1 最多k个重复元素的最长子数组 2.2 绝对差不超过限制的最长连续子数组(multiset) 2.3 将x减到0的最小操作数(正难则反 逆向思维) 2.4 统计…

Windows Server 2003 (NT 5.2.3790.0) 构建指南

Windows Server 2003 (NT 5.2.3790.0) 构建指南 版本 10b,最后更新于 2021/10/21 原文 https://rentry.co/build-win2k3 指令在 XP SP3 x86、Win7 SP1 x86/x64 和 Win10 x64 下测试,结果在其他操作系统下可能会有所不同。 该指南由一位无名的匿名人士维…

每日算法打卡:子矩阵的和 day 8

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例:输出样例: 题目分析示例代码 原题链接 796. 子矩阵的和 题目难度:简单 题目描述 输入一个 n 行 m 列的整数矩阵,再输入 q 个询问,每个询问包含四个整数…

6.综合案例

1. 需求描述 1.1 显示所有员工信息 URI:emps 请求方式:GET 显示效果 1.2 添加操作- 去往添加页面 显示添加页面: URI:emp 请求方式:GET 显示效果 1.3 添加操作- 添加员工 添加员工信息: URI:emp 请求方式:POST 显示效果:完成添加, 重定向到 list 页面。 1.4…

.NET国产化改造探索(四)、银河麒麟安装Nginx

随着时代的发展以及近年来信创工作和…废话就不多说了,这个系列就是为.NET遇到国产化需求的一个闭坑系列。接下来,看操作。 上一篇介绍了如何在银河麒麟操作系统上安装.NET运行环境,这篇文章详细介绍下在银河麒麟操作系统上安装Nginx。 安装…

Unity C# 枚举多选

枚举多选 &#x1f96a;例子&#x1f354;判断 &#x1f96a;例子 [System.Flags]public enum TestEnum{ None 0,Rooms 1 << 1,Walls1<<2,Objects1<<3,Slabs 1 << 4,All Rooms|Walls|Objects|Slabs}&#x1f354;判断 TestEnum test TestEnum.R…

全网最全Midjourney以图生图的详细教程 内有6种案例 小白必收藏!!!!

手把手教你入门绘图超强的AI绘画程序&#xff0c;用户只需要输入一段图片的文字描述&#xff0c;即可生成精美的绘画。给大家带来了全新保姆级教程资料包&#xff08;文末可获取&#xff09; 基础介绍 本篇文章&#xff0c;将介绍如何利用Midjourney完成图生图的方式&#xf…

Xfs文件系统磁盘布局

目录 一&#xff0c;CentOS下Xfs文件系统的安装 二&#xff0c;准备工作 三&#xff0c;AG结构 四&#xff0c;AG超级块 五&#xff0c;AG空闲磁盘空间管理 六&#xff0c;ABTB的Btree 七&#xff0c;ABTB/ABTC的节点块管理 八&#xff0c;inode节点管理 九&#xff0…

LINUX内核故障问题之SKB DROP

关键词 Red Hat Enterprise Linux (RHEL) 7.6SKB linearization failedvm.min_free_kbytes 一、问题现象 一台业务主机dmesg 日志中频繁有以下报错&#xff1a; [qede_ start_ xmit :1289(p1p2)]SKB linearization failed - silently dropping this SKB。 二、问题分析 1…

爆肝整理,性能测试-交易系统升级压测思路,一篇不走弯路...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 交易系统性能是体…

【性能测试】JMeter分布式测试及其详细步骤

性能测试概要 性能测试是软件测试中的一种&#xff0c;它可以衡量系统的稳定性、扩展性、可靠性、速度和资源使用。它可以发现性能瓶颈&#xff0c;确保能满足业务需求。很多系统都需要做性能测试&#xff0c;如Web应用、数据库和操作系统等。 性能测试种类非常多&#xff0c…

QT应用篇:QT自定义最小化托盘显示和操作

将应用程序最小化到托盘任务栏中,可以使用Qt框架中的QSystemTrayIcon类。该类允许应用程序在关闭窗口后最小化到系统托盘,保持在后台运行,同时可以显示应用程序图标、添加右键菜单功能以及发送消息通知等。通过学习这些技术,能够为自己的Qt应用程序增加更多的交互性和便利性…

C++ TinyWebserver 部署到Linux下,并运行(使用的是Vmware的虚拟机运行Ubuntu20.04)

环境&#xff1a;VmwareUbuntu20.04 1. Tinyweb server项目地址&#xff1a;https://github.com/qinguoyi/TinyWebServer 2. 首先进行mysql5.7的安装&#xff1a; 参考教程 &#xff1a; Ubuntu20.04安装MySQL5.7-实测3种方法&#xff08;保姆级教程&#xff09;&#xff1a;…

《软件项目接口安全设计规范》

1.token授权机制 2.https传输加密 3.接口调用防滥用 4.日志审计里监控 5.开发测试环境隔离&#xff0c;脱敏处理 6.数据库运维监控审计 软件全套文档&#xff1a;软件开发全套资料-CSDN博客

Python武器库开发-武器库篇之C段扫描器开发(四十三)

Python武器库开发-武器库篇之C段扫描器开发(四十三) 在我们进行渗透过程中的信息收集的步骤时&#xff0c;收集资产目标的C段也是非常重要的一部分。 C段是指互联网中的一类IP地址。IP地址是互联网上每台设备的唯一标识符。IP地址由一系列数字组成&#xff0c;通常以点分十进…

Pytorch种torch.cat与torch.stack的区别

torch.cat 和 torch.stack 是 PyTorch 中用于拼接张量的两个不同的函数&#xff0c;它们的主要区别在于拼接的方式和创建的维度。 torch.cat&#xff1a; 拼接方式&#xff1a; torch.cat 是按照给定的维度&#xff08;dim 参数&#xff09;将多个张量沿着该维度拼接。在拼接的…