web开发JavaScript入门03之基本数据类型

数据类型

为什么需要数据类型

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

简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的

变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

var age = 10;        // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串    

在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型

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

数据类型的分类

JS 把数据类型分为两类

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

简单数据类型

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值	0
Boolean	布尔值类型，包含true,false等价于1，0	false
String	字符串类型	""
Underfined	var a;声明了变量没有赋值	underfined
Null	var a=null;声明了变量为空值	null

数字型

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

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

1. 数字型进制

   • JavaScript 对整数提供四种进制的表示方法：十进制、十六进制、八进制、二进制。

     • 十进制：没有前导0的数值。
     • 八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
     • 十六进制：有前缀0x或0X的数值。
     • 二进制：有前缀0b或0B的数值。

     默认情况下，JavaScript 内部会自动将八进制、十六进制、二进制转为十进制

2. 数字型范围

   • JavaScript中数值的最大和最小值
   • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
   • 最小值：Number.MIN_VALUE，这个值为：5e-32

3. 数字型三个特殊值

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

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"是一个非数字
     

JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，1与1.0是相同的，是同一个数

1 === 1.0 // true

这就是说，JavaScript 语言的底层根本没有整数，所有数字都是小数（64位浮点数）。容易造成混淆的是，某些运算只有整数才能完成，此时 JavaScript 会自动把64位浮点数，转成32位整数，然后再进行运算

由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心

0.1 + 0.2 === 0.3
// false
0.3 / 0.1
// 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1)
// false

NaN

NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合

5 - 'x' // NaN

上面代码运行时，会自动将字符串x转为数值，但是由于x不是数值，所以最后得到结果为NaN，表示它是“非数字”（NaN）

另外，一些数学函数的运算结果会出现NaN

Math.acos(2) // NaN
Math.log(-1) // NaN
Math.sqrt(-1) // NaN
// 0除以0也会得到NaN

需要注意的是，NaN不是独立的数据类型，而是一个特殊数值，它的数据类型依然属于Number

• NaN不等于任何值，包括它本身
• NaN在布尔运算时被当作false
• NaN与任何数（包括它自己）的运算，得到的都是NaN

与数值相关的方法

isNaN()

isNaN方法可以用来判断一个值是否为NaN

isNaN(NaN) // true
isNaN(123) // false

但是，isNaN只对数值有效，如果传入其他值，会被先转成数值。比如，传入字符串的时候，字符串会被先转成NaN，所以最后返回true，这一点要特别引起注意。也就是说，isNaN为true的值，有可能不是NaN，而是一个字符串

parseInt()

• parseInt方法用于将字符串转为整数
• 如果字符串头部有空格，空格会被自动去除
• 如果parseInt的参数不是字符串，则会先转为字符串再转换
• 字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分
• 如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN
• 所以，parseInt的返回值只有两种可能，要么是一个十进制整数，要么是NaN

parseInt('123') // 123
parseInt('   81') // 81
parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1
parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15
parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制

parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) // 1000
parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在2到36之间，才能得到有意义的结果，超出这个范围，则返回NaN。如果第二个参数是0、undefined和null，则直接忽略

arseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10

parseFloat()

• parseFloat方法用于将一个字符串转为浮点数
• 如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分
• parseFloat方法会自动过滤字符串前导的空格
• 如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN

parseFloat('3.14') // 3.14
parseFloat('3.14more non-digit characters') // 3.14
parseFloat('\t\v\r12.34\n ') // 12.34
parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

字符串型

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中

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

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

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

1. 字符串引号嵌套

   • JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

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

2. 字符串转义符

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

   • 转义符都是 \ 开头的，常用的转义符及其说明如下

   • 转义符	解释说明
     \n	换行符
     \\	斜杠
     \'	单引号
     \"	双引号
     \t	tab缩进
     \b	空格

3. 字符串长度

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

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

4. 字符串拼接

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

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

   • //1.1 字符串 "相加"
     alert('hello' + ' ' + 'world'); // hello world
     //1.2 数值字符串 "相加"
     alert('100' + '100'); // 100100
     //1.3 数值字符串 + 数值
     alert('11' + 12);     // 1112 
     

   • + 号总结口诀：数值相加 ，字符相连

