JS-数据类型

已于 2023-10-31 15:22:19 修改
阅读量65 收藏
点赞数
分类专栏： HTML+CSS+JavaScript 文章标签： javascript 前端 开发语言
于 2023-10-31 14:58:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77751199/article/details/134138942
版权

一.概述  

        JS是一门弱类型语言，这意味着不用提前声明变量的类型，在程序运行过程中，只要该变量被赋值，则类型会被自动确定。也意味着相同的变量可用作不同的数据类型。

var age = '12'    //此时age是字符串型
age = 12    //此时age是数值型

JS中数据类型分为：

（1）简单数据类型

（2）复杂数据类型

简单数据类型：数值型，字符串型，布尔型，未定义，空(Number,String,Boolean,Undefined,Null)

复杂数据类型：对象(object) 

二.简单数据类型

number数值型，包括小数
string字符串型
boolean布尔型
undefined未定义，声明了变量但没有赋值，此时该变量未定义
null初始化变量为null

1.数值型

（1）包括整数和浮点数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = 12;
        var n2 = 12.12;
        console.log(typeof n1,typeof n2); //typeof是单目操作符，返回的是右侧数据的类型
    </script>
</head>
<body>
</body>
</html>

 （2）数值的进制表示

JS中八进制前面加0，十六进制前面加 0x，默认显示的是十进制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = 010;
        var n2 = 0xa;
        console.log(n1,n2);
    </script>
</head>
<body>
</body>
</html>

（3）数值型范围

 Number.MAX_VALUE取最大值，Number.MIN_VALUE取最小值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(Number.MAX_VALUE,Number.MIN_VALUE);
    </script>
</head>
<body>
</body>
</html>

 

（4）数值型的三个特殊值

Infinity ，代表无穷大，大于任何数值

-Infinity ，代表无穷小，小于任何数值

NaN ，Not a number，代表一个非数值，例如：字符串-10得到的是NaN

isNaN()：来判断一个变量是否为非数字的类型，返回 true 或者 false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = Number.MAX_VALUE * 2;
        var n2 = Number.MIN_VALUE * 2;
        var n3 = 'str'
        console.log(n1,n2,isNaN(n3));
    </script>
</head>
<body>
</body>
</html>

2.字符串型

（1）可以由单引号或双引号包括，但是推荐使用单引号，引号嵌套遵循就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = 'str1'
        var n2 = "str2"
        var n3 = 'str"str"str'
        console.log(typeof n1,typeof n2);
    </script>
</head>
<body>
</body>
</html>

（2）转义字符

（3）字符串长度

字符串是由字符组成，length属性统计的是字符的个数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = 'str1我的';
        console.log(n1.length); //结果是6
    </script>
</head>
<body>
</body>
</html>

 （4）字符串拼接

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = 12 +'str1我的'+ 12
        console.log(n1);    //12str1我的12
    </script>
</head>
<body>
</body>
</html>

3.布尔型

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

4.undefined

（1）一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var variable;
        console.log(variable); // undefined
        console.log('你好' + variable); // 你好undefined
        console.log(11 + variable); // NaN
        console.log(true + variable); // NaN
    </script>
</head>
<body>
</body>
</html>

5.null

 （1）一个声明变量给 null 值，里面存的值为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var vari = null;
        console.log('你好' + vari); // 你好null
        console.log(11 + vari); // 11
        console.log(true + vari); // 1
    </script>
</head>
<body>
</body>
</html>

三.简单数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的

1.转化为字符串类型

toString()
String()
+拼接        隐式转换

（1）toString()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = 12;
        console.log(typeof n1.toString()); //string
    </script>
</head>
<body>
</body>
</html>

（2）String()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = 12;
        console.log(typeof String(n1)); //string
    </script>
</head>
<body>
</body>
</html>

2.转化为数值型

parseInt(string)
parseFloat(string)
Number(string)
- * /隐式转换

（1）parseInt()

整数和浮点数都能转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = '12';
        var n2 = '12.12';
        console.log(n1,typeof parseInt(n1)); //12 Number
        console.log(n2,typeof parseInt(n2)); //12.12 Number
    </script>
</head>
<body>
</body>
</html>

（2）parseFloat()

 整数和浮点数都能转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = '12';
        var n2 = '12.12';
        console.log(n1,typeof parseFloat(n1)); //12 Number
        console.log(n2,typeof parseFloat(n2)); //12.12 Number
    </script>
</head>
<body>
</body>
</html>

（3）Number() 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = '12';
        var n2 = '12.12';
        console.log(n1,typeof Number(n1)); //12 Number
        console.log(n2,typeof Number(n2)); //12.12 Number
    </script>
</head>
<body>
</body>
</html>

（4）隐式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = '12'- 10;
        console.log(n1,typeof n1); //2 Number
    </script>
</head>
<body>
</body>
</html>

（5）数字开头的字符串也可以转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = '12num';
        console.log(parseInt(n1),typeof parseInt(n1)); //12 Number
    </script>
</head>
<body>
</body>
</html>

3.转化为布尔型

代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined

