浅析 JavaScript 数据类型——基本数据类型

这是我参与8月更文挑战的第2天，活动详情查看8月更文挑战

前言

数据值是一门编程语言进行生成的材料，JavaScript 也不例外。JS 中的数据类型，是学习 JavaScript 的基础，主要分红两类：基本数据类型和引用数据类型：

• 基本数据类型：number、string、boolean、null、undefined、还有 ES6 新语法规范中的 Symbol、BigInt
• 引用数据类型：对象（普通对象、数组对象、正则对象、日期对象、Math、Date）、函数

今天咱们主要先了解下基本数据类型。

number

包括：

• 常规数字（整数、浮点数）
• 特殊数值
  • NaN：（not a number）表明不是一个有效的数字，可是属于number类型的
  • Infinity：正无穷大，数学概念中的无穷大，是一个比任何数字都大的特殊值
  • -Infinity：负无穷大

思考：如何变量 num 是否为一个有效数字？

if (Number(num) == NaN) {
    alert('num不是有效数字！');
}
复制代码

上面这种方案可行吗？答案是不能够的。NaN 和谁都不相等，条件永远不成立（即便 num 确实不是有效数字，转换的结果确实是 NaN ，可是NaN != NaN的）

这里咱们可使用到一个方法：isNaN

isNaN：检测当前值是否不是有效数字，返回 true，表明不是有效数字，返回 false，是有效数字

• true 是非有效数字
• false 是有效数字

// 语法：isNaN([value])
let num = 12;

isNaN(num); // 检测num变量存储的值是否为有效数字 false
isNaN('13'); // => false
isNaN(true); // => false
isNaN(false); // => false
isNaN(null); // => false
isNaN(undefined); // => true
isNaN({age:9}); // => true
isNaN([12,13]); // => true
isNaN([12]); // => false
isNaN(/^$/); // => true
isNaN(function(){}); // => true

复制代码

isNaN 检测的机制

1. 首先验证当前要检测的值是否为数字类型的，若是不是，浏览器会默认的把值转换为数字类型
2. 当前检测的值已是数字类型，是有效数字，返回 false，不是，返回 true「数字类型中只有NaN不是有效数字，其他都是有效数字」

其余数据类型转成数字类型

Number

上面说到，浏览器会默认的把值转换为数字类型，直接使用Number这个方法转换的

定义：JS 内置的转换方法

【字符串转数字】

• 只要是有效数字字符的，才能够转换成数字，NaN 若是当前字符串中出现任意一个非有效数字字符，结果则为 NaN
• 空字符串转数字，结果是 0

Number('13') // => 13
Number('13px') // => NaN 若是当前字符串中出现任意一个非有效数字字符，结果则为 NaN
Number('13.5') // => 13.5 能够识别小数
Number('13.5.0') // => NaN
Number('') // => 0
复制代码

【布尔转数字】

Number(true) // => 1
Number(false) // => 0
复制代码

【其它转数字】

Number(null) // => 0
Number(undefined) // => NaN
复制代码

特殊：

Number('') // => 0
[].toString() // => '' 
// => isNaN([]) =>isNaN('') => false
复制代码

通常都是基本数据类型转换成数字类型，不多引用数据类型转换成数字类型的。

parseInt

定义：从字符串最左边字符开始查找有效数字字符，而且转换为数字，可是一旦遇到一个非有效数字字符，查找结束。把一个字符串中的整数部分解析出来

parseFloat

跟 parseInt 的区别：把一个字符串中的小数（浮点数）部分解析出来，其余是同样的。

parseInt('13.5px') // => 13
parseFloat('13.5px') // => 13.5

parseInt('width:13.5px')
// => NaN 从字符串最左边字符开始查找有效数字字符，而且转换为数字
// 可是一旦遇到一个非有效数字字符，查找结束
复制代码

Number、parseInt、parseFloat 的区别

主要区别：在于字符串转换分析上

• Number：出现任意非有效数字字符，结果就是 NaN
• parseInt：把一个字符串中的整数部分解析出来
• parseFloat：把一个字符串中的小数（浮点数）部分解析出来

string

定义：用单引号或者双引号或反引号包裹起来的都是字符串。

其余数据类型转成字符串类型

• 基于 alert / confirm / prompt / document.write 等方法输出内容的时候，会把输出的值转换为字符串，而后再输出

alert(1) // => '1'
复制代码

• 基于“+”进行字符串拼接的时候
• 把引用类型值转换为数字的时候，首先会转换为字符串，而后再转换为数字
• 给对象设置属性名，若是不是字符串，首先转换为字符串，而后再当作属性存储到对象中（对象的属性只能是数字或者字符串）
• 手动调用 toString/toFixed/join/String 等方法的时候，也是为了转换为字符串

