4、前端笔记-JS-数据类型

已于 2022-12-26 00:04:32 修改
阅读量1k 收藏 1
点赞数
分类专栏： js 文章标签： 前端 javascript 开发语言
于 2022-12-25 00:05:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128430209
版权

1、数据类型简介

1.1为什么需要数据类型

不同的数据占用的存储空间不同，为了充分利用存储空间，便于把数据分成所需内存大小不同的数据，定义了不同的数据类型

1.2变量的数据类型

js是弱类型（动态语言）的语言，不需要提前声明变量的类型，在程序运行过程中，类型会被自动确定
所以js的变量的数据类型是只有程序在运行过程中，根据等号右边的值来确定的
所以同一个变量的数据类型可以变化

var x=10;//int
	x="xiaomi";//字符串

1.3基本数据类型

Number \ Boolean \Undefined\Null
在这里插入图片描述

1.3.1数字型Number

整型和浮点型
0八进制：0~7 010–转为10进制=8
0x十六进制：0-9，A-F，0xa转为10进制=10

a.数字型范围

最大值：Number.MAX_VALUE;
最小值：Number.MIN_VALUE;
无穷大 ：Infinity
非数字：NaN

<!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>
    <script>
        //最大值
        console.log(Number.MAX_VALUE);
        //数值型最小值
        console.log(Number.MIN_VALUE);
        //无穷大 Infinity
        console.log(Number.MAX_VALUE*2);
        // 负无穷大 -Infinity
        console.log(-Number.MAX_VALUE*2);
        //非数字 NaN
        console.log('aaa'-100);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

b.isNaN

isNaN()方法用来判断非数字，并且返回一个值，如果是数字，返回的就是false,如果不是数字返回的是true

<!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>
    <script>
        console.log(isNaN('12a'));//true
        console.log(isNaN('12'));//false
        console.log(isNaN(12));//false
        console.log(typeof('12'));
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

1.3.2 字符串型String

可以用单引号或双引号，推荐用单引号。

a.特殊用法：

字符串嵌套，外单内双或内单外双

<!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>
    <script>
        var str="我是'猫🐱'";
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

b.字符串转义符

以\开头
\n \ ’ " \t \b
\b表示空的格子，不是空格

在这里插入图片描述

<!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>
    <script>
        var str="我是'猫🐱'";
        console.log(str);
        var str1='abc\ndef\\ghi\'jk\"lmn\topq\brst';
        console.log(str1);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

c.练习1
<!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>
    <script>
        var text='酷热难耐，火辣的太阳底下，我挺拔的身姿成为了最独特的风景。\n我审视四周，这里是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声："收破烂了啦"';
        alert(text);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

d.字符串长度

length属性获取字符串长度

<!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>
    <script>
        var str="I am 里";
        console.log(str.length);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

e.字符串拼接+号

数值型+字符串=字符串
数值型+数值型=数值型

<!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>
    <script>
        console.log("我今年"+18+"岁");
        console.log(12+12);
        console.log('12'+'12');
        var age=23;
        console.log("我今年"+age);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.3.3 布尔型Boolean

有两个值：true和false
boolean类型做加法运算：true作为1，false作为0
做拼接时，还是true/false

<!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>
    <script>
        var flag1=true;
        var flag2=false;
        console.log(flag1+1);//2
        console.log(flag2+1);//1
        console.log('aa'+flag1);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.3.4 Undefined和NULL

undefined

undefined:一个变量声明但没有赋值，会有一个默认的undefined与字符串相加=字符串
undefined与数值相加=NaN

<!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>
    <script>
        var text;
        console.log(text+"我们");
        console.log(text+1);//NaN
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

NULL

NULL+字符串=字符串
NULL+数值=数值
NULL+undefined=NaN

<!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>
    <script>
        var space=null;
        console.log("我是"+space);
        console.log(12+space);
        console.log(space+undefined);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.4获取变量的数据类型

使用typeof获取变量的数据类型

<!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>
    <script>
        var num=10;
        console.log(typeof num);//number
        var str="100";
        console.log(typeof str);//string
        var flag=true;
        console.log(typeof flag);//boolean
        var und=undefined;
        console.log(typeof und);//undefined
        var non=null;
        console.log(typeof non);//object
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.5 字面量

