JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有六种。(ES6 又新增了 Symbol 和 BigInt 数据类型,本教程不涉及。)
- 原始类型: 它们是最基本的数据类型,不能再细分了
- ①数值(number):整数和小数(比如1和3.14)。
- ②字符串(string):文本(比如Hello World)。
- ③布尔值(boolean):表示真伪的两个特殊值,即true(真)和false(假)。
- ④对象(object):各种值组成的集合。一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。
- 特殊值
- ⑤undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值。
- ⑥null:表示空值,即此处的值为空。
对象是最复杂的数据类型,又可以分成三个子类型。
- 狭义的对象(object)
- 数组(array)
- 函数(function)
狭义的对象和数组是两种不同的数据组合方式,除非特别声明,本教程的“对象”都特指狭义的对象。
函数其实是处理数据的方法,JavaScript 把它当成一种数据类型,可以赋值给变量,这为编程带来了很大的灵活性,也为 JavaScript 的“函数式编程”奠定了基础。
1、typeof运算符
typeof运算符可以返回一个值的数据类型。数值、字符串、布尔值分别返回number、string、boolean,函数返回function
undefined返回undefined。利用这一点,typeof可以用来检查一个没有声明的变量,而不报错。
实际编程中,这个特点通常用在判断语句。
// 错误的写法
if (v) {
// ...
}
// ReferenceError: v is not defined
// 正确的写法
if (typeof v === "undefined") {
// ...
}
对象返回object。
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
上面代码中,空数组([])的类型也是object,这表示在 JavaScript 内部,数组本质上只是一种特殊的对象。
null返回object。null的类型是object,这是由于历史原因造成的。1995年的 JavaScript 语言第一版,只设计了五种数据类型(对象、整数、浮点数、字符串和布尔值),没考虑null,只把它当作object的一种特殊值。后来null独立出来,作为一种单独的数据类型,为了兼容以前的代码,typeof null返回object就没法改变了。
2、null, undefined
- null是一个表示“空”的对象,转为数值时为0;
- undefined是一个表示“此处无定义”的原始值,转为数值时为NaN。
Number(null) // 0
5 + null // 5
Number(undefined) // NaN
5 + undefined // NaN
在if语句中,它们都会被自动转为false,相等运算符(==)甚至直接报告两者相等。
if (!undefined) {
console.log('undefined is false');
}
// undefined is false
if (!null) {
console.log('null is false');
}
// null is false
undefined == null
// true
对于null和undefined,大致可以像下面这样理解:
- null表示空值,即该处的值现在为空。调用函数时,某个参数未设置任何值,这时就可以传入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
3、布尔值
如果 JavaScript 预期某个位置应该是布尔值,会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false,其他值都视为true
- 0
- ""或”(空字符串)
- false
- null
- NaN
- undefined
if ('') {
console.log('true');
}
// 没有任何输出
上面代码中,if命令后面的判断条件,预期应该是一个布尔值,所以 JavaScript 自动将空字符串,转为布尔值false,导致程序不会进入代码块,所以没有任何输出。
空数组([])和空对象({})对应的布尔值,都是true
if ([]) {
console.log('true');
}
// true
if ({}) {
console.log('true');
}
// true
4、整数和浮点数 (内部存储只有浮点数)
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
数值精度:根据国际标准 IEEE 754,JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的。
- 第1位:符号位,0表示正数,1表示负数
- 第2位到第12位(共11位):指数部分
- 第13位到第64位(共52位):小数部分(即有效数字)
符号位决定了一个数的正负,指数部分决定了数值的大小,小数部分决定了数值的精度。
精度最多只能到53个二进制位,这意味着,绝对值小于2的53次方的整数,即-253 + 1 到 253 – 1,都可以精确表示。
JavaScript 提供Number对象的MAX_VALUE和MIN_VALUE属性,返回可以表示的具体的最大值和最小值。
Number.MAX_VALUE
// 1.7976931348623157e+308
Number.MIN_VALUE
// 5e-324
数值的表示法:JavaScript 的数值有多种表示方法,可以用字面形式直接表示,比如35(十进制)和0xFF(十六进制)。数值也可以采用科学计数法表示,下面是几个科学计数法的例子。科学计数法允许字母e或E的后面,跟着一个整数,表示这个数值的指数部分。
123e3 // 123000
123e-3 // 0.123
-3.1E+12
.1e-23
以下两种情况,JavaScript 会自动将数值转为科学计数法表示,其他情况都采用字面形式直接表示。
- 小数点前的数字多于21位。
- 小数点后的零多于5个。
1234567890123456789012
// 1.2345678901234568e+21
123456789012345678901
// 123456789012345680000
// 小数点后紧跟5个以上的零,
// 就自动转为科学计数法
0.0000003 // 3e-7
// 否则,就保持原来的字面形式
0.000003 // 0.000003
数值的进制:使用字面量(literal)直接表示一个数值时,JavaScript 对整数提供四种进制的表示方法:十进制、十六进制、八进制、二进制。
- 十进制:没有前导0的数值。
- 八进制:有前缀0o或0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。但是如果前导0后面有数字8和9,则该数值被视为十进制。前导0表示八进制,处理时很容易造成混乱。ES5 的严格模式和 ES6,已经废除了这种表示法,但是浏览器为了兼容以前的代码,目前还继续支持这种表示法。
- 十六进制:有前缀0x或0X的数值。
- 二进制:有前缀0b或0B的数值。
JavaScript 内部会自动将八进制、十六进制、二进制转为十进制。如果八进制、十六进制、二进制的数值里面,出现不属于该进制的数字,就会报错。
0xff // 255
0o377 // 255
0b11 // 3
0888 // 888
0777 // 511
0xzz // 报错
0o88 // 报错
0b22 // 报错
上面代码中,十六进制出现了字母z、八进制出现数字8、二进制出现数字2,因此报错。
正零和负零
前面说过,JavaScript 的64位浮点数之中,有一个二进制位是符号位。这意味着,任何一个数都有一个对应的负值,就连0也不例外。
JavaScript 内部实际上存在2个0:一个是+0,一个是-0,区别就是64位浮点数表示法的符号位不同。它们是等价的。
几乎所有场合,正零和负零都会被当作正常的0。唯一有区别的场合是,+0或-0当作分母,返回的值是不相等的。1除以正零得到+Infinity,除以负零得到-Infinity,这两者是不相等的.
-0 === +0 // true
0 === -0 // true
0 === +0 // true
+0 // 0
-0 // 0
(-0).toString() // '0'
(+0).toString() // '0'
(1 / +0) === (1 / -0) // false
NaN
NaN是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。
5 - 'x' // NaN
上面代码运行时,会自动将字符串x转为数值,但是由于x不是数值,所以最后得到结果为NaN,表示它是“非数字”(NaN)。
另外,一些数学函数的运算结果会出现NaN,0除以0也会得到NaN.
需要注意的是,NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number,使用typeof运算符可以看得很清楚。
Math.acos(2) // NaN
Math.log(-1) // NaN
Math.sqrt(-1) // NaN
0 / 0 // NaN
typeof NaN // 'number'
- NaN不等于任何值,包括它本身。
- 数组的indexOf方法内部使用的是严格相等运算符,所以该方法对NaN不成立。
- NaN在布尔运算时被当作false。
- NaN与任何数(包括它自己)的运算,得到的都是NaN。ES6 引入指数运算符(**)后,出现了一个例外
NaN === NaN // false
[NaN].indexOf(NaN) // -1
Boolean(NaN) // false
NaN + 32 // NaN
NaN - 32 // NaN
NaN * 32 // NaN
NaN / 32 // NaN
NaN ** 0 // 1
Infinity
Infinity表示“无穷”,用来表示两种场景。一种是一个正的数值太大,或一个负的数值太小,无法表示;另一种是非0数值除以0,得到Infinity。
// 场景一
Math.pow(2, 1024)
// Infinity
// 场景二
0 / 0 // NaN
1 / 0 // Infinity
上面代码中,第一个场景是一个表达式的计算结果太大,超出了能够表示的范围,因此返回Infinity。第二个场景是0除以0会得到NaN,而非0数值除以0,会返回Infinity。
Infinity有正负之分,Infinity表示正的无穷,-Infinity表示负的无穷。非零正数除以-0,会得到-Infinity,负数除以-0,会得到Infinity。由于数值正向溢出(overflow)、负向溢出(underflow)和被0除,JavaScript 都不报错,所以单纯的数学运算几乎没有可能抛出错误
Infinity === -Infinity // false
1 / -0 // -Infinity
-1 / -0 // Infinity
Infinity大于一切数值(除了NaN),-Infinity小于一切数值(除了NaN)。Infinity与NaN比较,总是返回false。
Infinity > 1000 // true
-Infinity < -1000 // true
Infinity > NaN // false
-Infinity > NaN // false
Infinity < NaN // false
-Infinity < NaN // false
- Infinity的四则运算,符合无穷的数学计算规则。
- 0乘以Infinity,返回NaN;0除以Infinity,返回0;Infinity除以0,返回Infinity
- Infinity加上或乘以Infinity,返回的还是Infinity。
- Infinity减去或除以Infinity,得到NaN。
- Infinity与null计算时,null会转成0,等同于与0的计算
- Infinity与undefined计算,返回的都是NaN。
5 * Infinity // Infinity
5 - Infinity // -Infinity
Infinity / 5 // Infinity
5 / Infinity // 0
0 * Infinity // NaN
0 / Infinity // 0
Infinity / 0 // Infinity
Infinity + Infinity // Infinity
Infinity * Infinity // Infinity
Infinity - Infinity // NaN
Infinity / Infinity // NaN
null * Infinity // NaN
null / Infinity // 0
Infinity / null // Infinity
undefined + Infinity // NaN
undefined - Infinity // NaN
undefined * Infinity // NaN
undefined / Infinity // NaN
Infinity / undefined // NaN
parseInt方法
用于将字符串转为整数:parseInt的返回值只有两种可能,要么是一个十进制整数,要么是NaN
- 如果字符串头部有空格,空格会被自动去除
- 如果parseInt的参数不是字符串,则会先转为字符串再转换
- 字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分
- 如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN
- 如果字符串以0x或0X开头,parseInt会将其按照十六进制数解析。
- 如果字符串以0开头,将其按照10进制解析
- 对于那些会自动转为科学计数法的数字,parseInt会将科学计数法的表示方法视为字符串,因此导致一些奇怪的结果。
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('0x10') // 16
parseInt('011') // 11
parseInt(1000000000000000000000.5) // 1
// 等同于
parseInt('1e+21') // 1
parseInt(0.0000008) // 8
// 等同于
parseInt('8e-7') // 8
进制转换:parseInt方法还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的十进制数。
- 默认情况下,parseInt的第二个参数为10,即默认是十进制转十进制。
- 如果第二个参数是0、undefined和null,直接忽略。
- 如果第二个参数不是数值,会被自动转为一个整数。这个整数只有在2到36之间,才能得到有意义的结果,超出这个范围,则返回NaN。
- 如果字符串包含对于指定进制无意义的字符,则从最高位开始,只返回可以转换的数值。如果最高位无法转换,则直接返回NaN。
parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) //
parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512
parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10
parseInt('1546', 2) // 1
parseInt('546', 2) // NaN
如果parseInt的第一个参数不是字符串,会被先转为字符串。这会导致一些令人意外的结果。
parseInt(0x11, 36) // 43
parseInt(0x11, 2) // 1
// 等同于
parseInt(String(0x11), 36)
parseInt(String(0x11), 2)
// 等同于
parseInt('17', 36)
parseInt('17', 2)
上面代码中,十六进制的0x11会被先转为十进制的17,再转为字符串。然后,再用36进制或二进制解读字符串17,最后返回结果43和1。
这种处理方式,对于八进制的前缀0,尤其需要注意。
parseInt(011, 2) // NaN
// 等同于
parseInt(String(011), 2)
// 等同于
parseInt(String(9), 2)
上面代码中,第一行的011会被先转为字符串9,因为9不是二进制的有效字符,所以返回NaN。如果直接计算parseInt(‘011’, 2),011则是会被当作二进制处理,返回3。
JavaScript 不再允许将带有前缀0的数字视为八进制数,而是要求忽略这个0。但是,为了保证兼容性,大部分浏览器并没有部署这一条规定。
parseFloat方法
用于将一个字符串转为浮点数。
- 如果字符串符合科学计数法,则会进行相应的转换
- 如果字符串包含不能转为浮点数的字符,则不再进行往后转换,返回已经转好的部分
- parseFloat方法会自动过滤字符串前导的空格。
- 如果参数不是字符串,则会先转为字符串再转换
- 如果字符串的第一个字符不能转化为浮点数,则返回NaN。 parseFloat会将空字符串转为NaN
- parseFloat的转换结果不同于Number函数
parseFloat('3.14') // 3.14
parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14
parseFloat('3.14more non-digit characters') // 3.14
parseFloat('\t\v\r12.34\n ') // 12.34
parseFloat([1.23]) // 1.23
// 等同于
parseFloat(String([1.23])) // 1.23
parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN
parseFloat(true) // NaN
Number(true) // 1
parseFloat(null) // NaN
Number(null) // 0
parseFloat('') // NaN
Number('') // 0
parseFloat('123.45#') // 123.45
Number('123.45#') // NaN
isNaN方法
可以用来判断一个值是否为NaN
- isNaN只对数值有效,如果传入其他值,会被先转成数值。比如,传入字符串的时候,字符串会被先转成NaN,所以最后返回true,这一点要特别引起注意。也就是说,isNaN为true的值,有可能不是NaN,而是一个字符串。
- 出于同样的原因,对于对象和数组,isNaN也返回true。
- 对于空数组和只有一个数值成员的数组,isNaN返回false:这些数组能被Number函数转成数值
isNaN(NaN) // true
isNaN(123) // false
isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true
isNaN({}) // true
// 等同于
isNaN(Number({})) // true
isNaN(['xzy']) // true
// 等同于
isNaN(Number(['xzy'])) // true
isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false
使用isNaN之前,最好判断一下数据类型:
function myIsNaN(value) {
return typeof value === 'number' && isNaN(value);
}
判断NaN更可靠的方法是,利用NaN为唯一不等于自身的值的这个特点,进行判断。
function myIsNaN(value) {
return value !== value;
}
isFinite方法
返回一个布尔值,表示某个值是否为正常的数值。除了Infinity、-Infinity、NaN和undefined这几个值会返回false,isFinite对于其他的数值都会返回true。
isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true
5、字符串
字符串就是零个或多个排在一起的字符,放在单引号或双引号之中。
由于 HTML 语言的属性值使用双引号,所以很多项目约定 JavaScript 语言的字符串只使用单引号,本教程遵守这个约定。
- 字符串默认只能写在一行内,分成多行将会报错。如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠。
- 连接运算符(+)可以连接多个单行字符串,将长字符串拆成多行书写,输出的时候也是单行。
- 如果想输出多行字符串,有一种利用多行注释的变通方法。
var longString = 'Long \
long \
long \
string';
longString
// "Long long long string"
var longString2 = 'Long '
+ 'long '
+ 'long '
+ 'string';
(function () { /*
line 1
line 2
line 3
*/}).toString().split('\n').slice(1, -1).join('\n')
// "line 1
// line 2
// line 3"
转义:反斜杠(\)在字符串内有特殊含义,用来表示一些特殊字符,所以又称为转义符。
需要用反斜杠转义的特殊字符,主要有下面这些。
\0 :null(\u0000)
\b :后退键(\u0008)
\f :换页符(\u000C)
\n :换行符(\u000A)
\r :回车键(\u000D)
\t :制表符(\u0009)
\v :垂直制表符(\u000B)
\' :单引号(\u0027)
\" :双引号(\u0022)
\\ :反斜杠(\u005C)
反斜杠还有三种特殊用法。
(1)\HHH
反斜杠后面紧跟三个八进制数(000到377),代表一个字符。HHH对应该字符的 Unicode 码点,比如\251表示版权符号。显然,这种方法只能输出256种字符。
(2)\xHH
\x后面紧跟两个十六进制数(00到FF),代表一个字符。HH对应该字符的 Unicode 码点,比如\xA9表示版权符号。这种方法也只能输出256种字符。
(3)\uXXXX
\u后面紧跟四个十六进制数(0000到FFFF),代表一个字符。XXXX对应该字符的 Unicode 码点,比如\u00A9表示版权符号。
下面是这三种字符特殊写法的例子。
'\251' // ":copyright:"
'\xA9' // ":copyright:"
'\u00A9' // ":copyright:"
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
//如果在非特殊字符前面使用反斜杠,则反斜杠会被省略。
'\a'
// "a"
//如果字符串的正常内容之中,需要包含反斜杠,则反斜杠前面需要再加一个反斜杠,用来对自身转义。
"Prev \\ Next"
// "Prev \ Next"
字符串数组
- 字符串与数组
- 如果方括号中的数字超过字符串的长度,或者方括号中根本不是数字,则返回undefined
- 无法改变字符串之中的单个字符:字符串内部的单个字符无法改变和增删,这些操作会默默地失败。
- length属性返回字符串的长度,该属性也是无法改变的
var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"
// 直接对字符串使用方括号运算符
'hello'[1] // "e"
'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"
var s = 'hello';
s.length // 5
s.length = 3;
s.length // 5
s.length = 7;
s.length // 5
字符集
JavaScript 使用 Unicode 字符集。JavaScript 引擎内部,所有字符都用 Unicode 表示。
- JavaScript 不仅以 Unicode 储存字符,还允许直接在程序中使用 Unicode 码点表示字符,即将字符写成\uxxxx的形式,其中xxxx代表该字符的 Unicode 码点。比如,\u00A9代表版权符号。
- 解析代码的时候,JavaScript 会自动识别一个字符是字面形式表示,还是 Unicode 形式表示。输出给用户的时候,所有字符都会转成字面形式。
- 每个字符在 JavaScript 内部都是以16位(即2个字节)的 UTF-16 格式储存。也就是说,JavaScript 的单位字符长度固定为16位长度,即2个字节
- UTF-16 有两种长度:对于码点在U+0000到U+FFFF之间的字符,长度为16位(即2个字节);对于码点在U+10000到U+10FFFF之间的字符,长度为32位(即4个字节),而且前两个字节在0xD800到0xDBFF之间,后两个字节在0xDC00到0xDFFF之间。举例来说,码点U+1D306对应的字符为𝌆,它写成 UTF-16 就是0xD834 0xDF06。
- JavaScript 对 UTF-16 的支持是不完整的,由于历史原因,只支持两字节的字符,不支持四字节的字符。这是因为 JavaScript 第一版发布的时候,Unicode 的码点只编到U+FFFF,因此两字节足够表示了。后来,Unicode 纳入的字符越来越多,出现了四字节的编码。但是,JavaScript 的标准此时已经定型了,统一将字符长度限制在两字节,导致无法识别四字节的字符。上一节的那个四字节字符𝌆,浏览器会正确识别这是一个字符,但是 JavaScript 无法识别,会认为这是两个字符。
- 总结:对于码点在U+10000到U+10FFFF之间的字符,JavaScript 总是认为它们是两个字符(length属性为2)。所以处理的时候,必须把这一点考虑在内,也就是说,JavaScript 返回的字符串长度可能是不正确的。
var s = '\u00A9';
s // ":copyright:"
var f\u006F\u006F = 'abc'; //变量名foo是 Unicode 形式表示,JavaScript 会自动识别
foo // "abc"
'𝌆'.length // 2
Base64 转码
有时,文本里面包含一些不可打印的符号,比如 ASCII 码0到31的符号都无法打印出来,这时可以使用 Base64 编码,将它们转成可以打印的字符。另一个场景是,有时需要以文本格式传递二进制数据,那么也可以使用 Base64 编码。
所谓 Base64 就是一种编码方法,可以将任意值转成 0~9、A~Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的,不是为了加密,而是为了不出现特殊字符,简化程序的处理。
JavaScript 原生提供两个 Base64 相关的方法: 这两个方法不适合非 ASCII 码的字符,会报错
- btoa():任意值转为 Base64 编码
- atob():Base64 编码转为原来的值
- 要将非 ASCII 码字符转为 Base64 编码,必须中间插入一个转码环节,再使用这两个方法。
var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"
btoa('你好') // 报错,类似: Uncaught DOMException: String contains an invalid character
function b64Encode(str) {
return btoa(encodeURIComponent(str));
}
function b64Decode(str) {
return decodeURIComponent(atob(str));
}
b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"