JS基础之数据类型详解

关于数据类型的一些误解

网上关于js数据类型的资料都比较混乱。如 W3school 里的表述：JavaScript 变量能够保存多种数据类型（数值、字符串值、数组、对象等等）。菜鸟教程也将数组(Array)、函数(Function)列为与String等并列的数据类型。某些介绍JS数据类型的技术博客，通篇只讲了怎么区分 object、function 和 array。但严格来讲，function 和 array 并不是一种数据类型。

谨记：在ECMAScript中，数据类型只有 7 种，String、Number、Boolean、Null、Undefined、Symbol（ES6新增）、Object，其他的都不是。这7中可以分为基本类型（另一些叫法：简单类型/原始类型）和引用类型（另一些叫法：复杂类型）。上面7种类型基本都能用 typeof 操作符来检测（除了 null 返回 "object" 、函数返回 "function"）。其中 Object 是引用类型，其他的都是基本类型。

从技术角度讲，函数在 ECMAScript 中是对象，不是一种数据类型。然而，函数也确实有一些特殊的属性，因此通过 typeof 操作符来区分函数和其他对象是有必要的。从逻辑角度来看，null值表示一个空对象指针，而这也正是使用 typeof 操作符检测 null 值时返回 "object" 的原因。

数据类型

Undefined类型

Undefined 类型只有一个值，使用 var 声明变量，但未对其加以初始化时，这个变量值就是undefined。一般而言，不存在需要显式把一个变量设置为 undefined 的情况。

Null类型

Null 是第二个只有一个值的数据类型。null == undefined 返回true。尽管如此，它俩的用途却完全不同。如前所述，无论什么时候，都不要把一个变量的值显式地声明为 undefined，可是同样的规则对null 并不适用。只要意在保存对象的变量还没有真正保存对象，就应该明确地让该变量保存 null 值。这样做不仅可以体现 null 作为空对象指针的惯例，也有助于进一步区分 null 和 undefined。

Boolean类型

该类型只有两个字面值，true 和 false。这两个值和数字值不是一回事，因此 true 不一定等于 1，false 也不一定等于 0。要将一个值转换为其对应的 boolean 值，可以调用函数 Boolean()。可以对任何数据类型的值调用Boolean()函数，而且总会返回一个Boolean 值。至于返回的这个值是true 还是false，取决于要转换值的数据类型及其实际值。

一般来说，String 类型中任何非空字符串返回 true，空字符串（""）返回 false；Number 类型中任何非零数字值（包括无穷大）返回 true， 0 和 NaN 返回 false；Object 类型中任何对象返回 true， null返回 false；Undefined 类型返回 false。

Number类型

Number 类型定义了不同的数值字面量格式。最基本的数值字面量格式是十进制整数，除了以十进制表示外，整数还可以通过八进制（以8 为基数）或十六进制（以16 为基数）的字面值来表示。其中，八进制字面值的第一位必须是零（0），然后是八进制数字序列（0～7）。如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析。请看下面的例子：

var intNum = 55; // 整数
var octalNum1 = 070; // 八进制的56
var octalNum2 = 079; // 无效的八进制数值——解析为79
var octalNum3 = 08; // 无效的八进制数值——解析为8

八进制字面量在严格模式下是无效的，会导致支持的JavaScript 引擎抛出错误。十六进制字面值的前两位必须是0x，后跟任何十六进制数字（0～9 及A～F）。其中，字母A～F可以大写，也可以小写。如下面的例子所示：

var hexNum1 = 0xA; // 十六进制的10
var hexNum2 = 0x1f; // 十六进制的31

在进行算术计算时，所有以八进制和十六进制表示的数值最终都将被转换成十进制数值。

1） 浮点数值

所谓浮点数值，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。由于保存浮点数值需要的内存空间是保存整数值的两倍，因此ECMAScript 会不失时机地将浮点数值转换为整数值。显然，如果小数点后面没有跟任何数字，那么这个数值就可以作为整数值来保存。同样地，如果浮点数值本身表示的就是一个整数（如1.0），那么该值也会被转换为整数，如下面的例子所示：

