关于javascript:从头学前端04搞懂JavaScript中的基本数据类型

Hello 大家好，我是此岸繁華🌸，一个想进大厂的大三学生，为了有一个残缺的前端常识体系，当初我要从头开始学习、梳理、总结。

编写不易转载请取得容许

写在后面

本篇文章咱们未来学习 JavaScript 中的根底数据类型，浏览本篇文章你能够把握如下内容

什么是数据类型

概述

在上一篇文章【从头学前端】03- 这次我就搞懂了 JavaScript 中的变量中咱们晓得了变量是用来存储数据信息的，咱们把这些被存储的数据信息进行不同类别的划分，这些不同的数据类别就被称为 数据类型。

因为 JavaScript 是一个弱类型的脚本语言，也就是说在定义变量的时候不须要指定变量的存储类型，它只有在执行的时候才会确定数据类型。

数据类型的分类

在 ECMAScript5 之前的版本中，存在着 6 种数据类型，分为根底数据类型和简单类型，具体如下所示：

根底数据类型：

• number数字类型：整数或小数，并在 ±(2 ** 53 - 1)的范畴内。
• string字符串类型：一个字符串能够蕴含 0 个或多个字符。
• boolean布尔类型：该类型具备两个非凡的值，即 true 和false。
• null一个非凡的数据类型，用于未知的值。
• undefined一个非凡的数据类型，用于未定义的值。

简单的数据类型 为Object 类型，一个 Object 类型又能够细分为三个类型：

• 广义的 object 类型，即对象类型
• Array类型（数组）
• Function类型（函数）

    > 这些数据类型咱们将在前面的文章中独自学习

新版的 ECMAScript 还新增了 symbol 类型以及 bigint 类型，咱们会在ECMAScript 新个性 中学习

根本数据类型

布尔类型

布尔类型即 boolean 类型相比于其余数据类型而言，是 JavaScript 中视频频率最高的数据类型，该数据类型中只有两个值，即 true 和false，这两个值通常用来指代真或假、开或关、是或否等场景。

示例代码如下：

var flag = true

var lost = false

console.log(flag) // true
console.log(lost) // false

数字类型

数字类型即 number 类型，number类型又能够细分为负数类型和浮点数（小数）类型。JavaScript 中的 number 类型的数据是在±(2 ** 53 - 1) 区间内的，大于这个位数前面的数组将会显示为0。示例代码：

999999999999999111111
// 999999999999999100000

定义一个变量为 number 类型的示例代码如下：

var num = 1 // 整数
var float = 1.2 // 浮点数

非凡的值

JavaScript 中的数值还存在两个比拟非凡的值，别离是 NaN 和 Infinity。

NaN

NaN 是一个简写模式，全称为 Not a Number，译为不是一个数字值，该值通常用来示意经计算之后的后果不是一个数字值。

NaN 自身存在着两个特点，具体如下：

• 任何波及到 NaN 的操作都会返回 NaN
• NaN 与任何值都不相等，包含 NaN 自身

JavaScript 针对 NaN 的个性提供了 isNaN() 函数，该函数用于检测一个数值为 NaN，并返回一个布尔值，示例代码如下：

var notANumber = NaN
var number = 10

console.log(isNaN(notANumber)) // true
console.log(isNaN(number)) // false

Infinity

JavaScript 中的 number 类型的可能示意数值的范畴是 2 ** 1024 到2 ** - 1023，超出这个范畴则会得道两个值，别离是 Infinity 和-Infinity，示意无穷大和无穷小。

除了下面超出范围失去 Infinity 的状况，还有就是能够通过非 NaN 的数值/ 0 失去Infinity，示例代码如下：

 1 /  0  //  Infinity
 1 / -0  // -Infinity
-1 / -0  //  Infinity

Infinity具备以下个性：

• Infinity和 -Infinity 两者是不相等的。
• Infinity大于所有数值（除了 NaN），-Infinity 小于所有数值（除了NaN）。
• NaN与 Infinity 是永远不相等的。

Infinity是能够进行四则运算的，其 运算规定如下：

• Infinity与undefined，无论应用什么运算，都会失去NaN
• 0 * Infinity失去 NaN；0/Infinity 失去 0；Infinity / 0 失去Infinity
• Infinity与 null 进行计算时，null会被转换成 0，所以 Infinity 与null的计算与 Infinity 与 0 的计算是雷同的。
• Infinity加或者乘一个 Infinity 的话，失去的是一个Infinity
• Infinity减或者除一个 Infinity 的话，失去的是一个NaN

字符串类型

字符串类型又称 string 类型，是由 0 个或者多个字符组成的，该字符且有单引号 ('') 或者双引号 ("") 进行包裹。示例代码如下：

var str1 = '' // 定义一个空字符串
var str2 = "" // 应用双引号定义一个空字符串，与单引雷同

var str3 = 'this is str'

如果想要在字符串中应用单引号 ('') 或者双引号("")，示例代码如下：

var str1 = '"a"' // "a"
var str2 = "'a'" // 'a'

除了下面这种办法，JavaScript 还提供了转义字符，具体会在上面介绍

转义字符

示例代码如下：

var str = '\" 这是一个 \t 字符串 \"'console.log(str)  //" 这是一个  字符串 "

undefined

undefined 类型只有一个值，就是undefined，示意未定义。个别状况下，咱们不会将一个变量赋值为undefined，然而 JavaScript 并不会阻止咱们将一个变量赋值为undefined，示例代码如下：

let v = undefined
console.log(v) // undefined

除了被动赋值，JavaScript 还有以下几种状况会失去undefined，具体如下：

