JavaScript回顾学习：数据类型

妖狐艹你老母 2024-04-17 06:30 6阅读 0赞

### 概述 ###

ECMAScript中有5中基本数据类型：`Undefined`,`Null`,`Boolean`,`Number`,`String`,还有一种复杂数据类型`对象(Object)`，`Object`本质上是由一组无序的名值对组成的，JavaScript同样还定义了另外两种特殊对象：

*  数组--->表示带编号的值的有序组合
 *  函数--->函数是具有与它相关联的可执行代码的对象，通过调用函数来运行可执行代码，并返回运算结果 综上为ES5的全部数据类型，ES6新出了一种数据类型为`Symbol`，表示独一无二的值。 函数，数组，对象在后续文章中会有详解（写完后将加上链接，提前埋坑）。本篇文章将回顾学习5种基本类型和`Symbol`及数据类型之间的转化。

### 基本数据类型 ###

#### undefined ####

`Undefined`类型只有一个值，即`undefined`，在使用`var`声明变量但没有对这个变量初始化时，这个变量的值就是`undefined`。

*  注意：我们没有必要显式的将一个变量初始化为`undefined`。因为没有赋值初始化的变量就是`undefined`这样更有利于我们比较赋值还是未赋值的变量。

#### Null ####

跟`Undefined`类似，`Null`类型也只有一个值`null`。`null`表示是一个空对象指针。所以当`type of null`的时候返回`'object'`

*  与`undefined`不同的是，当我们明确这个变量是将用来保存对象的时候，我们最好将这个变量初始化为`null`，这样有利于我们只要检查当前这个对象的值是不是`null`就可以知道当前的变量是否已经保存了一个对象的引用。同时也能更好的区别`undefined`和`null`

#### Boolean 类型 ####

Boolean类型只有两个值：`true`和`false` 这个类型在开发中可以说是用的最多的类型了，大多数判断都是用这个类型来完成的。

*  注意： 所有的其他的类型都可以转化为Boolean类型。关于转化的情况下面会讲到。

#### Number类型 ####

简而言之就是数字，分为整数和浮点数。最基本的整数数字值是十进制整数的也就是我们平时用的数字，除了十进制，还有八进制和十六进制。

*  八进制0开头的后面的每位数都是（0~7）如：
    
        var num = 0666; // 八进制的438
        复制代码
    
    但是如果不符合规则了，那前面的0就会被忽略，后面数值按照十进制解析，如：
    
        var num1 = 0668; // 不符合规则 解析为668 
        复制代码
    
    （严格模式八进制是无效的）
 *  十六进制的前两位是0后面跟任何十六进制的数字（0~9及A~F） 在进行计算的时候八进制和十六进制的数值都会被转化为十进制数值。

浮点数，就是通俗理解的小数。由于舍入误差原因所以不要将浮点数作为判断依据。 数字可以用科学计数法e表示,如：

var int = 3e3; // 表示3000，相当于3乘以10的3次幂
    var float = 3e-3 // 表示0.003 ，相当于3乘以10的-3次幂
    复制代码

数字在javascript中是有范围的：5e-324~1.7976931348623157e308;一般情况是用不到的知道就行，超过范围的数值会自动被转换为`Infinity(区分正负)`。如果出现了也可以用isFinite()函数进行识别判断，在范围内转换为`true`。

关于数值最后还有一个特殊的值: `NaN` 代表非数值英文直译缩写（Not a Number）;用于本来是要返回数值的操作没有返回数值就会返回`NaN`，`NaN`有两个特点需要注意一下：

*  任何涉及`NaN`的操作都返回`NaN`
 *  `NaN`与任何值都不相等，包括`NaN`本身。 因为以上两个比较难受的特点会导致我们没法判断一个值是不是`NaN`，所以JavaScript给我们定义了一个函数：`isNaN()`这个函数接受一个参数，如果能转化位数值返回`false`，不能则`true`，以下有几个书上非常经典的例子，请切记（面试可能会用到，哈哈哈哈哈）：