var floatNum1 = 1.; // 小数点后面没有数字——解析为1
var floatNum2 = 10.0; // 整数——解析为10

在默认情况下，ECMASctipt 会将那些小数点后面带有6 个零以上的浮点数值转换为以e 表示法表示的数值（例如，0.0000003 会被转换成3e-7）。浮点数值的最高精度是17 位小数，但在进行算术计算时其精确度远远不如整数。例如，0.1 加0.2的结果不是0.3，而是0.30000000000000004。因此，永远不要如下面例子那样，测试某个特定的浮点数值。

if (a + b == 0.3){   //  不要做这样的测试！
    alert("You got 0.3.");
}

关于浮点数值计算会产生舍入误差的问题，有一点需要明确：这是使用基于IEEE754 数值的浮点计算的通病，ECMAScript 并非独此一家；其他使用相同数值格式的语言也存在这个问题。

2） 数值范围

由于内存的限制，ECMAScript 并不能保存世界上所有的数值。ECMAScript 能够表示的最小数值保存在 Number.MIN_VALUE 中——在大多数浏览器中，这个值是 5e-324；能够表示的最大数值保存在Number.MAX_VALUE 中——在大多数浏览器中，这个值是1.7976931348623157e+308。如果某次计算的结果得到了一个超出JavaScript 数值范围的值，那么这个数值将被自动转换成特殊的Infinity 值。具体来说，如果这个数值是负数，则会被转换成-Infinity（负无穷），如果这个数值是正数，则会被转换成Infinity（正无穷）。

如上所述，如果某次计算返回了正或负的Infinity 值，那么该值将无法继续参与下一次的计算，
因为Infinity 不是能够参与计算的数值。要想确定一个数值是不是有穷的（换句话说，是不是位于最小和最大的数值之间），可以使用isFinite()函数。这个函数在参数位于最小与最大数值之间时会返回true，如下面的例子所示：

var result = Number.MAX_VALUE + Number.MAX_VALUE;
alert(isFinite(result));  // false

尽管在计算中很少出现某些值超出表示范围的情况，但在执行极小或极大数值的计算时，检测监控这些值是可能的，也是必需的。访问 Number.NEGATIVE_INFINITY 和 Number.POSITIVE_INFINITY也可以得到负和正 Infinity 的值。可以想见，这两个属性中分别保存着-Infinity 和 Infinity。

3） NaN

NaN，即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。例如，在其他编程语言中，任何数值除以 0 都会导致错误，从而停止代码执行。但在ECMAScript 中，任何数值除以0 会返回NaN，因此不会影响其他代码的执行。NaN 本身有两个非同寻常的特点。首先，任何涉及NaN 的操作（例如NaN/10）都会返回NaN，这个特点在多步计算中有可能导致问题。其次，NaN 与任何值都不相等，包括NaN 身。

针对NaN 的这两个特点，ECMAScript 定义了isNaN()函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。而任何不能被转换为数值的值都会导致这个函数返回 true。例子：

alert(isNaN(NaN)); //true
alert(isNaN(10)); //false（10 是一个数值）
alert(isNaN("10")); //false（可以被转换成数值10）
alert(isNaN("blue")); //true（不能转换成数值）
alert(isNaN(true)); //false（可以被转换成数值1）

尽管有点儿不可思议，但isNaN()确实也适用于对象。在基于对象调用isNaN()函数时，会首先调用对象的valueOf()方法，然后确定该方法返回的值是否可以转换为数值。如果不能，则基于这个返回值再调用toString()方法，再测试返回值。而这个过程也是ECMAScript 中内置函数和操作符的一般执行流程

4） 数值转换

有3 个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()。第一个函数，即转型函数Number()可以用于任何数据类型，而另两个函数则专门用于把字符串转换成数值。这3 个函数对于同样的输入会有返回不同的结果。Number()函数的转换规则如下。
 如果是Boolean 值，true 和false 将分别被转换为1 和0。
 如果是数字值，只是简单的传入和返回。
 如果是null 值，返回0。
 如果是undefined，返回NaN。
 如果是字符串，遵循下列规则：