字面量就是表示如何表达这个值
数字字面量：8，9 ，10
字符串字面量：’前端’
布尔
字面量：true,false

1.6数据类型转换

把一种数据类型的变量转成另一种数据类型
转换的3种方式：

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

（1）转换为字符串类型

最常用的是加号拼接，这种方式叫隐式转换

方式说明示例
toString()转成字符串var num=1;alert(num.toString())
String()强制转换成字符串var num=1;alert(String(num))
加号拼接和字符串拼接的结果都是字符串var num=1;alert(num+“字符串”)
(2)转换为数字型**

使用promot输入的都是字符型

方式说明示例
parseInt(string)将string转为整数类型parseInt(“78”)
parseFloat(string)将string转为浮点类型parseInt(“7.8”)
Number()强制转换将string类型转为数值型Number(“12”)
js隐式转换算术运算符 -*/‘12’-0
在这里插入代码片<!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>
    <script>
        console.log("parseInt");
        // 1.parseInt将接受到的字符串转为数值型
        console.log(parseInt('12'));
        // 如果是输入的小数值，则转整数类型时，会向下取整'12.5'--12
        console.log(parseInt('12.6'));
        // 如果输入的是数值+字符串，则转换时留数值，去掉字符串 '120px'  --120 'rem120px'--NaN
        console.log(parseInt("120px"));
        console.log("parseFloat")
        //2.parseFloat将接收到的字符转为浮点数
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('120px'));//120
        console.log(parseFloat('rem120'));//NaN
        
        // 3.Number(变量)
        console.log("Number")
        console.log(Number('123px'));//NaN
        console.log(Number('123'));//123
        //4.隐式转换
        console.log("算术符隐式转换")
        console.log('12'-0);//12
        console.log('129'-'9');//120


    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

（3）转为Boolean类型
方式说明示例
Boolean()函数将其他类型转为布尔值Boolean(‘true’)
  • 代表空、否定的值会被转为false,如
'' 0  NaN null undefined

<!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>
    <script>
        //转为false
        console.log(Boolean(""));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(null));
        console.log(Boolean(undefined));
        //转为true,除上述转为false的其他值
        console.log(Boolean('aaa'));
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2、扩展

2.1解释型语言和编译型语言

翻译器翻译的方式：编译和解释。两种方式的区别在于翻译的时间点不同
编译器：代码执行前先编译，生成中间代码文件，如java的class文件
解释器：代码运行时进行解释，并立即执行，如javaScript

2.2 标识符、关键字、保留字

标识符：开发人员为变量、属性、函数、参数取得名字。标识符不能是保留字和关键字
关键字：JS本身已经使用的子，如break if else
保留字：预留的关键字，如name let int const