isNaN(NaN)     // true
    isNaN(10)      // false （10是一个数值）
    isNaN('10')    // false （'10'可以被转化为数值10）
    isNaN('blue')  // true （不能被转化为数值）
    isNaN(true)    // false （可以被转化为1）
    复制代码

***手动注意一下这里*** `isNaN()`的参数也可以是对象,当传入一个对象的时候会先调用被传入对象的`valueOf()`方法，然后确定该方法返回的数值是否可以被转化为数值。如果不能，再调用对象的`toString()`方法，再测试返回值是否可以被转化为数值。之所以特别注意这里因为一般JavaScript中的内置函数和操作符都是按照这个流程执行的。下面基于`isNaN`举个栗子：

var a = {};
    isNaN(a);      // true 
    //执行过程
    a.valueOf()    // {}，不能转化。
    //然后执行
    a.toString()   // 返回"[object Object]" 也不能被转化，所以isNaN返回true
    复制代码

说到number类型肯定要提一下3个函数：`Number()`,`parseInt()`,`parseFloat()`.功能相似但也不是完全相同，一个一个来说。 首先`Number()`可以用于任何数据类型，另外两个则是专门用于把字符串转换成数值。 `Number()`函数的转换规则：

*  如果是`Boolean`值，`true`和`false`将分别被转换为`1`和`0`
 *  如果是数字值则是简单的传入和返回
 *  如果是`null`，返回`0`
 *  如果是`undefined`,返回`NaN`
 *  如果是字符串，遵循以下规则：
    
     *  如果字符串中只包含数字（包括前面带正负号），则转换为十进制数字（0开头会忽略0），浮点数转换为浮点数
     *  如果字符串中包含有效的十六进制数，则转换为相同大小的十进制数
     *  如果是空字符串，则返回`0`
     *  如果字符串中包含除了上述之外的字符，则返回`NaN`
 *  如果是对象，则调用`valueOf()`方法，按照上面的规则调用转换返回值，如果返回`NaN`,则继续调用`toString()`方法，再次按照上面的规则转换 举几个例子：

var num1 = Number('Hello world') // NaN
    var num2 = Number('') // 0
    var num3 = Number('0000000000020') // 20
    var num4 = Number(true) // 1
    复制代码

***再次手动注意一下*** `+`操作符与`Number()`函数相同 ,如下例：

var str = '1212' 
    +str // 1212
    复制代码

`parseInt()`只转换字符串，规则大体可以整理为一下几种：

*  它会忽略字符串前面的空格，如果第一个非空格字符串不是数字或者正负号就会返回`NaN`
 *  ***空字符串返回`NaN`（`Number()`返回`0`）***
 *  按顺序解析每一个字符直至遇到非数字字符或结尾
 *  浮点数会转换为整数
 *  可以添加第二个参数作为转换基数（即多少进制），如果不填第二个参数ES5之后无法解析8进制数会直接忽略前导`0`
 *  若第二个参数为16可忽略前导`0x`

?：

var num1 = parseInt('1111cc') // 1111
    var num2 = parseInt('') // NaN
    var num3 = parseInt('0xA') // 10
    var num4 = parseInt('11.1') // 11
    var num5 = parseInt('070') // 70
    var num6 = parseInt('AF',16) // 175
    var num7 = parseInt('AF') // NaN (未指定16进制且未带前导0x)
    复制代码

为了避免错误解析，建议使用此函数时带着第二个参数 `parseFloat()`的用法跟`parseInt`差不多，区别有一下几点：

*  没有第二个参数（只解析十进制数）
 *  只识别第一个小数点
 *  始终忽略前导0

?：

var num1 = parseFloat('1111cc') // 1111
    var num2 = parseInt('0xA') // 0
    var num3 = parseInt('11.1') // 11.1
    var num4 = parseInt('11.1.11') // 11.1
    var num5 = parseInt('011.1') // 11.1
    复制代码