let n = Math.PI;
n.toFixed(2) // "3.14"

let ary = [12,23,34];
ary.join('+')  // => '12+23+34'

复制代码

转换规律：

调用的方法：toString

【除了对象，都是你理解的转换结果】

1 -> '1'
NaN -> 'NaN'
null -> 'null'
[] -> ''
[13] -> '13'
[12,13] -> '12,13'
复制代码

【对象转字符串】

(function(){}).toString() // "function(){}"
new Date().toString() //"Thu Jul 18 2019 10:03:32 GMT+0800 (中国标准时间)"

({name:'xxx'}).toString(); // => "[object Object]"
().toString(); // => "[object Object]"
// 无论是啥样的普通对象，最后结果都同样的
复制代码

boolean

只有两个值：true / false

其余数据类型转成布尔类型

• Boolean
• ! 取反
• !! 两次取反，等价于没取反，也就剩下转换为布尔类型了，项目当中经常使用这个

Boolean(1) // => true
Boolean(0) // => false
Boolean(-1) // => true
Boolean(NaN) // => false

!'追梦玩家' // => false 先把其它数据类型转换为**布尔类型**，而后**取反**
!0 // => true
!'' // => true

!!null // => 取两次反，等价于没取反，也就剩下转换为布尔类型了
复制代码

规律 5个falsy：

在JS当中只有"0 / NaN / 空字符串'' "" / null / undefined"这个5个值转换为布尔类型的 false，其他都转换为 true

null && undefined

都表明空或者没有

• null：空对象指针
• undefined：未定义

null：通常都是意料之中的没有，先让他暂时没有，后期再给他加上去。（通俗理解：通常都是人为手动的先赋值为 null，后面的程序中咱们会再次给它赋值）

let num = null; // => null是手动赋值，预示着后面我会把num变量的值进行修改
...
num = 13;
复制代码

undefined 表明没有，通常都不是人为手动控制的，大部分都是浏览器自主为空。（后面能够赋值也能够不赋值）

let num; // 声明一个变量 num => 此时变量的值，浏览器给分配的就是undefined

// 获取一个对象的属性值，若是这个对象没有这个属性名，获得的值就是 undefined
let person = { name: '追梦玩家' };
console.log(person.name); // 追梦玩家
console.log(person.age); // undefined
...
// 后面能够赋值也能够不赋值
复制代码

Symbol

它是用来作什么的呢？ 为了说明 Symbol 的做用，咱们结合例子来说解:

因为没有访问限制，JavaScript 曾经有一个惯例：私有属性如下划线起始来命名。 这样不只没法隐藏这些名字，并且会搞坏代码风格。 如今有了 Symbol，就能够利用 Symbol 来隐藏这些私有属性：

let speak = Symbol('speak')
class Person {
    [speak]() {
        console.log('say Hi')
    }
}
复制代码

下面这几种访问都获取不到 speak 属性：

let p = new Person()

Object.keys(p)                      // []
Object.getOwnPropertyNames(p)       // []
for(let key in p) console.log(key)  // <empty>
复制代码

但 Symbol 只能隐藏这些函数，并不能阻止未受权访问。 仍然能够经过 Object.getOwnPerpertySymbols(), Reflect.ownKeys(p) 来枚举到 speak 属性。

BigInt

什么是BigInt?

BigInt类型是 JavaScript 中的一个基础的数值类型，能够用任意精度表示整数。使用 BigInt，您能够安全地存储和操做大整数，甚至能够超过数字的安全整数限制。BigInt 是经过在整数末尾附加 n 或调用构造函数来建立的。

为何须要BigInt?

Number类型只能安全的支持-9007199254740991(-(2^53-1)) 和 9007199254740991(2^53-1)之间的整数，任何超过这个范围的数值都会失去精度；而 BigInt 能够解决这个问题

console.log(9007199254740999) //9007199254741000 console.log(9007199254740993===9007199254740992) //true
复制代码

从上面的代码，能够看到当数值超过 Number 数据类型支持的安全范围值时，将会被四舍五入，从而致使精度缺失的问题

如何建立并使用BigInt？

在整数的末尾追加n

console.log(9007199254740999n); //9007199254740999
复制代码

调用BigInt()构造函数

let bigInt = BigInt("9007199254740999"); //传递给BigInt()的参数将自动转换为BigInt:
console.log(bigInt); //9007199254740999n 
复制代码