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

[JS]数据类型

news 来源：原创 2024/4/28 15:25:09

请添加图片描述

前言

  • 系列文章目录：
    • [目录]HTML CSS JS
  • 根据视频和PPT整理
  • 视频及对应资料：
  • JS
    • 视频：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
    • 视频对应资源(在视频简介里面)
    • 链接：【https://gitee.com/xiaoqiang001/java-script.git】
    • 视频对应资源(百度网盘)
    • 链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】
    • 提取码：1234

文章目录

  • 前言
  • 1 数据类型简介
  • 2 简单数据类型（基本数据类型）
    • 2.1 数字型 Number
      • 2.1.1 进制
      • 2.1.2 JavaScript中数值的最大和最小值
      • 2.1.3 数字型三个特殊值
      • 2.1.4 isNaN()
    • 2.2 字符串型 String
      • 2.2.1 字符串转义符
      • 2.2.2 字符串长度
      • 2.2.3 字符串拼接
    • 2.3 布尔型 Boolean
    • 2.4 Undefined
    • 2.5 Null
  • 3 获取变量数据类型
  • 4 字面量
  • 5 数据类型转换
    • 5.1 转换为字符串
    • 5.2 转换为数字型
    • 5.3 计算年龄案例
    • 5.4 转换为布尔型

1 数据类型简介

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。(比如，用合适的盒子装合适大小的物品，不浪费空间)

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

JavaScript 是一种弱类型或者说动态语言.

这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定 。在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型，即变量的数据类型是可以更改的。 如，在程序的运行过程中变量的数据类型可以由原来的数字类型转变为字符串或其他类型的数据。

JS 把数据类型分为两类：

  • 简单数据类型 ：
    Number – 数字型
    String – 字符串型
    Boolean – 布尔型
    Undefined – 未定义
    Null – 空
  • 复杂数据类型：
    object – 对象类型

2 简单数据类型（基本数据类型）

简单数据类型说明默认值
Number数字型，包含整型值(12)和浮点型值(3.1415)0
Boolean布尔值类型，如true . false，等价于1和0false
string字符串类型，如"张三”注意咱们js里面，字符串都带引号“”
Undefinedvar a;声明了变量a但是没有给值，此时a = undefinedundefined
Nullvar a = null;声明了变量a为空值null

2.1 数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

  <script>
    var intNumber = 12
    var floatNumber = 3.1415926
    console.log(intNumber)
    console.log(floatNumber)
  </script>

在这里插入图片描述

2.1.1 进制

最常见的进制有二进制、八进制、十进制、十六进制。

在JS中八进制前面加0，十六进制前面加 0x。

八进制：
数字只有 0-7

    // 八进制(逢8进1，好比十进制逢10进1)
    // 八进制表示的数字    0 1 2 3 4 5 6 7 10 11 12 ...
    // 对应的十进制数      0 1 2 3 4 5 6 7 8  9  10 ...
    var eight = 07
    console.log(eight)
    eight = 012
    console.log(eight)

在这里插入图片描述

十六进制：
逢16进1
数字：

123456789abcdef1011…
对应十进制1234567891011121314151617…
    var sixteen = 0xf
    console.log(sixteen)
    sixteen = 0x10
    console.log(sixteen)
    sixteen = 0x12
    console.log(sixteen)

在这里插入图片描述

2.1.2 JavaScript中数值的最大和最小值

	// 最大值
    console.log(Number.MAX_VALUE)
    // 最小值
    console.log(Number.MIN_VALUE)

在这里插入图片描述

2.1.3 数字型三个特殊值

    // 无穷大
    console.log(Infinity)
    // 负无穷大
    // 无穷小在数学中定义为无限趋近与0的数(极限为0)
    console.log(Infinity)
    // 不是一个数字
    // NaN Not a Number
    console.log(12 - 'hello') // 数字不能减去字符串，结果为非数字

在这里插入图片描述

2.1.4 isNaN()

用来判断一个变量是否为非数字的类型，返回 true 或者 fals:

  • 变量为数字返回的是 false
  • 变量不是数字返回的是true
    console.log(isNaN(12 - 'hello'))
    console.log(isNaN(12))

在这里插入图片描述

2.2 字符串型 String