• 申明变量但未初始化值时，该变量的值为undefined
• 申明变量并初始化值为 undefined 时，该变量的值为undefined
• 函数中的 return 语句的默认返回值为undefined
• 函数中的 return 语句的返回值设置为undefined
• 拜访某一个对象中不存在的属性时，失去的后果为undefined

在 JavaScript 中有这么多种状况会失去undefined，有一下两种办法能够判断以后值是否为undefined，具体如下：

• 应用全等号 (===) 来判断以后变量的值是否为undefined。

    > 对于运算符将在下一篇文章进行介绍

• 能够应用 typeof 运算符来判断变量的值是否为undefined。

typeof 运算符

JavaScript 中提供的 typeof 运算符能够判断以后变量是什么数据类型的，它会返回一个字符串。

typeof 运算符能够判断的类型次要有以下几种：

• number类型，将会返回一个 'number' 的字符串。
• string类型，将会返回一个 '`string`' 的字符串。
• boolean类型，将会返回一个 '`boolean`' 的字符串。
• undefined类型，将会返回一个 '`undefined`' 的字符串。
• 其余数据类型将会返回一个 'object' 的字符串。

示例代码如下：

var str = '',
    num = 0,
    bool = true,
    u = undefined

console.log(typeof str) // string 
console.log(typeof num) // number
console.log(typeof bool) // boolean
console.log(typeof u) // undefined

null

null 类型在 JavaScript 中也仅有一个值，即 null，示意一个空指针。这就导致应用typeof 运算符去判断 null 的类型失去的构造是 undefined。

console.log(typeof null) // object

null值在理论开发中次要实现的工作内容如下：

• 当申明一个变量但不进行初始化的话，能够将该变量的值赋值为 null。这样做的益处是 该变量不会占用内存空间。
• 当一个变量不再应用时，须要将该变量的值赋值为 null。这样做示意将 该变量从内存空间进行释放出来。

类型转换

因为 JavaScript 是弱类型脚本语言，只有在执行时才会确定其数据类型，从而运行时会依据应用状况来进行类型的转换。

JavaScript 中的类型转换次要分为两种，别离是隐式类型转换和显式类型转换。

隐式类型转换

所谓的隐式类型转换就是通过特定的表达式来实现从一个类型转换为另一个类型的。

转换为 boolean 类型

将要将其余的数据类型转换为布尔类型的话，只须要在最后面减少两个感叹号 (!!) 即可。示例代码如下：

var str = 'this is string'

console.log(!!str) // true

其余类型转换布尔值的转换规则如下：

转换为 number 类型

如果其余数据类型想要转换为 number 类型，只须要在后面减少一个加号 (+) 即可，示例代码如下：

/**
 * 如果将字符串转换为数字的话，如果转换失败的话会失去 NaN
 */
console.log(+'10') // 10
console.log(+'str') // NaN 

/**
 * 布尔类型转换为数字的话，true = 1，false = 0
 */

console.log(+true) // 1
console.log(+false) // 0

转换为 string 类型

如果其余数据类型想要转换为 string 类型的话，在后面或者前面拼接一个空字符即可，拼接字符串应用的是加号(+)，示例代码如下：

var str1 = '' + true
console.log(typeof str1) // string
var str2 = '' + 100
console.log(typeof str2) // string

除了以上的那几种状况，在调用函数时，如果函数接管的是一个字符串类型，你传递的一个数字类型，也会进行类型转换；还有就是 if 前面的小括号中的内容也会进行类型转换。(对于函数和 if 语句，咱们会在当前学习)

显式类型转换

所谓显式类型转换，就是 JavaScript 对应的函数或者办法来实现数据类型之间的转换。

转换为 boolean 类型

显式的将其余数据类型转换为 boolean 类型，应用的是 JavaScript 提供的 Boolean() 函数，示例代码如下：

var str = '123'
var num = 1

var bool1 = Boolean(str)
var bool2 = Boolean(num)

console.log(typeof bool1) // boolean 
console.log(typeof bool2) // boolean

转换为 number 类型

JavaScript 提供的将其余类型转换为 number 类型有三种，具体如下：

• Number()函数，如果转换的变量无奈转换为数字类型，后果则为NaN。
• parseInt()函数，该函数能够将 string 类型的值转换为一个整数或者 NaN。
• parseFloat()函数，该函数能够将 string 类型的值转换为一个浮点数或者 NaN（如果转换的是一个整数的话则会返回一个整数）。

示例代码如下：

var str1 = '10'
var str2 = 'str'

// 应用 Number
console.log(Number(str1)) // 10
console.log(Number(str2)) // NaN

// 应用 parseInt
console.log(parseInt(str1)) // 10
console.log(parseInt(str2)) // NaN
// 如果转换的是一个浮点数，最终不会保留小数点
console.log(parseInt(10.5)) // 10

// 应用 parseFloat
console.log(parseFloat(str1)) // 10
console.log(parseFloat(str2)) // NaN 
console.log(parseFloat(10.5)) // 10.5

转换为 string 类型

JavaScript 提供的将其余类型转换为 string 类型有两种，具体如下：

• String()函数
• Object对象提供的 toString() 办法

    > 对于对象与办法这里仅做理解，前面解说

示例代码如下：

var bool = true
var num = 123

// 应用 String()函数
var str1 = String(bool)
var str2 = String(num)

console.log(typeof str1) // string
console.log(typeof str2) // string

// 应用 Object.toString()办法

var str3 = Object.toString(bool)
var str4 = Object.toString(num)

console.log(typeof str3) // string
console.log(typeof str4) // string

总结

预报：下一篇文章咱们未来学习 JavaScript 中的运算符

精彩文章

【从头学前端】03- 这次我就搞懂了 JavaScript 中的变量

【从头学前端】02-JavaScript 词法构造

【从头学前端】01- 什么是 JavaScript