js 笔记 - 数据类型

老峰同学
180 阅读11分钟

1 概述

typeof 运算符

typeof [] // "object"

数组本质上只是一种特殊的对象。

instanceof 运算符可以区分数组和对象。

var o = {};
var a = [];
o instanceof Array // false
a instanceof Array // true

typeof null // "object"

null 的类型是 object，这是由于历史原因造成的。1995年的 js 语言第一版，只涉及了五种数据类型，没考虑 null，后来 null 独立出来，作为一种单独的数据类型。

2 null，undefined 和布尔值

  • 将一个变量赋值为 undefined 或 null，语法效果几乎没区别。

  • 在 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

js 刚诞生时，只设置了 null 表示“无”，根据 c 语言的传统，null 可以自动转为0。

Number(null) // 0
5 + null // 5

第一版的 js 里，null 被当成一个对象。但是 js 的设计者觉得表示“无”的值最好不是对象。

因此，他又设计了一个 undefined。区别是这样的：“null”是一个表示“空”的对象，转为数值时为0；undefined 是一个表示“此处无定义”的原始值，转为数值时为 NaN。

Number(undefined) // NaN
5 + undefined // NaN

下面是返回 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

布尔值

除了下面6个值被转为 false，其他值都视为 true。

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

注意，空数组和空对象对应的布尔值，都是 true。

if ([]) {
  console.log('true');
}
// true

if ({}) {
  console.log('true');
}
// true

3 数值

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

1 === 1.0 // true

由于浮点数不是精确的值，所以设计小数的比较和运算要小心。

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

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

数值精度

js 浮点数的64个二进制位，从最左边开始，是这样组成的。

  • 第1位：符号位，0 表示正数，1 表示负数
  • 第2位到第12位（共11位）：指数部分
  • 第13位到第64位（共52位）：小数部分（即有效数字）

符号位决定了一个数的正负，指数部分决定了数值的大小，小数部分决定了数值的精度。

指数部分一共有11个二进制位，因此大小范围就是0到2047。规定如果指数部分的值在0到2047之间（不含两个端点），那么有效数字的第一位默认总是1，不保存在64位浮点数之中。也就是说，有效数字这时总是 1.xx...xx 的形式，其中 xx.xx 的部分保存在64位浮点数之中，最长可能为52位。因此，js 提供的有效数字最长为53个二进制位。

(-1)^符号位 * 1.xx...xx * 2^指数部分

上面公式是正常情况下（指数部分在0到2047之间），一个数在 js 内部实际的表示形式。

精度最多只能到53个二进制位，这意味着，绝对值小于2的53次方的整数，即-253到253，都可以精确表示。

Math.pow(2, 53)
// 9007199254740992

Math.pow(2, 53) + 1
// 9007199254740992

Math.pow(2, 53) + 2
// 9007199254740994

Math.pow(2, 53) + 3
// 9007199254740996

Math.pow(2, 53) + 4
// 9007199254740996

上面代码中，大于2的53次方以后，整数运算的结果开始出现错误。所以，大于2的53次方的数值，都无法保持精度。由于2的53次方是一个16位的十进制数值，所以简单的法则就是，js 对15位的十进制数都可以精确处理。

Math.pow(2, 53)
// 9007199254740992

// 多出的三个有效数字，将无法保存
9007199254740992111
// 9007199254740992000

数值范围

根据标准，64位浮点数的指数部分的长度是11个二进制位，意味着指数部分的最大值是2047（2的11次方减1）。也就是说，64位浮点数的指数部分的最大值为2047，分出一半表示负数，则 js 能够表示的数值范围为21024到2-1023（开区间），超出这个范围的数无法表示。

如果一个数大于等于2的1024次方，那么就会发生“正向溢出”，即 js 无法表示这么大的数，这时就会返回 Infinity。

Math.pow(2, 1024) // Infinity

如果一个数小于等于2的-1075次方（指数部分最小值-1023，再加上小数部分的52位），那么就会发生“负向溢出”，即 js 无法表示这么小的数，这时会直接返回0。

Math.pow(2, -1075) // 0

特殊数值

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

0除以0会得到NaN。

0 / 0 // NaN

typeof NaN // 'number'

NaN === NaN // false

数组的indexOf方法内部使用的是严格相等运算符，所以该方法对NaN不成立。

[NaN].indexOf(NaN) // -1

NaN在布尔运算时被当作false。

Boolean(NaN) // false

NaN与任何数（包括它自己）的运算，得到的都是NaN。

NaN + 32 // NaN
NaN - 32 // NaN
NaN * 32 // NaN
NaN / 32 // NaN

Infinity

// 场景一
Math.pow(2, 1024)
// Infinity

// 场景二
0 / 0 // NaN
1 / 0 // Infinity

Infinity与NaN比较，总是返回false。