MY Daisy
关注
专栏目录
前端-JS基础之数据类型
敦煌壁画的博客
12-14 1037
数据类型 数据类型是字面含义，表示各种数据的类型。在任何语言中都存在数据类型，因为数据是各种各样的。 JavaScript主要包含8种数据类型，8种数据类型可以分为基础类型和引用型两个分类： 基础型数据类型 number 数字（包含整数和浮点数） string 字符串 boolean 布尔值 undefined 未定义 null 空指针 symbol 符号 bigint 大整数 引用型数据类型 object 对象 通常可以使用typeof操作符查看数据类型，但是请注意，在检测null值时
前端数据类型
weixin_50406892的博客
09-03 954
javascript数据类型
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
见贤思齐焉，见不贤内自省
12-30 2821
JavaScript数据类型(基本数据类型、复杂数据类型)
前端入门——数据类型详解
qq_44213733的博客
09-27 278
前端学习笔记-黑马程序员JS
01-09
"前端学习笔记-黑马程序员JS" ...这篇前端学习笔记涵盖了 JavaScript 的基础知识，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象和 Web APIs 等知识点，为学习 JavaScript 提供了系统的指导。
前端学习笔记-微信小程序学习笔记
最新发布
01-09
前端学习笔记-微信小程序学习笔记 微信小程序是一种基于微信平台的轻量级应用程序，提供了前端开发的解决方案。本笔记总结了微信小程序的基本组成部分、JSON 配置文件的作用、WXML 模板语法、WXSS 样式语言、JS ...
前端基础学习笔记-JS 获取元素 字符串拼接 数据类型
勤能补拙
01-03 1022
1.获取元素 通过id名 document.getElementById("box")//获取的唯一的元素 通过class名 document.getElementsByClassName("wrap")//获取所有具有wrap类名的标签集合 //Elements 注意加上s 大小写不能错 当找不到元素时,返回null 意为空,当写错时,直接报错,提示没有这个方法 console.lo...
前端---js（自学笔记4）（强制类型转换）
ABU_MOlI_ITUI的博客
07-01 5406
js--强制类型转换： 强制数据类型转换：指将一个数据类型强制转换成其他数据类型，也就是说，将其他的数据类型转换为：Number、String、Boolean。 将其他数据类型转换成String： 方法一：调用被转换数据类型的toString()方法，该方法不会影响原变量，它将转换结果返回。 注意：null和undefined没有tostring，如果调用会报错 方法二：调用String（）函数，并将被被转换的数据作为参考值传递给函数 S...
03前端笔记_2017-07-08-11-17-091
08-08
在这些前端笔记中，我们可以看到前端网页开发的基本结构和元素，以及如何逐步改进一个页面的布局和功能。首先，我们注意到HTML文档的结构，它包括`<!DOCTYPE html>`声明，这是告诉浏览器文档类型为HTML5。接着是`...
前端基础知识（一）数据类型
AGCA_ZXL的博客
06-07 2942
数据类型 JS有5种基本数据类型：String、Number、Boolean、Null、undefined，加上ES6的两种：Symbol、BinInt 1）基本数据类型：指的是保存在栈内存中的简单数据段 2）引用数据类型：指的是那些保存在堆内存中的对象，变量中保存的实际上只是一个指针，这个指针指向内存堆中的实际的值 3）Symbol：是ES6引入了一种新的原始数据类型，表示独一无二的值 4）BinInt：即是第七种基本类型，V8引擎V6，7默认启用对BinInt 的支持。是一种内置对象，它提供了一种方法来
理解前端数据类型
weixin_34179762的博客
05-28 324
数据类型 基本数据类型：String，Boolean，Number，undefined，null，Symbol（ES6）引用数据类型：Object，Functoin，Array，RegExp 等 堆（heap）和栈（stack） 堆和栈都是存放临时数据的内存空间（注意与数据结构堆、栈的区分）： 栈 栈时向低地址扩展的数据结构，是一块连续的...
web 前端 数据类型
柔光
04-21 251
一、数据类型 var n=null; typeof 返回“object” undefined var u； 声明了但没有赋值，会出现undefined typeof 返回的是一个“undefined”字符串 返回object 函数返回function 数组返回object null返回object -------------------------------------------...
前端数据类型总结
qq_31162291的博客
08-01 591
{       function aa() {         var a = b = c = 123    // b，c 变为全局变量         console.log(a, b, c)   // 123, 123, 123       }       aa()       console.log(a, b, c)     // undefined, 123, 123   
前端常见的数据类型有哪些？
祈澈菇凉
10-20 313
4：数组（Array）：表示一组有序的数据集合，可以包含不同类型的元素，例如：[1, 2, 3, 4]、[‘apple’, ‘banana’, ‘orange’]。5：对象（Object）：表示具有属性和值的集合，属性是字符串类型的键与值的对应关系，例如：{ name: ‘John’, age: 25 }。3：布尔值（Boolean）：表示逻辑值，只有两个可能的取值：true（真）和false（假）。2：数字（Number）：表示数值数据，可以是整数或浮点数，例如：42、3.14。
前端JS之数据类型
高星雨的博客
11-15 699
你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！ 阿雨博客CSS部分更新完了，接下来是有趣的JS部分，就跟随阿雨的步伐走进web世界吧！ 今天说的是JS中的数据类型 分为两种：简单的值（原始值）和复杂的数据结构（大多指对象）。 {1}值包括布尔值，数字，字符，还有两个特殊值，null（空值）和uundefined（为定义）。 {2}对象包括狭义的对象，数组和函数 ty...
JavaScript笔记：命名规则与数据类型转换详解
JavaScript是一种广泛应用于前端开发的脚本语言，它的命名...JavaScript的命名规则、数据类型、变量声明和转换操作是前端开发中必不可少的基础知识。理解并熟练运用这些概念，能够帮助开发者编写高效、可维护的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值