#### String类型 ####

以单引号或者双引号开头结尾表示 特点： \*\*\* 字符串是不可变的，也就是说，字符串一旦创建它的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值得字符串填充该变量 \*\*\* 字符串有length属性，但是如果字符串中如果包括以十六进制表示Unicode字符`\unnn`这种格式的字符在length里算一个长度，这时length返回的就不是精确的字符数目了 转换字符串的方法：

*  `toString()`: 数值、布尔值、对象和字符串都有`toString()`方法,***注意的是`null`和`undefined`没有这个方法,换言之`toString()`无法将`null`和`undefined`转换为字符串***，当数值调用`toString()`时可传入参数2，8，10……等数字的转换基数（进制数）默认为10
 *  `String()` 可将任何类型转换为字符串。执行规则：如果值有`toString()`方法则调用该方法并返回对应的值（没有参数）,`null`返回`"null"` `undefined`返回`""undefined` 小技巧： ***待转换的值`+ ""`可转换为字符串***

#### Object类型 ####

是一组数据和功能的集合。可以通过`new`操作符后跟要穿件的对象类型名称来创建。创建`Object`类型的实例并为其添加属性、方法，就可以创建自定义对象。 `Object`类型是所有实例的基础从继承的角度来讲就是祖宗。 `Object`的每个实例都有下列属性和方法：

*  `constructor`: 保存着用于创建当前对象的函数（构造函数）
 *  `hasOwnProperty(propertyName)`:用于检查给定的属性在当前对象属性中是否存在（不是在实例的原型中）。`propertyName`必须以字符串形式指定
 *  `isPrototypeOf(Object)`: 用于检查传入的对象是否是当前对象的原型
 *  `propertyIsEnumerable(propertyName)`: 用于检查给定属性是否能使用 `for-in` 语句来枚举
 *  `toLocaleString()`: 返回对象的字符串表示，该字符串与执行环境的地区对应(例如，如果是Date类型则返回的数据中与地区相关，在中国返回的格式是`"2019/7/27 下午8:12:23"`)
 *  `toString()`: 返回对象的字符串表示
 *  `valueOf()`: 返回对象的字符串、数值或布尔值表示。

#### Symbol ####

ES6 增加了一个新的基本数据类型 `symbol`. 不过，和其他基本数据类型相比，它有点与众不同，因为它没有字面量的表现形式，而且创建的方式也有点奇怪，只能通过调用全局函数`Symbol()`来完成。

使用`Symbol`时注意：

*  symbol可以转化为字符串（两种方式，前面已经介绍了。），可以转换为`boolean`，但是不能转化为`Number`。
 *  使用`Symbol()`时最好为其传入参数，容易区分；由于`symbol`的值是独一无二的，即使是传入相同的参数，二者的值也是不等的。
 *  作为属性名时不能通过`.`调用需用`[]`

?：

let symbol1 = Symbol('a');
    let symbol2 = Symbol('a');
    
    let obj = {
        [symbol1]: '噫呜呜噫',
        [symbol2]: '哦哦哦哈哈哈哈'
    }
    console.log(symbol1 === symbol2) // false
    console.log(obj.symbol1)  // undefined
    console.log(obj[symbol1]) // 噫呜呜噫
    symbol1.toString() // "Symbol('a')"
    Number(symbol1) // Uncaught TypeError: Cannot convert a Symbol value to a number
    Boolean(symbol1) // true
    复制代码

`symbol`要细说完全可以但拉出来一篇文章来说了，所以这里简单介绍一下最基本的用法，后续如果写的话，我会在这里添加链接 放纵了好长一段时间了，之前的计划搁置了许久，现在开始重启。各位老铁共同进步，共勉。

转载于:https://juejin.im/post/5d3c4c9e5188252c784a53f9