1.1 JavaScript的基本数据类型介绍-Javascript重点难点实例精讲（一）

当前位置:　首页>> 技术小册>> Javascript重点难点实例精讲（一）

所有的编程语言都存在数据类型的概念。
在JavaScript中，数据类型可以分为基本数据类型和引用数据类型，其中基本数据类型包括Undefined、Null、Boolean、Number、String 5种，在ES6中新增了一种新的基本数据类型Symbol，这个会在第7章中讲到；引用数据类型含有Object、Function、Array、Date等类型，这些将会在第2章和第3章重点讲解。
接下来会详细讲解JavaScript中的基本数据类型。
1. Undefined类型
Undefined类型只有一个唯一的字面值undefined，表示的是一个变量不存在。
下面是4种常见的出现undefined的场景。
① 使用只声明而未初始化的变量时，会返回“undefined”。
`
var a;
console.log(a);  // undeﬁned
`
② 获取一个对象的某个不存在的属性（自身属性和原型链继承属性）时，会返回“undefined”。
`
var obj = {
   name: 'kingx'
};
console.log(obj.address);  // undeﬁned
`
③ 函数没有明确的返回值时，却在其他地方使用了返回值，会返回“undefined”。
`
function foo() {}
console.log(foo()); // undeﬁned
`
④ 函数定义时使用了多个形式参数（后文简称为形参），而在调用时传递的参数的数量少于形参数量，那么未匹配上的参数就为“undefined”。
```
function foo(param1, param2, param3) {
   console.log(param3);
}
foo(1, 2);  // undeﬁned
```
2. Null类型
Null类型只有一个唯一的字面值null，表示一个空指针对象，这也是在使用typeof运算符检测null值时会返回“object”的原因。
下面是3种常见的出现null的场景。
① 一般情况下，如果声明的变量是为了以后保存某个值，则应该在声明时就将其赋值为“null”。

```
var returnObj = null;

function foo() {
   return {
      name: 'kingx'
   };
}

returnObj = foo();
```
② JavaScript在获取DOM元素时，如果没有获取到指定的元素对象，就会返回“null”。
```
document.querySelector('#id');  // null
```
③ 在使用正则表达式进行捕获时，如果没有捕获结果，就会返回“null”。
```
'test'.match(/a/);  // null
```
3. Undefined和Null两种类型的异同
Undefined和Null虽然是两种不同的基本数据类型，存在一些不同的特性，但是在某些表现上存在着相同之处，这里就总结了Undefined和Null的相同点和不同点。
（1）相同点
· Undefined和Null两种数据类型都只有一个字面值，分别是undefined和null。
· Undefined类型和Null类型在转换为Boolean类型的值时，都会转换为false。所以通过非运算符（！）获取结果为true的变量时，无法判断其值为undefined还是null。
· 在需要将两者转换成对象时，都会抛出一个TypeError的异常，也就是平时最常见的引用异常。

```
var a;
var b = null;

console.log(a.name);  // Cannot read property 'name' of undeﬁned
console.log(b.name);  // Cannot read property 'name' of null
```

上面代码表示在通过某个变量引用name属性时，若该变量值实际为undefined或者null，就会抛出异常。
· Undefined类型派生自Null类型，所以在非严格相等的情况下，两者是相等的，如下面代码所示。

```
null == undeﬁned;  // true
```

（2）不同点
· null是JavaScript中的关键字，而undefined是JavaScript中的一个全局变量，即挂载在window对象上的一个变量，并不是关键字。
· 在使用typeof运算符检测时，Undefined类型的值会返回“undefined”，而Null类型的值会返回“object”。

```
typeof undeﬁned; // undeﬁned
typeof null;     // object
```
在通过call调用toString()函数时，Undefined类型的值会返回“[object Undefined]”，而Null类型的值会返回“[object Null]”。

```
Object.prototype.toString.call(undeﬁned);  // [object Undeﬁned] 
Object.prototype.toString.call(null);      // [object Null]

```
· 在需要进行字符串类型的转换时，null会转换为字符串"null"，而undefined会转换为字符串"undefined"。

```
undeﬁned + ' string';  // undeﬁned string
null + ' string';      // null string

```
· 在需要进行数值类型的转换时，undefined会转换为NaN，无法参与计算；null会转换为0，可以参与计算。

```
undeﬁned + 0; // NaN
null + 0;     // 0

```
· 无论在什么情况下都没有必要将一个变量显式设置为undefined。如果需要定义某个变量来保存将来要使用的对象，应该将其初始化为null。这样不仅能将null作为空对象指针的惯例，还有助于区分null和undefined。
4. Boolean类型
Boolean类型（又称布尔类型）的字面值只有两个，分别是true和false，它们是区分大小写的，其他值（如True和False）并不是Boolean类型的值。
Boolean类型使用最多的场景就是用于if语句判断。在JavaScript中，if语句可以接受任何类型的表达式，即if(a)语句中的a，可以是Boolean、Number、String、Object、Function、Null、Undefined中的任何类型。
如果a不是Boolean类型的值，那么JavaScript解释器会自动调用Boolean()函数对a进行类型转换，返回最终符合if语句判断的true或者false值。
不同类型与Boolean类型的值的转换是Boolean类型的重点，如下所述。
（1）String类型转换为Boolean类型
· 空字符串""或者''都会转换为false。
· 任何非空字符串都会转换为true，包括只有空格的字符串" "。
（2）Number类型转换为Boolean类型
· 0和NaN会转换为false。
· 除了0和NaN以外，都会转换为true，包括表示无穷大和无穷小的Infinity和
```Infinity。
（3）Object类型转换为Boolean类型
· 当object为null时，会转换为false。
· 如果object不为null，则都会转换为true，包括空对象{}。
（4）Function类型转换为Boolean类型
· 任何Function类型的值都会转换为true。
（5）Null类型转换为Boolean类型
· Null类型只有一个null值，会转换为false。
（6）Undefined类型转换为Boolean类型
· Undefined类型只有一个undefined值，会转换为false。
因为其他类型与Boolean类型的值的转换方式众多，所以大家一定要熟练掌握这些规则。

该分类下的相关小册推荐：

零基础学JavaScript

Javascript编程指南

web前端开发性能优化实战

KnockoutJS入门指南

javascript设计模式原理与实战

Flutter核心技术与实战

编程入门课：Javascript从入门到实战

经典设计模式Javascript版

JavaScript面试指南

剑指javascript

JavaScript入门与进阶

深入学习前端重构知识体系