23 数据类型

23.1 数据类型简介

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var num; //这里的num还不知道是什么数据类型
var num = 10; //num属于数字型
var str = 'pink'; //str属于字符串型

在代码运行时，变量的数据类型是JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后， 变量才确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6; // x 为数字
var x = "Bill"; // x 为字符串

详见：示例

23.2 数据类型的分类

JS 把数据类型分为两类：

  • 简单数据类型 （Number,String,Boolean,Undefined,Null）
  • 复杂数据类型 （object)

23.3 简单数据类型

JavaScript 中的简单数据类型及其说明如下：

表16.1: JS中的简单数据类型
简单数据类型 说明 默认值
Number 数字型,包含整型值和浮点型值，如 21、0.21 0
Boolean 布尔值类型，如 true 、false，等价于 1和0 false
String 字符串类型，‘张三’ “”
Undefined var a; 声明了变量 a 但是没有给值，此时 a = undefined undefined
Null var a = null; 声明了变量 a 为空值 null

23.3.1 数字型 Number

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

var age = 21; // 整数
var Age = 21.3747; // 小数

23.3.1.1 数字型进制

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

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

//1. 八进制  在数字前面加0表示八进制
var num1 = 010; //这里是八进制的数字
console.log(num1); //返回八进制数字
var num2 = 012; //这里是八进制的数字
console.log(num2); //返回八进制数字

//2. 十六进制  在数字前面加0x表示八进制
// 0~0 a~f
var num3 = 0xb; //这里是八进制的数字
console.log(num3); //返回八进制数字

23.3.1.2 数字型范围

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

23.3.1.3 数字型三个特殊值

  • Infinity ，代表无穷大，大于任何数值
  • -Infinity ，代表无穷小，小于任何数值
  • NaN ，Not a number，代表一个非数值
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN

详见：示例

23.3.1.4 判断非数字isNaN()

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

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字

详见：示例

23.3.2 字符串型 String

字符串型可以是引号中的任意文本，其语法为 双引号 ““、单引号’’和反引号``。因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。 反引号可用于模板字符串，参考第 23.3.2.5 节。

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

23.3.2.1 字符串引号嵌套

想在字符串里面显示单引号或者双引号。可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)。

var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

详见：示例

23.3.2.2 字符串转义符

想要对字符串进行换行、缩进和加入特殊字符等。可利用转义符，转义符都是  开头的，常用的转义符及其说明如下

表18.1: 字符串转义符
转义符 说明
\n 换行符，n是newline的意思
\ 斜杠
' 单引号
"” 双引号
\t tab缩进
\b 空格，b代表blank

详见：示例

案例

实现下图效果：

案例效果

图23.1: 案例效果

详见：示例

23.3.2.3 字符串长度

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

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

详见：示例

23.3.2.4 字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串。 拼接前会把与字符串相加的任何类型（包括数字型、NaN和undefined等）转成字符串，再拼接成一个新的字符串

console.log('沙漠' + "骆驼"); //两个字符串的拼接
console.log('pink老师' + 18); //字符串型 拼接 数字型
console.log('12' + 12); //字符串型 拼接 数字型
console.log('pink' + true); //字符串型 拼接 数字型

var age = 18;
console.log('pink老师' + age + '岁'); //字符串拼接数字型变量

详见：示例

案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年 xx 岁啦”（xx 表示刚才输入的年龄）

详见：示例

23.3.2.5 模板字符串

用来拼接字符串和变量，可理解为python中的f字符串。此外，模板字符串``中的换行操作也会反映在html页面中。而单引号和双引号不会。

语法：外面用``里面$(变量名)。

let age = 18
//模板字符串 外面用``里面$(变量名)
document.write(`我今年${age}岁了。`)

详见：示例

案例

页面弹出对话框，输入名字和年龄，页面显示： 大家好，我叫xxx，今年xx岁了。

详见：示例

23.3.3 布尔型 Boolean

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

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

console.log(true + 1); // 2
console.log(false + 1); // 1

详见：示例

23.3.4 Undefined 和 Null

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

console.log(true + 1); // 2
console.log(false + 1); // 1

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

详见：示例

23.4 复杂数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

  • 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null
  • 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

简单数据类型存放到栈里面，引用数据类型存放到堆里面。

23.4.1 数组

数组 (Array)：一种将一组数据存储在单个变量名下的数据类型。数组可以存储任意类型的数据。

  • 元素：数组中保存的每个数据都叫数组元素
  • 索引/下标：数组中数据的编号又被称为索引，下标。
  • 长度：数组中数据的个数，通过数组的length属性获得
let arr = [] //arr是变量， []是数组字面量

23.4.1.1 数组的声明

//方法一：
let 数组名 = [数据1, 数据2, ..., 数据n] 

//例如
let names = ['小明‘, '小刚', '小红', '小丽', '小米'] 

//方法二：（不常用，构造函数中会再次提及）
let 数组名 = new Array(数据1, 数据2, ..., 数据n)

23.4.1.2 数组的索引（下标）

索引从0开始

数组名[索引号] 

//例如
names = [0]  //索引第0个元素

23.4.1.3 数组的长度

数组名.length

23.4.1.4 遍历数组

需要使用到循环语句的知识，因为还没学到，这里不讲。

变量数组以及数组的增删改查等操作，详见第 25.3.4.1章。

23.4.2 对象

对象详见第 27 章。

23.5 获取变量数据类型

23.5.1 获取检测变量的数据类型

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

var num = 18;
console.log(typeof num) // 结果 number
表23.1: 不同类型的返回值
类型 例子 结果
String typeof “小白” string
Number typeof 18 number
Boolean typeof true boolean
Undefined typeof undefined undefined
Null typeof null object

详见：示例

23.5.2 字面量

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

  • 数字字面量：8, 9, 10
  • 字符串字面量：‘黑马程序员’, “大前端”
  • 布尔字面量：true，false

23.6 数据类型转换

23.6.1 为什么要进行数据类型转换

例如，使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

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

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

23.6.2 转换为字符串

表23.2: 转换为字符串
方式 说明 案例
加号拼接字符串 和字符串拼接的结果都是字符串 var num=1; alert(num+“我是字符串”);
toString()函数 转成字符串 var num=1; alert(num.toString());
字符串的String()方法 转成字符串 var num=1; alert(String(num));

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

详见：示例

23.6.3 转换为数字型

表23.3: 转换为字符串
方式 说明 案例
paraseInt(string)函数 将string类型转成整数数值型 paraseInt(’78);
paraseFloat(string)函数 将string类型转成浮点数值型 paraseFloat(’78.21);
Number()强制转换函数 将string类型转成数字型 Number(‘12’)
js隐式转换（- * /运算时） 利用算数运算转成数字型 ‘12’-1
+号后跟字符型 利用+号转换成数字型 +“123”
比较运算符 利用>，<, ==等比较运算符 2==‘2’

注意：

  • paraseInt输入小数时会向下取整。
  • 比较运算符也会将字符型隐式转换为数字型，详见第24.4章。

详见：示例

案例 1：计算年龄

此案例要求在页面中弹出一个输入框，我们输入出生年份后， 能计算出我们的年龄。

详见：示例

案例分析2

计算两个数的值， 用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结

详见：示例

23.6.4 转换为布尔型

  • 方式：Boolean()函数
  • 案例：Bollean('true')
  • 代表空、否定的值会被转换为 false ，如 ’’、0、NaN、null、undefined，其余值都会被转换为 true。
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

详见：示例