Web前端开发笔记——第四章 JavaScript程序设计 第三节 数据类型
目录
- 一、基本数据类型
- （一）String类型
- （二）Number类型
- 1、字面量
- 2、无穷大
- 3、非数值
- （三）Boollean类型
- （四）Undefined类型和Null类型
- 二、引用数据类型
- （一）Object类型
- （二）数组类型
- （三）RegExp类型
- （四）Function类型
- 三、查看变量数据类型
一、基本数据类型
JavaScript中包括两种不同数据类型，分为基本数据类型和引用数据类型，前者指简单的数据段，后者指多个值构成的对象。
（一）String类型
String类型即字符串类型，字符串可以包括在单引号或双引号内，若字符串本身含有单引号则字符串应该包括在双引号内，反正则在单引号内。
（二）Number类型
1、字面量
Number类型即数字类型，可分为整数、浮点数和NaN，其中浮点数是带有小数点且至少有一位的数，它占用的内存空间是整数的两倍。
固定的值称为字面量，JavaScript中有不同的数值字面量格式，最基本的字面量是十进制，八进制和十六进制的字面量可以这样表示，例如下列HTML代码，如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var a = 100;//十进制字面量var b = 017;//八进制字面量，八进制的第一位必须为0var c = 0xBF;//十六进制字面量，十六进制的前两位必须为0x，字母A-F不区分大小写console.log(a, b, c);</script></body></html>运行结果如下，可见八进制和十六进制字面量都被转换为十进制数值：
2、无穷大
Infinity即无穷大，表示结果超出了计算机可以表示的浮点数的最大范围，可分为正无穷（Infinity）和负无穷（-Infinity），在涉及 > 和 < 比较时，所有的数值都比负无穷大，另外所有的数值都比正无穷小。
例如下列HTML代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var a = 1 / 0;console.log(a);var b = -1 / 0;console.log(b);</script></body></html>控制台中：
3、非数值
NaN是非数值，表示一个本来要返回数值的操作数但未返回数值的情况，比如在JavaScript中0除以0，它返回的是NaN，这样就不会抛出异常，从而不影响其它代码的执行。
NaN与任何操作都会返回NaN，且它与任何值都不相等，包括其自身。
例如下列HTML代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var a = 0 / 0;console.log(a);var b = NaN * 2;console.log(b);var c = "abcdef" - "122";console.log(c)</script></body></html>控制台中：
（三）Boollean类型
Boollean类型即布尔类型，它有两个字面值：true和false，要注意true不一定等于1，false不一定等于0，且布尔类型区分大小写，即True和False不是布尔值。
（四）Undefined类型和Null类型
Undefined类型只有Undefined，表示变量不含有值，即在使用var声明变量时但未初始化的值。
Null类型也只有Null，它表示一个空对象指针，用于保存对象的变量之前先初始化变量。
二、引用数据类型
引用数据类型可分为Object类型、数组类型、data类型、regexp类型和function类型。
（一）Object类型
Object对象是一组数据和功能的集合，可以通过new操作符或对象字面量。
1、通过new操作符后跟Object()构造函数来创建Object实例，这里使用关键词 “new” 来声明其类型。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var office = new Object();office.name = "xiaoming";office.sex = "男";office.age = 30;</script></body></html>2、通过对象字面量创建Object实例，使用花括号“{}”创建。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var office {name = "xiaoming";sex = "男";age = 30;}</script></body></html>（二）数组类型
JavaScript中的数组每一项可以是任何一种数据类型的数据，且数组的大小是可以动态调整的，即根据数据的增加而自动增长以容纳更多数据。
1、可以通过Array()构造函数创建数组。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var number1 = new Array();console.log(number1);var number2 = new Array(10, "ada", 1.233);console.log(number2);</script></body></html>控制台中显示了number1[]和number2[]数组的长度大小以及数组中的每项：
展开后可看到length：0和length：3，如下：
2、通过数组字面量创建数组。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var thing1 = [];console.log(thing1);var thing2 = [0];console.log(thing2);var thing3 = ["xiaom", 123, 0];console.log(thing3);console.log(thing3[0]); //在控制台中显示数组thing3的第1项thing3[2] = 100; //修改数组thing3中的第三项为100console.log(thing3);thing3[3] = "llk"; //增加数组thing3中的第四项为llkconsole.log(thing3);</script></body></html>控制台中：
可以通过数组名.length返回数组的长度：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var thing3 = ["xiaom", 123, 0];console.log(thing3.length);</script></body></html>控制台中：
（三）RegExp类型
RegExp类型即正则表达式，正则表达式作为一个模板将某个字符模式与所搜索的字符串进行匹配，它也有两种方式来创建正则表达式。
1、使用RegExp()构造函数来创建正则表达式，该函数接收两个参数，分别是要匹配的字符串模式和可选的标志字符串。
2、使用字面量来创建正则表达式，由模式部分和标志组成，即变量=/pattern/flags。
这里简单介绍了正则表达式，后续还会详细介绍。
（四）Function类型
Function类型即函数类型，函数实际上是对象，每个函数都是Function类型的实例，函数的声明有三种方式。
1、使用Function()构造函数。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var f_sum = new Function("a", "b", "console.log(a+b)");f_sum(3, 5);</script></body></html>控制台中：
2、使用函数声明语法定义函数。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>function f_sum(a, b) {console.log(a + b);}f_sum(3, 5);</script></body></html>控制台中：
3、使用函数表达式定义函数。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>var f_sum = function(a, b) {console.log(a + b);};f_sum(3, 5);</script></body></html>控制台中：
三、查看变量数据类型
可以通过typeof操作符来查看JavaScript中变量的数据类型。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>text1</title></head><body><script>console.log(typeof 0);console.log(typeof 100);console.log(typeof 3.1415);console.log(typeof NaN);console.log(typeof true);console.log(typeof [1, "xioaming", 3.45255]);console.log(typeof null);console.log(function(){});</script></body></html>控制台中：
Web前端开发笔记——第四章 JavaScript程序设计 第三节 数据类型相关推荐
- Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组
目录 一.数组的创建 (一)Array()构造函数 (二)字面量方法 二.数组元素的读写和遍历 三.添加和删除数组元素 (一)添加数组元素 (二)删除数组元素 (三)splice()方法 四.二维数组 ...
- Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句
目录 一.if条件语句 二.while循环语句 (一)while()语句 (二)do--while语句 三.for循环语句 四.switch语句 五.break语句和continue语句 一.if条件 ...
- Web前端开发笔记——第四章 JavaScript程序设计 第二节 变量
目录 一.JavaScript中的注释 二.变量的命名规则 三.变量声明以及赋值 四.变量作用域 五.变量提升 一.JavaScript中的注释 JavaScript中单行注释通过"//&q ...
- Web前端开发笔记——第四章 JavaScript程序设计 第一节 JavaScript的基础语法
目录 一.JavaScript的定义 二.代码的创建和使用 (一)内嵌JavaScript代码 (二)引用JavaScript文件 三.代码的注释 四.输出数据 (一)alert()弹出警告框 (二) ...
- Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
目录 一.CSS文本属性 二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性 三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...
- Web前端开发笔记——第三章 CSS语言 第六节 CSS定位
目录 一.定义 二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素 三.浮动定位 (一)左浮动和右浮动 (二)清除浮动 四.层定位 (一)st ...
- Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
目录 一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性 二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
- Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影
目录 前言 一.圆角边框 (一)border-×-×-radius (二)border-radius 二.阴影 (一)基本阴影设置 (二)内部阴影设置 结语 前言 本节介绍仅在CSS3中的新内容,例如 ...
- Web前端开发笔记——第三章 CSS语言 第五节 盒子模型
目录 一.CSS布局与定位 二.盒子模型 三.盒子模型的组成 四.设置边框的属性 五.设置外.内边距的属性 六.overflow 属性 结语 一.CSS布局与定位 在CSS中对一个网页进行布局与定位, ...
最新文章
- python视频抽帧 后 前端javascript如何显示_使用OpenCV编写一个可以定时抽帧的脚本...
- XShell 将Linux文件上传、下载到Windows下（rz上传、sz下载）
- linux tcp 多路复用,linux下 C++ 使用 epoll 多路复用 实现高性能的tcpserver
- php td背景颜色改变,JavaScript实现点击单元格改变背景色的方法
- Spring的概述及主要模块
- 2020杭州区块链国际周圆满闭幕，这一份金句集锦不能错过
- HTTP中的status code什么意思
- 你别不信，安卓机用户才是苹果机涨价的最大受害者
- 记录在处理SIF数据中，遇到的一些问题及解决过程
- 膜态沸腾UDF【转载】
- windows系统如何真正隐藏文件夹[转载]
- 音质卓越颜值在线，五款高人气头戴式HIFI音质蓝牙耳机排名
- 本地JAVA开发页面使用AzureAD(AAD)验证登录
- schedule for addition
- 华为、苹果、三星扎堆发财报，谁的日子最不好过？
- 【学习总结】激光雷达与相机外参标定：原理与代码1
- 一些常用电子元器件失效的特点
- CloudCompare源码分析_八叉树（Octree）算法基础CC中的八叉树结构
- 烽火HG680-LC-S905L3-android9-原版线刷语音固件（支持救砖）（当贝纯净桌面）
- 有关WINDOWS XP登录密码的几种方法