• 如果字符串中只包含数字（包括前面带正号或负号的情况），则将其转换为十进制数值，即"1"会>变成1，"123"会变成123，而"011"会变成11（注意：前导的零被忽略了）；
• 如果字符串中包含有效的浮点格式，如"1.1"，则将其转换为对应的浮点数值（同样，也会忽略前导零）；
• 如果字符串中包含有效的十六进制格式，例如"0xf"，则将其转换为相同大小的十进制整数值；
• 如果字符串是空的（不包含任何字符），则将其转换为0；
• 如果字符串中包含除上述格式之外的字符，则将其转换为NaN。

 如果是对象，则调用对象的valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，然后再次依照前面的规则转换返回的字符串值。

例子：

var num1 = Number("Hello world!"); //NaN
var num2 = Number(""); //0
var num3 = Number("000011"); //11
var num4 = Number(true); //1

由于Number()函数在转换字符串时比较复杂而且不够合理，因此在处理整数的时候更常用的是parseInt() 函数。parseInt()函数在转换字符串时，更多的是看其是否符合数值模式。它会忽略字符串前面的空格，直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号，parseInt() 就会返回 NaN；也就是说，用 parseInt() 转换空字符串会返回 NaN（Number() 对空字符返回0）。如果第一个字符是数字字符，parseInt() 会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符。例如，"1234blue" 会被转换为1234，因为"blue"会被完全忽略。类似地，"22.5"会被转换为22，因为小数点并不是有效的数字字符。

如果字符串中的第一个字符是数字字符，parseInt() 也能够识别出各种整数格式（即前面讨论的十进制、八进制和十六进制数）。也就是说，如果字符串以"0x"开头且后跟数字字符，就会将其当作一个十六进制整数；如果字符串以"0"开头且后跟数字字符，则会将其当作一个八进制数来解析。例子：

var num1 = parseInt("1234blue"); // 1234
var num2 = parseInt(""); // NaN
var num3 = parseInt("0xA"); // 10（十六进制数）
var num4 = parseInt(22.5); // 22
var num5 = parseInt("070"); // 56（八进制数）
var num6 = parseInt("70"); // 70（十进制数）
var num7 = parseInt("0xf"); // 15（十六进制数）

在使用parseInt()解析像八进制字面量的字符串时，ECMAScript 3 和5 存在分歧。例如：

var num = parseInt("070"); // ECMAScript 3 认为是56（八进制），ECMAScript 5 认为是70（十进制）

在ECMAScript 3 JavaScript 引擎中，"070"被当成八进制字面量，因此转换后的值是十进制的56。而在ECMAScript 5 JavaScript 引擎中，parseInt()已经不具有解析八进制值的能力，因此前导的零会被认为无效，从而将这个值当成"70"，结果就得到十进制的70。在ECMAScript 5 中，即使是在非严格模式下也会如此。为了消除在使用parseInt()函数时可能导致的上述困惑，可以为这个函数提供第二个参数：转换时使用的基数（即多少进制）。如果知道要解析的值是十六进制格式的字符串，那么指定基数16 作为第二个参数，可以保证得到正确的结果，例如：

var num = parseInt("0xAF", 16); //175

实际上，如果指定了16 作为第二个参数，字符串可以不带前面的"0x"，如下所示：

var num1 = parseInt("AF", 16); //175
var num2 = parseInt("AF"); //NaN

这个例子中的第一个转换成功了，而第二个则失败了。差别在于第一个转换传入了基数，明确告诉parseInt() 要解析一个十六进制格式的字符串；而第二个转换发现第一个字符不是数字字符，因此就自动终止了。指定基数会影响到转换的输出结果。例如：