5. 字符串拼接加强

   console.log('老师' + 18);        	 // 只要有字符就会相连 
   var age = 18;
   console.log('老师age岁啦');      	// 这样不行哦
   console.log('老师' + age);         // 老师18
   console.log('老师' + age + '岁啦'); // 老师18岁啦
   

   • 经常会将字符串和变量来拼接，变量可以很方便地修改里面的值
   • 变量是不能添加引号的，因为加引号的变量会变成字符串
   • 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号*（`）*标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义

// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`

字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）

var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"
// 直接对字符串使用方括号运算符
'hello'[1] // "e"

如果方括号中的数字超过字符串的长度，或者方括号中根本不是数字，则返回undefined

'abc'[3] // undefined
'abc'[-1] // undefined
'abc'['x'] // undefined

但是，字符串与数组的相似性仅此而已。实际上，无法改变字符串之中的单个字符

var s = 'hello';
delete s[0];
s // "hello"
s[1] = 'a';
s // "hello"
s[5] = '!';
s // "hello"

上面代码表示，字符串内部的单个字符无法改变和增删，这些操作会默默地失败

length 属性

length属性返回字符串的长度，该属性也是无法改变的

var s = 'hello';
s.length // 5
s.length = 3;
s.length // 5
s.length = 7;
s.length // 5

上面代码表示字符串的length属性无法改变，但是不会报错

布尔型

布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值

下列运算符会返回布尔值：

• 前置逻辑运算符： ! (Not)
• 相等运算符：===，!==，==，!=
• 比较运算符：>，>=，<，<=

如果 JavaScript 预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。

• undefined
• null
• false
• 0
• NaN
• ""或''（空字符串）

布尔值往往用于程序流程的控制

null 和 undefined

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别

var a = undefined;
// 或者
var a = null;

上面代码中，变量a分别被赋值为undefined和null，这两种写法的效果几乎等价

在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等

谷歌公司开发的 JavaScript 语言的替代品 Dart 语言，就明确规定只有null，没有undefined！

既然含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加复杂度，令初学者困扰吗？这与历史原因有关。

对于null和undefined，大致可以像下面这样理解。

null表示空值，即该处的值现在为空。调用函数时，某个参数未设置任何值，这时就可以传入null，表示该参数为空。比如，某个函数接受引擎抛出的错误作为参数，如果运行过程中未出错，那么这个参数就会传入null，表示未发生错误。

undefined表示“未定义”，下面是返回undefined的典型场景。

// 变量声明了，但没有赋值
var i;
i // undefined
// 调用函数时，应该提供的参数没有提供，该参数等于 undefined
function f(x) {
  return x;
}
f() // undefined
// 对象没有赋值的属性
var  o = new Object();
o.p // undefined
// 函数没有返回值时，默认返回 undefined
function f() {}
f() // undefined

获取变量数据类型

JavaScript 有三种方法，可以确定一个值到底是什么类型。

• typeof运算符
• instanceof运算符
• Object.prototype.toString方法

typeof运算符可以返回一个值的数据类型

1. 数值、字符串、布尔值分别返回number、string、boolean
2. 函数返回function
3. undefined返回undefined。利用这一点，typeof`可以用来检查一个没有声明的变量，而不报错。这个特点通常用在判断语句
4. 对象返回object
5. null返回object

typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
function f() {}
typeof f
// "function"
typeof undefined
// "undefined"
if (typeof v === "undefined") {
  // ...
}
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"

字面量

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

• 数字字面量：8, 9, 10
• 字符串字面量： “大前端”
• 布尔字面量：true，false

数据类型转换

什么是数据类型转换？

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换

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

转换为字符串

方式	说明	案例
toString()	转成字符串	var num=1;alert(num.toString())
String()强制转换	转成字符串	var num=1;alert(String(num))
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num+'')

• toString() 和 String() 使用方式不一样
• 三种转换方式，更多第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换

转换为数字型

方式	说明	案例
parseInt(string)函数	转成整型数值型	parsetInt('78')
parseFloat(string)函数	转成浮点数数值型	parsetFloat('78.21')
Number()强制转换函数	转换成数值型	Number('12')
隐式转换-,*,\	利用算术运算隐式转换成数值型	'12'-0

• 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
• 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean('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