字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号’ ’

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)。但是不能同种引号相互嵌套，如单引号内使用单引号。

    var str1 = 'hello'
    console.log(str1)
    var str2 = "world"
    console.log(str2)

    var str3 = '张三说："hello"'
    console.log(str3)
    var str4 = "张三说：'hello'"
    console.log(str4)

    // 会报错
    // JS中引号采用就近原则成对匹配
    // '张三说：' 单引号已经完成配对
    // '' 后面的单引号只能与最后的进行匹配
    // var str3 = '张三说：'hello''

在这里插入图片描述
在这里插入图片描述

2.2.1 字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符及其说明如下：
在这里插入图片描述

    var str = 'hello world \n hello world \\ \' \" he\tllo world\b '
    console.log(str)

在这里插入图片描述

2.2.2 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度

    var str4 = "张三说：'hello'"
    console.log(str4.length)

在这里插入图片描述

2.2.3 字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

    console.log('hello'+12)
    console.log(12+'hello')
    console.log('hello'+'world')
    console.log('hello'+true)
    console.log('hello'+undefined)
    console.log('hello'+null)

在这里插入图片描述

字符串和变量拼接，变量是不能添加引号的，因为加引号的变量会变成字符串，如果变量两侧都有字符串拼接，口诀“引引加加”

    var age = 12
    console.log("张三今年" + age + "岁")

在这里插入图片描述

2.3 布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

    console.log(false+12)
    console.log(true+12)

在这里插入图片描述

2.4 Undefined

一个声明后没有被赋值的变量会有一个默认值 undefined

    var a
    console.log(a)
    console.log(a+1)
    console.log(a+' hello')

未定义与数相加为非数字
在这里插入图片描述

2.5 Null

一个声明变量给 null 值，里面存的值为空（即有一个盒子，但是里面没有东西）

    var a = null
    console.log(a)
    // null 与数字相加 会转换为0
    console.log(a+12)
    console.log(a+' hello')
    // null 和 false 都转换为0
    console.log(a+false)

在这里插入图片描述

3 获取变量数据类型

typeof 可用来获取检测变量的数据类型

    console.log(typeof 12)
    console.log(typeof 'hello')
    console.log(typeof true)
    console.log(typeof undefined)
    console.log(typeof null)

在这里插入图片描述

4 字面量

字面量是在源代码中一个固定值的表示法，字面量就是显示的值，看到啥就是啥。

在浏览器的控制台，数字显示为蓝色，字符串为黑色，null 和 undefined 为浅灰色（不同的浏览器可能会有差异）

    console.log(12)
    console.log('hello')
    console.log(undefined)
    console.log(null)

在这里插入图片描述

5 数据类型转换

把一种数据类型的变量转换成另外一种数据类型

通常会实现3种方式的转换：

  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

5.1 转换为字符串

在这里插入图片描述

  <script>
    var a = 123
    // 方式1 调用toString() 变量名.toString()
    console.log(a.toString())
    console.log( typeof a.toString())
    // 方式2 使用String()进行强制转换
    console.log(String(a))
    console.log( typeof String(a))
    // 方式3 使用 + 与字符串进行拼接
    // 拼接上长度为0的字符串
    console.log((a + ''))
    console.log( typeof (a + ''))
  </script>

在这里插入图片描述

三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

5.2 转换为数字型

在这里插入图片描述
注意 parseInt 和 parseFloat 单词的大小写

    var a = '123'
    var b = '3.14'
    var c = true
    var d = null
    var e = undefined
    // 转为整数
    // 小数转为整数会向下取整
    console.log( parseInt(a),parseInt(b),parseInt(c),parseInt(d),parseInt(e) )
    // console.log( parseInt(b) ) 
    // console.log( parseInt(c) ) // 转换失败 非数字
    // console.log( parseInt(d) ) // 转换失败 非数字
    // console.log( parseInt(e) ) // 转换失败 非数字

    // 转为小数
    console.log( parseFloat(a),parseFloat(b),parseFloat(c),parseFloat(d),parseFloat(e) )
    // console.log( parseFloat(b) )
    // console.log( parseFloat(c) ) // 转换失败 非数字
    // console.log( parseFloat(d) ) // 转换失败 非数字
    // console.log( parseFloat(e) ) // 转换失败 非数字

    // 强制转换
    console.log( Number(a),Number(b),Number(c),Number(d),Number(e) )
    // console.log( Number(b) )
    // console.log( Number(c) ) // true 为 1，false 为 0
    // console.log( Number(d) ) // null 为 0
    // console.log( Number(e) ) // 转换失败 非数字

    // 使用运算符号隐式转换
    // 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型
    // 不能使用 + 与字符串进行隐式转换，会转换为字符串
    console.log( a*1, b*1, c*1, d*1, e*1 )
    // console.log( b * 1 )
    // console.log( c * 1 ) // true 为 1，false 为 0
    // console.log( d * 1 ) // null 为 0
    // console.log( e * 1 ) // 转换失败 非数字