var num1 = parseInt("10", 2); //2 （按二进制解析）
var num2 = parseInt("10", 8); //8 （按八进制解析）
var num3 = parseInt("10", 10); //10 （按十进制解析）
var num4 = parseInt("10", 16); //16 （按十六进制解析）

不指定基数意味着让parseInt()决定如何解析输入的字符串，因此为了避免错误的解析，我们建议无论在什么情况下都明确指定基数。多数情况下，我们要解析的都是十进制数值，因此始终将10 作为第二个参数是非常必要的。

与parseInt()函数类似，parseFloat()也是从第一个字符（位置0）开始解析每个字符。而且也是一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止。也就是说，字符串中的第一个小数点是有效的，而第二个小数点就是无效的了，因此它后面的字符串将被忽略。举例来说，"22.34.5"将会被转换为22.34。

除了第一个小数点有效之外，parseFloat() 与 parseInt() 的第二个区别在于它始终都会忽略前导的零。parseFloat() 可以识别前面讨论过的所有浮点数值格式，也包括十进制整数格式。但十六进制格式的字符串则始终会被转换成0。由于parseFloat()只解析十进制值，因此它没有用第二个参数指定基数的用法。最后还要注意一点：如果字符串包含的是一个可解析为整数的数（没有小数点，或者小数点后都是零），parseFloat() 会返回整数。以下是使用 parseFloat() 转换数值的几个典型示例。

var num1 = parseFloat("1234blue"); //1234 （整数）
var num2 = parseFloat("0xA"); //0
var num3 = parseFloat("22.5"); //22.5
var num4 = parseFloat("22.34.5"); //22.34
var num5 = parseFloat("0908.5"); //908.5
var num6 = parseFloat("3.125e7"); //31250000

String 类型

1） 字符串的特点

ECMAScript 中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量，例如：

var lang = "Java";
lang = lang + "Script";

以上示例中的变量lang 开始时包含字符串"Java"。而第二行代码把lang 的值重新定义为"Java"
与"Script"的组合，即"JavaScript"。实现这个操作的过程如下：首先创建一个能容纳10 个字符的新字符串，然后在这个字符串中填充"Java"和"Script"，最后一步是销毁原来的字符串"Java"和字符串"Script"，因为这两个字符串已经没用了。这个过程是在后台发生的，而这也是在某些旧版本的浏览器（例如版本低于1.0 的Firefox、IE6 等）中拼接字符串时速度很慢的原因所在。但这些浏览器后来的版本已经解决了这个低效率问题。

2） 字符串转换

要把一个值转换为一个字符串有两种方式。第一种是使用几乎每个值都有的toString()方法。这个方法唯一要做的就是返回相应值的字符串表现。例子：

var age = 11;
var ageAsString = age.toString(); // 字符串"11"
var found = true;
var foundAsString = found.toString(); // 字符串"true"

数值、布尔值、对象和字符串值（没错，每个字符串也都有一个toString()方法，该方法返回字符串的一个副本）都有toString()方法。但null 和undefined 值没有这个方法。

多数情况下，调用toString()方法不必传递参数。但是，在调用数值的toString()方法时，可以传递一个参数：输出数值的基数。默认情况下，toString()方法以十进制格式返回数值的字符串表示。而通过传递基数，toString()可以输出以二进制、八进制、十六进制，乃至其他任意有效进制格式表示的字符串值。例子：

var num = 10;
alert(num.toString()); // "10"
alert(num.toString(2)); // "1010"
alert(num.toString(8)); // "12"
alert(num.toString(10)); // "10"
alert(num.toString(16)); // "a"

通过这个例子可以看出，通过指定基数，toString() 方法会改变输出的值。而数值10 根据基数的不同，可以在输出时被转换为不同的数值格式。注意，默认的（没有参数的）输出值与指定基数10 时的输出值相同。

在不知道要转换的值是不是null 或undefined 的情况下，还可以使用转型函数String()，这个函数能够将任何类型的值转换为字符串。String()函数遵循下列转换规则：

 如果值有 toString() 方法，则调用该方法（没有参数）并返回相应的结果；
 如果值是 null，则返回 "null"；
 如果值是 undefined，则返回 "undefined" 。