Infinity > NaN // false
-Infinity > NaN // false

Infinity < NaN // false
-Infinity < NaN // false

Infinity的四则运算，符合无穷的数学计算规则。

5 * Infinity // Infinity
5 - Infinity // -Infinity
Infinity / 5 // Infinity
5 / Infinity // 0

0乘以Infinity，返回NaN；0除以Infinity，返回0；Infinity除以0，返回Infinity。

0 * Infinity // NaN
0 / Infinity // 0
Infinity / 0 // Infinity

Infinity加上或乘以Infinity，返回的还是Infinity。

Infinity + Infinity // Infinity
Infinity * Infinity // Infinity

Infinity减去或除以Infinity，得到NaN。

Infinity - Infinity // NaN
Infinity / Infinity // NaN

Infinity与null计算时，null会转成0，等同于与0的计算。

null * Infinity // NaN
null / Infinity // 0
Infinity / null // Infinity

Infinity与undefined计算，返回的都是NaN。

undefined + Infinity // NaN
undefined - Infinity // NaN
undefined * Infinity // NaN
undefined / Infinity // NaN
Infinity / undefined // NaN

parseInt()

用于将字符串转为整数。

如果parseInt的参数不是字符串，则会先转为字符串再转换。

parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1

字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分。

parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN。

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

如果字符串以0x或0X开头，parseInt会将其按照十六进制数解析。

parseInt('0x10') // 16

对于那些会自动转为科学计数法的数字，parseInt会将科学计数法的表示方法视为字符串，因此导致一些奇怪的结果。

parseInt(1000000000000000000000.5) // 1
// 等同于
parseInt('1e+21') // 1

parseInt(0.0000008) // 8
// 等同于
parseInt('8e-7') // 8

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，则直接忽略。

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

如果字符串包含对于指定进制无意义的字符，则从最高位开始，只返回可以转换的数值。如果最高位无法转换，则直接返回NaN。

parseInt('1546', 2) // 1
parseInt('546', 2) // NaN

parseFloat()

用于将一个字符串转为浮点数。

如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。

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()

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

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

isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true

对于对象和数组，isNaN也返回true。

isNaN({}) // true
// 等同于
isNaN(Number({})) // true

isNaN(['xzy']) // true
// 等同于
isNaN(Number(['xzy'])) // true

但是，对于空数组和只有一个数值成员的数组，isNaN返回false。

isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false

isFinite()

isFinite方法返回一个布尔值，表示某个值是否为正常的数值。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

除了Infinity、-Infinity、NaN和undefined这几个值会返回false，isFinite对于其他的数值都会返回true。

4 字符串

单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。

'key = "value"'
"It's a long journey"

如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此。

'Did she say \'Hello\'?'
// "Did she say 'Hello'?"

"Did she say \"Hello\"?"
// "Did she say "Hello"?"

如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠。

var longString = 'Long \
long \
long \
string';

longString
// "Long long long string"

注意，反斜杠的后面必须是换行符，而不能有其他字符（比如空格），否则会报错。

转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。

需要用反斜杠转义的特殊字符，主要有下面这些。

  • \0 ：null（\u0000）
  • \b ：后退键（\u0008）
  • \f ：换页符（\u000C）
  • \n ：换行符（\u000A）
  • \r ：回车键（\u000D）
  • \t ：制表符（\u0009）
  • \v ：垂直制表符（\u000B）
  • \' ：单引号（\u0027）
  • \" ：双引号（\u0022）
  • \\ ：反斜杠（\u005C）

如果在非特殊字符前面使用反斜杠，则反斜杠会被省略。

'\a'
// "a"

字符集

解析代码的时候，JavaScript 会自动识别一个字符是字面形式表示，还是 Unicode 形式表示。输出给用户的时候，所有字符都会转成字面形式。

var f\u006F\u006F = 'abc';
foo // "abc"

每个字符在 js 内部都是以16位（即2个字节）的 UTF-16 格式存储。也就是说，js 的单位字符长度固定为16位长度，即2个字节。

'𝌆'.length // 2

对于码点在U+10000到U+10FFFF之间的字符，JavaScript 总是认为它们是两个字符（length属性为2）。所以处理的时候，必须把这一点考虑在内，也就是说，JavaScript 返回的字符串长度可能是不正确的。

Base64 转码

有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。另一个场景是，有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。

JavaScript 原生提供两个 Base64 相关的方法。

  • btoa()：任意值转为 Base64 编码

  • atob()：Base64 编码转为原来的值

    var string = 'Hello World!'; btoa(string) // "SGVsbG8gV29ybGQh" atob('SGVsbG8gV29ybGQh') // "Hello World!"

注意，这两个方法不适合非 ASCII 码的字符，会报错。

btoa('你好') // 报错

要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"
avatar
文章
阅读
粉丝