在这里插入图片描述

5.3 计算年龄案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var year = prompt('请输入你的初始年份....') // 变量接收的值为字符串
    console.log( typeof year )
    var age = 2022 - year // year 隐式转换为数字型
    alert('你的年龄为'+ age + '岁')
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

5.4 转换为布尔型

在这里插入图片描述
代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined ，其余值都会被转换为 true。

    // 代表空或否定的值转布尔值
    console.log(Boolean(''))
    console.log(Boolean(0))
    console.log(Boolean(NaN))
    console.log(Boolean(null))
    console.log(Boolean(undefined))
    // 非空、不为否定的值
    console.log(Boolean('123'))
    console.log(Boolean(1))
    console.log(Boolean(-1))
    console.log(Boolean(Infinity))
    console.log(Boolean(-Infinity))

在这里插入图片描述

相关文章：

  • Transformer 无卷积骨干网络
  • 服务器安全狗是什么意思?有什么功能?
  • MySQL主从复制与读写分离
  • Mysql 面试题
  • 找回过期的微信文件，赶紧收藏这4个方法！
  • dsox4034a是德科技Keysight DSOX4034A示波器
  • [网鼎杯 2018]Fakebook
  • 《32天SQL筑基》导读
  • 【云原生 | Kubernetes 系列】--Envoy Tcp请求静态配置
  • 【牛客 - 剑指offer】JZ61 扑克牌顺子 两种方案 Java实现
  • 写对比学习损失函数有感（关于速度差异、出现nan的情况）
  • Java岗大厂面试百日冲刺 - 日积月累，每日三题【Day03】——Java高级篇
  • SHRM-人力资源必备的顶流证书
  • 【软件测试】软件测试的相关概念（面试常考）
  • 极光推送厂商通道（小米、华为）对接/问题排查
  • 【108天】Java——《Head First Java》笔记（第1-4章）
  • 【刷算法】求1+2+3+...+n
  • 5分钟即可掌握的前端高效利器：JavaScript 策略模式
  • C++入门教程（10）：for 语句
  • CNN 在图像分割中的简史：从 R-CNN 到 Mask R-CNN
  • js正则，这点儿就够用了
  • laravel 用artisan创建自己的模板
  • python docx文档转html页面
  • Service Worker
  • Spring思维导图，让Spring不再难懂（mvc篇）
  • 关于 Cirru Editor 存储格式
  • 前端学习笔记之观察者模式
  • 如何用vue打造一个移动端音乐播放器
  • 思考 CSS 架构
  • 在electron中实现跨域请求，无需更改服务器端设置
  • 东超科技获得千万级Pre-A轮融资，投资方为中科创星 ...
  • 继 XDL 之后，阿里妈妈开源大规模分布式图表征学习框架 Euler ...
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • （14）目标检测_SSD训练代码基于pytorch搭建代码
  • (2/2) 为了理解 UWP 的启动流程，我从零开始创建了一个 UWP 程序
  • （30）数组元素和与数字和的绝对差
  • (Repost) Getting Genode with TrustZone on the i.MX
  • （安全基本功）磁盘MBR，分区表，活动分区，引导扇区。。。详解与区别
  • （第9篇）大数据的的超级应用——数据挖掘-推荐系统
  • （转）EOS中账户、钱包和密钥的关系
  • **python多态
  • .java 指数平滑_转载：二次指数平滑法求预测值的Java代码
  • .Net 6.0 处理跨域的方式
  • .Net 8.0 新的变化
  • .NET Core 中的路径问题
  • .NET MAUI学习笔记——2.构建第一个程序_初级篇
  • .Net MVC4 上传大文件，并保存表单
  • .NET MVC第三章、三种传值方式
  • .NET 自定义中间件 判断是否存在 AllowAnonymousAttribute 特性 来判断是否需要身份验证
  • .NET/C# 中你可以在代码中写多个 Main 函数，然后按需要随时切换
  • .NET4.0并行计算技术基础（1）
  • .Net6使用WebSocket与前端进行通信
  • .net实现头像缩放截取功能 -----转载自accp教程网
  • .net知识和学习方法系列（二十一）CLR-枚举
  • [ JavaScript ] JSON方法