例子：

var value1 = 10;
var value2 = true;
var value3 = null;
var value4;
alert(String(value1)); // "10"
alert(String(value2)); // "true"
alert(String(value3)); // "null"
alert(String(value4)); // "undefined"

这里先后转换了4 个值：数值、布尔值、null 和 undefined。数值和布尔值的转换结果与调用toString() 方法得到的结果相同。因为 null 和 undefined 没有 toString() 方法，所以 String() 函数就返回了这两个值的字面量。要把某个值转换为字符串，可以使用加号操作符把它与一个字符串（""）加在一起。

Object类型

ECMAScript 中的对象其实就是一组数据和功能的集合。对象可以通过执行 new 操作符后跟要创建的对象类型的名称来创建。而创建Object 类型的实例并为其添加属性和（或）方法，就可以创建自定义对象。

仅仅创建Object 的实例并没有什么用处，但关键是要理解一个重要的思想：即在ECMAScript 中，Object 类型是所有它的实例的基础。换句话说，Object 类型所具有的任何属性和方法也同样存在于更具体的对象中。Object 的每个实例都具有下列属性和方法。

 constructor：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）就是Object()。
 hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName）必须以字符串形式指定（例如：o.hasOwnProperty("name")）。
 isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型（第5 章将讨论原型）。
 propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用for-in 语句来枚举。与hasOwnProperty() 方法一样，作为参数的属性名必须以字符串形式指定。
 toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应。
 toString()：返回对象的字符串表示。
 valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toString() 方法的返回值相同。

由于在ECMAScript 中Object 是所有对象的基础，因此所有对象都具有这些基本的属性和方法。但ECMAScript 中对象的行为不一定适用于JavaScript 中的其他对象。浏览器环境中的对象，比如BOM 和DOM 中的对象，都属于宿主对象，因为它们是由宿主实现提供和定义的。ECMA-262 不负责定义宿主对象，因此宿主对象可能会也可能不会继承Object。

关于Object类型（引用类型），会在另一篇做单独整理和解释。

Symbol类型

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

let s = Symbol();
typeof s // "symbol"

上面代码中，变量s就是一个独一无二的值。typeof运算符的结果，表明变量s是 Symbol 数据类型，而不是字符串之类的其他类型。

注意，Symbol函数前不能使用new命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

let s1 = Symbol('foo');
let s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

上面代码中，s1和s2是两个 Symbol 值。如果不加参数，它们在控制台的输出都是Symbol()，不利于区分。有了参数以后，就等于为它们加上了描述，输出的时候就能够分清，到底是哪一个值。

如果 Symbol 的参数是一个对象，就会调用该对象的toString方法，将其转为字符串，然后才生成一个 Symbol 值。

const obj = {
  toString() {
    return 'abc';
  }
};
const sym = Symbol(obj);
sym // Symbol(abc)

注意，Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。

// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

上面代码中，s1和s2都是Symbol函数的返回值，而且参数相同，但是它们是不相等的。

Symbol 值不能与其他类型的值进行运算，会报错。

let sym = Symbol('My symbol');
"your symbol is " + sym // TypeError: can't convert symbol to string
`your symbol is ${sym}`  // TypeError: can't convert symbol to string

但是，Symbol 值可以显式转为字符串。

let sym = Symbol('My symbol');
String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

另外，Symbol 值也可以转为布尔值，但是不能转为数值。

let sym = Symbol();
Boolean(sym) // true
!sym  // false
if (sym) {
  // ...
}
Number(sym) // TypeError
sym + 2 // TypeError

更多 symbol 的特性和用法，可参考阮一峰老师的ECMAScript 6 入门中关于 symbol 的介绍http://es6.ruanyifeng.com/#docs/symbol

该篇笔记主要是复习和巩固基础内容，温故知新。其中大部分内容摘抄自《JavaScript高级程序设计》第三版。