其余值都会被转换为 true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1 = '';
        var n2 = 12
        console.log(Boolean(n1),Boolean(n2)); //false true
    </script>
</head>
<body>
</body>
</html>

四.字面量

字面量是在一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。 

数字字面量：8, 9, 10

字符串字面量：'黑马程序员', "大前端" 

布尔字面量：true，false

LearnerZJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript数据类型 - Object类型
lixiaosenlin的专栏
09-01 6297
ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和方法，就可以创建自定义对象，如下所示： var o = new Object(); 这个语法与Java中创建对象的语法相似，但在JavaScript中，如果不给构造函数传递参数，则可以省略后面的那一对圆括号。也就是说在像前面这个示例一样不传递参数的情况下，完全可以省略那对圆括号（但并不推荐这种做法） var o = new Objec
js代码-数据类型判断
07-14
在这个“js代码-数据类型判断”主题中，我们将深入探讨几种常见的数据类型以及如何进行类型检测。 JavaScript提供了六种基本数据类型：String（字符串）、Number（数字）、Boolean（布尔）、Null、Undefined和...
js-数据类型判断方法
qq_39111074的博客
04-25 1295
javascript中常用数据类型判断方法有：typeof、instanceof、constructor、Object.prototype.toString.call() typeof- - -可以检测出基本数据类型（除了null） 检测方法： typeof xx 优点：使用简单 缺点：复杂类型检测出来都是 object，null 也是 object instanceof 原型链检测 检测方法：xx instanceof yy - - -检测 xx 的原型链上是否 存在 yy 优点：能检测出引用类型 缺点
JS --引用数据类型
m0_60979337的博客
11-26 2582
引用数据类型的基本原理
node.js-数据类型
godme
10-25 4998
Boolean value Boolean '' false 0 false Nan false undefined false null false other true Boolean(value)：数值转换真值 Number 进制 进制 表示 数值(十进制) 说明 二进制 0b10 2 八进制 010 8 严格模式下
JavaScript - 数据类型 思维导图
Lin16819的博客
11-06 563
JavaScript-数据类型知识 复习时临时用WPS整理的，但后面提示免费账号的笔记节点有限。下载了别的思维导图软件 如果后期重新整理再补图。
JavaScript数据类型 - Null类型
lixiaosenlin的专栏
08-28 6884
Null类型 Null 类型是第二个只有一个值的数据类型，这个特殊的值就是null。从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof检测null值时返回object的原因，如下所示： var car = null; console.log(typeof car);// object 如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其它值。这样一来，只要直接检查null值就可以知道相应的变量是否已经保存了一个对象的引用。比如下面的例子： if(c
js基础 - 数据类型
热门推荐
beichengliulixue的博客
07-22 1万+
js数据类型，获取数据类型1、js数据类型分类2、js数据类型判断 1、js数据类型分类 基本类型（值类型） 字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。 注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。 对象类型（数据类型） 对象(Object–任意对象)、数组(Array—特殊的对象，数值下标、内部是有序的)、函数(Function—特殊的对象，可以执行) 2、js数据类型判断 【typeo
JavaScript--数据类型
weixin_44040583的博客
10-27 727
JavaScript中数据类型分为两种： 1.基本数据类型 2.引用数据类型 一、基本数据类型 1.string/字符串类型 字符串（或文本字符串）是一串字符。字符串被引号包围。可使用单引号或双引号 var str = "abc"; var txt = 'hello world'; 2.number/数字类型 var num = 6; 3.boolean/布尔类型 布尔值只有两个值：true ...
JavaScript数据类型 - Boolean类型
lixiaosenlin的专栏
08-28 7924
Boolean类型 Boolean类型是JavaScript中使用的最多的一种类型，该类型只有两个字面值：true和false。这两个值与数字值不是一回事，因此true不一定等于1，而false也不一定等于0。以下是为变量赋值Boolean类型值的例子： var found = true; var lost = false; 需要注意的是Boolean类型的字面值true和false是区分大小写的。也就是说True和False（或者其它混合大小写形式）都不是Boolean类型的值，只是标识符。 虽
JS-3-JavaScript数据类型
m0_37532448的博客
01-29 152
 
javascript数据类型 -JavaScript优势简介及数据类型
11-25
JavaScript提供了多种数据类型，包括基本和复合类型： 1. **基本数据类型**： - **数字（Numbers）**：整数和浮点数，如123，120.50。 - **字符串（Strings）**：文本字符序列，如"This text string"，可以用单...
JavaScript 动态网页实例 - 数据类型转换.rar
04-21
JavaScript的数据类型分为基本数据类型和复合数据类型。复合数据类型主要有对象、数组与函数。基本数据类型有数值数据类型、字符串数据类型、逻辑数据类型以及undefined和 null 两个特殊的数据类型。在数值数据类型...
JavaScript基础心法 数据类型
10-18
JavaScript中的数据类型是编程的基础，理解它们如何存储和工作至关重要。在JavaScript中，数据类型主要分为两类：基本数据类型和引用数据类型。 1. **基本数据类型**：包括String、Number、Boolean、Undefined、...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 243
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 99
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 878
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 308
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 206
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值