入门前端-《JavaScript 语言入门教程-数据类型和数值》

阳光穿透心脏的1/2处 2022-11-03 15:25 156阅读 0赞

# 六种数据类型 #

`JavaScript` 语言的每一个值，都属于某一种数据类型。  
`JavaScript` 的数据类型，共有六种。（`ES6` 又新增了第七种 `Symbol` 类型的值，本教程不涉及。）

*  数值（number）：整数和小数（比如1和3.14）
 *  字符串（string）：文本（比如Hello World）。
 *  布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）
 *  undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
 *  null：表示空值，即此处的值为空。
 *  对象（object）：各种值组成的集合。
    
     *  狭义的对象（object）
     *  数组（array）
     *  函数（function）

# typeof 运算符 #

JavaScript 有三种方法，可以确定一个值到底是什么类型。

*  typeof运算符
 *  instanceof运算符
 *  Object.prototype.toString方法

typeof 123 // "number"
    typeof '123' // "string"
    typeof false // "boolean"
    
    function f() { }
    typeof f
    // "function"
    
    typeof undefined
    // "undefined"

实际编程中，这个特点通常用在判断语句。

// 错误的写法
    if (v) { 
      // ...
    }
    // ReferenceError: v is not defined
    
    // 正确的写法
    if (typeof v === "undefined") { 
      // ...
    }

特殊的`object`类型：

typeof window // "object"
    typeof { } // "object"
    typeof [] // "object"
    typeof null // "object"

上面代码中，空数组（`[]`）的类型也是`object`，这表示在 `JavaScript` 内部，数组本质上只是一种特殊的对象。

这里顺便提一下，`instanceof`运算符可以区分数组和对象。

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

`null`的类型是`object`，这是由于历史原因造成的。  
1995年的 `JavaScript` 语言第一版，只设计了`五`种数据类型（对象、整数、浮点数、字符串和布尔值），没考虑`null`，只把它当作`object`的一种特殊值。  
后来`null`独立出来，作为一种单独的数据类型，为了兼容以前的代码，`typeof null`返回`object`就没法改变了。

# null 和 undefined #

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

Number(null) // 0
    5 + null // 5
    
    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

# 整数和浮点数 #

JavaScript 内部，所有数字都是以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

# NaN #

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

5 - 'x' // NaN

`NaN`不是独立的数据类型，而是一个特殊数值，它的数据类型依然属于`Number`，  
使用`typeof`运算符可以看得很清楚。

typeof NaN // 'number'

# Infinity #

> Infinity表示“无穷”，用来表示两种场景。一种是一个正的数值太大，或一个负的数值太小，无法表示；另一种是非0数值除以0，得到Infinity。

场景：

// 场景一
    Math.pow(2, 1024)
    // Infinity
    
    // 场景二
    0 / 0 // NaN
    1 / 0 // Infinity

# 与数值相关的全局方法 #

## 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

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

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

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

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

parseInt('0x10') // 16

如果字符串以0开头，将其按照10进制解析。

parseInt('011') // 11

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

parseInt(1000000000000000000000.5) // 1
    // 等同于
    parseInt('1e+21') // 1
    
    parseInt(0.0000008) // 8
    // 等同于
    parseInt('8e-7') // 8

下面是转换指定进制的数的例子。

parseInt('1000', 2) // 8
    parseInt('1000', 6) // 216
    parseInt('1000', 8) // 512

上面代码中，二进制、六进制、八进制的1000，分别等于十进制的8、216和512。这意味着，可以用parseInt方法进行进制的转换。

如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在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

## parseFloat() ##

> parseFloat方法用于将一个字符串转为浮点数。

场景示例

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方法会自动过滤字符串前导的空格。
    parseFloat('\t\v\r12.34\n ') // 12.34

## isNaN() ##

> isNaN方法可以用来判断一个值是否为NaN。

场景示例

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

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

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

## 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`。

# 参考 #

*  https://wangdoc.com/javascript/types/number.html