您的位置:首页 > 文旅 > 旅游 > js 七种数据类型之Undefined、Null 、Boolean、Number

js 七种数据类型之Undefined、Null 、Boolean、Number

2024/12/23 3:31:36 来源:https://blog.csdn.net/weiweiliude2/article/details/141216038  浏览:    关键词:js 七种数据类型之Undefined、Null 、Boolean、Number

目录

  • 概述
  • 1. 检测类型的最好工具 typeof 操作符
  • 2. Undefined 未赋值类型
  • 3. Null 空指针类型
  • 4. Boolean 类型
  • 5. Number 类型
    • 5.1 浮点值
    • 5.2 值的范围
    • 5.3 NaN (not a number)
    • 5.4 数值转换
      • 5.4.1 万金油 Number()
      • 5.4.2 获得整数优先使用parseInt()
      • 5.4.3 获得浮点数优先使用parseFloat()

概述

ECMAScript 有 6 种简单数据类型(也称为原始类型): Undefined 、 Null 、 Boolean 、 Number 、String 和 Symbol 。 Symbol (符号)是 ECMAScript 6 新增的。还有一种复杂数据类型叫 Object (对象)。 Object 是一种无序名值对的集合。因为在 ECMAScript 中不能定义自己的数据类型,所有值都可以用上述 7 种数据类型之一来表示。只有 7 种数据类型似乎不足以表示全部数据。但 ECMAScript的数据类型很灵活,一种数据类型可以当作多种数据类型来使用。

1. 检测类型的最好工具 typeof 操作符

  因为 ECMAScript 的类型系统是松散的,所以需要一种手段来确定任意变量的数据类型。 typeof
操作符就是为此而生的。对一个值使用 typeof 操作符会返回下列字符串之一:

  • “undefined” 表示值未赋值;
  • “boolean” 表示值为布尔值;
  • “string” 表示值为字符串;
  • “number” 表示值为数值;
  • “object” 表示值为对象(而不是函数)或 null ;
  • “function” 表示值为函数;
  • “symbol” 表示值为符号。

  下面是使用 typeof 操作符的例子:

let message = "some string";
console.log(typeof message); // "string"
console.log(typeof(message)); // "string"
console.log(typeof 95); // "number"

  在这个例子中,我们把一个变量( message )和一个数值字面量传给了 typeof 操作符。注意,因为 typeof 是一个操作符而不是函数,所以不需要参数(但可以使用参数)。
  typeof 在某些情况下返回的结果可能会让人费解,但技术上讲还是正确的。比如,调用 typeof null 返回的是 “object” 。这是因为特殊值 null 被认为是一个对空对象的引用。

严格来讲,函数在 ECMAScript 中被认为是对象,并不代表一种数据类型。可是,函数也有自己特殊的属性。为此,就有必要通过 typeof 操作符来区分函数和其他对象。

2. Undefined 未赋值类型

   Undefined (英文原义:未限定的)类型只有一个值,就是特殊值 undefined 。当使用 var 或 let 声明了变量但没有初始化时,就相当于给变量赋予了 undefined 值:

let message;
console.log(message == undefined); // true

  在这个例子中,变量 message 在声明的时候并未初始化。而在比较它和 undefined 的字面值时,两者是相等的。这个例子等同于如下示例:

let message = undefined;
console.log(message == undefined); // true

  这里,变量 message 显式地以 undefined 来初始化。但这是不必要的,因为默认情况下,任何未经初始化的变量都会取得 undefined 值。

一般来说,永远不用显式地给某个变量设置 undefined 值。字面值 undefined主要用于比较,而且在 ECMA-262 第 3 版之前是不存在的。增加这个特殊值的目的就是为了正式明确 空对象指针( null )和 未初始化变量的区别

  注意, 包含 undefined 值的变量跟未定义变量是有区别的。请看下面的例子:

let message; // 这个变量被声明了,只是值为 undefined
// 确保没有声明过这个变量
// let age
console.log(message); // "undefined"
console.log(age); // Uncaught ReferenceError: d2 is not defined

  在上面的例子中,第一个 console.log 会指出变量 message 的值,即 “undefined” 。而第二个console.log 要输出一个未声明的变量 age 的值,因此会导致报错。对未声明的变量,只能执行一个有用的操作,就是对它调用 typeof 。(对未声明的变量调用 delete 也不会报错,但这个操作没什么用,实际上在严格模式下会抛出错误。)
  在对未初始化的变量调用 typeof 时,返回的结果是 “undefined” ,但对未声明的变量调用它时,返回的结果还是 “undefined” ,这就有点让人看不懂了。比如下面的例子:

let message; // 这个变量被声明了,只是值为 undefined
// 确保没有声明过这个变量
// let age
console.log(typeof message); // "undefined"
console.log(typeof age); // "undefined"

  无论是声明还是未声明, typeof 返回的都是字符串 “undefined” 。逻辑上讲这是对的,因为虽然严格来讲这两个变量存在根本性差异,但它们都无法执行实际操作。

即使未初始化的变量会被自动赋予 undefined 值,但我们仍然建议在声明变量的同时进行初始化。这样,当 typeof返回 “undefined” 时,你就会知道那是因为给定的变量尚未声明,而不是声明了但未初始化。

  undefined 是一个假值。因此,如果需要,可以用更简洁的方式检测它。不过要记住,也有很多其他可能的值同样是假值。所以一定要明确自己想检测的就是 undefined 这个字面值,而不仅仅是假值。

let message; // 这个变量被声明了,只是值为 undefined
// age 没有声明
if (message) {
// 这个块不会执行
}
if (!message) {
// 这个块会执行
}
if (age) {
// 这里会报错
}

3. Null 空指针类型

  Null 类型同样只有一个值,即特殊值 null 。逻辑上讲, null 值表示一个空对象指针,这也是给
typeof 传一个 null 会返回 “object” 的原因:

let car = null;
console.log(typeof car); // "object"

  在定义将来要保存对象值的变量时,建议使用 null 来初始化,不要使用其他值。这样,只要检查这个变量的值是不是 null 就可以知道这个变量是否在后来被重新赋予了一个对象的引用,比如:

if (car != null) {
// car 是一个对象的引用
}

   undefined 值是由 null 值派生而来的,因此 ECMA-262 将它们定义为表面上相等,如下面的例子所示:

console.log(null == undefined); // true

  用等于操作符( == )比较 null 和 undefined 始终返回 true 。但要注意,这个操作符会为了比较而转换它的操作数。
  即使 null 和 undefined 有关系,它们的用途也是完全不一样的。如前所述,永远不必显式地将变量值设置为 undefined 。但 null 不是这样的。任何时候,只要变量要保存对象,而当时又没有那个对象可保存,就要用null 来填充该变量。这样就可以保持 null 是空对象指针的语义,并进一步将其与 undefined 区分开来。
  null 是一个假值。因此,如果需要,可以用更简洁的方式检测它。不过要记住,也有很多其他可能的值同样是假值。所以一定要明确自己想检测的就是 null 这个字面值,而不仅仅是假值。

let message = null;
let age;
if (message) {
// 这个块不会执行
}
if (!message) {
// 这个块会执行
}
if (age) {
// 这个块不会执行
}
if (!age) {
// 这个块会执行
}

4. Boolean 类型

  Boolean (布尔值)类型是 ECMAScript 中使用最频繁的类型之一,有两个字面值: true 和 false 。这两个布尔值不同于数值,因此 true 不等于 1, false 不等于 0。下面是给变量赋布尔值的例子:

let found = true;
let lost = false;

  注意,布尔值字面量 true 和 false 是区分大小写的,因此 True 和 False (及其他大小混写形式)是有效的标识符,但不是布尔值。
  虽然布尔值只有两个,但所有其他 ECMAScript 类型的值都有相应布尔值的等价形式。要将一个其他类型的值转换为布尔值,可以调用特定的 Boolean() 转型函数:

let message = "Hello world!";
let messageAsBoolean = Boolean(message);

  在这个例子中,字符串 message 会被转换为布尔值并保存在变量 messageAsBoolean 中。Boolean() 转型函数可以在任意类型的数据上调用,而且始终返回一个布尔值。什么值能转换为 true 或 false 的规则取决于数据类型和实际的值。下表总结了不同类型与布尔值之间的转换规则。

数据类型转化为 true 的值转化为 false 的值
Booleantruefalse
String非空字符串" " (空字符串)
Number 非零数值(包括无穷值)0 、 NaN (参见后面的相关内容)
Object任意对象null
UndefinedN/A (不存在)undefined
  理解以上转换非常重要,因为像 if 等流控制语句会自动执行其他类型值到布尔值的转换,例如:
let message = "Hello world!";
if (message) {console.log("Value is true");
}

  在这个例子中, console.log 会输出字符串 “Value is true” ,因为字符串 message 会被自动转换为等价的布尔值 true 。由于存在这种自动转换,理解流控制语句中使用的是什么变量就非常重要。错误地使用对象而不是布尔值会明显改变应用程序的执行流。

5. Number 类型

  ECMAScript 中最有意思的数据类型或许就是 Number 了。 Number 类型使用 IEEE 754格式表示整数和浮点值(在某些语言中也叫双精度值)。不同的数值类型相应地也有不同的数值字面量格式。
   最基本的数值字面量格式是十进制整数,直接写出来即可:

let intNum = 55; // 整数

   整数也可以用八进制(以 8 为基数)或十六进制(以 16 为基数)字面量表示。对于八进制字面量,第一个数字必须是零(0)之后加小写字母o,然后是相应的八进制数字(数值 0~7)。如果字面量中包含的数字超出了应有的范围,就会忽略前缀的零,后面的数字序列会被当成十进制数,如下所示:

let octalNum1 = 0o70; // 八进制的 56
let octalNum2 = 0o79; // 无效的八进制值,当成 79 处理
let octalNum3 = 0o8; // 无效的八进制值,当成 8 处理

   八进制字面量在严格模式下是无效的,会导致 JavaScript 引擎抛出语法错误。
   要创建十六进制字面量,必须让真正的数值前缀 0x (区分大小写),然后是十六进制数字(0~9 以
及 A~F)。十六进制数字中的字母大小写均可。下面是几个例子:

let hexNum1 = 0xA; // 十六进制 10
let hexNum2 = 0x1f; // 十六进制 31

  使用八进制和十六进制格式创建的数值在所有数学操作中都被视为十进制数值。

由于 JavaScript 保存数值的方式,实际中可能存在正零(+0)和负零(-0)。正零和负零在所有情况下都被认为是等同的,这里特地说明一下。

5.1 浮点值

   要定义浮点值,数值中必须包含小数点,而且小数点后面必须至少有一个数字。虽然小数点前面不
是必须有整数,但推荐加上。下面是几个例子:

let floatNum1 = 1.1;
let floatNum2 = 0.1;
let floatNum3 = .1; // 有效,但不推荐

   因为存储浮点值使用的内存空间是存储整数值的两倍,所以 ECMAScript 总是想方设法把值转换为整数。在小数点后面没有数字的情况下,数值就会变成整数。类似地,如果数值本身就是整数,只是小数点后面跟着 0(如 1.0),那它也会被转换为整数,如下例所示:

let floatNum1 = 1.; // 小数点后面没有数字,当成整数 1 处理
let floatNum2 = 10.0; // 小数点后面是零,当成整数 10 处理

  对于非常大或非常小的数值,浮点值可以用科学记数法来表示。科学记数法用于表示一个应该乘以10 的给定次幂的数值。ECMAScript 中科学记数法的格式要求是一个数值(整数或浮点数)后跟一个大写或小写的字母 e,再加上一个要乘的 10 的多少次幂。比如:

let floatNum = 3.125e7; // 等于 31250000

  在这个例子中, floatNum 等于 31 250 000,只不过科学记数法显得更简洁。这种表示法实际上相当于说:“以 3.125 作为系数,乘以 10 的 7 次幂。”
  科学记数法也可以用于表示非常小的数值,例如 0.000 000 000 000 000 03。这个数值用科学记数法可以表示为 3e-17。默认情况下,ECMAScript 会将小数点后至少包含 6 个零的浮点值转换为科学记数法(例如,0.000 000 3 会被转换为 3e-7)。
  浮点值的精确度最高可达 17 位小数,但在算术计算中远不如整数精确。例如,0.1 加 0.2 得到的不是 0.3,而是 0.300 000 000 000 000 04。由于这种微小的舍入错误,导致很难测试特定的浮点值。比如下面的例子:

if (a + b == 0.3) { // 别这么干!
console.log("You got 0.3.");
}

  这里检测两个数值之和是否等于 0.3。如果两个数值分别是 0.05 和 0.25,或者 0.15 和 0.15,那没问题。但如果是 0.1 和 0.2,如前所述,测试将失败。因此永远不要测试某个特定的浮点值

之所以存在这种舍入错误,是因为使用了 IEEE 754数值,这种错误并非 ECMAScript所独有。其他使用相同格式的语言也有这个问题。

5.2 值的范围

  由于内存的限制,ECMAScript 并不支持表示这个世界上的所有数值。ECMAScript 可以表示的最小数值保存在 Number.MIN_VALUE 中,这个值在多数浏览器中是 5e-324;可以表示的最大数值保存在 Number.MAX_VALUE 中,这个值在多数浏览器中是 1.797 693 134 862 315 7e+308。如果某个计算得到的数值结果超出了 JavaScript 可以表示的范围,那么这个数值会被自动转换为一个特殊的 Infinity (无穷)值。任何无法表示的负数以 -Infinity (负无穷大)表示,任何无法表示的正数以 Infinity (正无穷大)表示。
  如果计算返回正 Infinity 或负 Infinity ,则该值将不能再进一步用于任何计算。这是因为Infinity 没有可用于计算的数值表示形式。要确定一个值是不是有限大(即介于 JavaScript 能表示的最小值和最大值之间),可以使用 isFinite() 函数,如下所示:

let result = Number.MAX_VALUE + Number.MAX_VALUE;
console.log(isFinite(result)); // false

  虽然超出有限数值范围的计算并不多见,但总归还是有可能的。因此在计算非常大或非常小的数值时,有必要监测一下计算结果是否超出范围。

使用 Number.NEGATIVE_INFINITY 和 Number.POSITIVE_INFINITY 也可以获取正、负 Infinity 。没错,这两个属性包含的值分别就是 -Infinity 和 Infinity 。

5.3 NaN (not a number)

  有一个特殊的数值叫 NaN ,意思是“不是数值”(Not a Number),用于表示本来要返回数值的操作失败了(而不是抛出错误)。比如,用 0 除任意数值在其他语言中通常都会导致错误,从而中止代码执行。但在 ECMAScript 中,0、+0 或-0 相除会返回 NaN :

	console.log(0/0); // NaNconsole.log(-0/+0); // NaN

  如果分子是非 0 值,分母是有符号 0 或无符号 0,则会返回 Infinity 或 -Infinity :

console.log(5/0); // Infinity
console.log(5/-0); // -Infinity

  NaN 有几个独特的属性。首先,任何涉及 NaN 的操作始终返回 NaN (如 NaN/10 ),在连续多步计算时这可能是个问题。其次, NaN 不等于包括 NaN 在内的任何值。例如,下面的比较操作会返回 false :

console.log(NaN == NaN); // false

  为此,ECMAScript 提供了 isNaN() 函数。该函数接收一个参数,可以是任意数据类型,然后判断这个参数是否“不是数值”。把一个值传给 isNaN() 后,该函数会尝试把它转换为数值。某些非数值的值可以直接转换成数值,如字符串 “10” 或布尔值。任何不能转换为数值的值都会导致这个函数返回true 。举例如下:

console.log(isNaN(NaN)); // true
console.log(isNaN(10)); // false,10 是数值
console.log(isNaN("10")); // false,可以转换为数值 10
console.log(isNaN("blue")); // true,不可以转换为数值
console.log(isNaN(true)); // false,可以转换为数值 1

  上述的例子测试了 5 个不同的值。首先测试的是 NaN 本身,显然会返回 true 。接着测试了数值 10和字符串 “10” ,都返回 false ,因为它们的数值都是 10。字符串 “blue” 不能转换为数值,因此函数返回 true 。布尔值 true 可以转换为数值 1,因此返回 false 。

虽然不常见,但 isNaN() 可以用于测试对象。此时,首先会调用对象的 valueOf()方法,然后再确定返回的值是否可以转换为数值。如果不能,再调用 toString() 方法,并测试其返回值。这通常是 ECMAScript 内置函数和操作符的工作方式。

5.4 数值转换

  有 3 个函数可以将非数值转换为数值: Number() 、 parseInt() 和 parseFloat() 。 Number() 是转型函数,可用于任何数据类型。后两个函数主要用于将字符串转换为数值。对于同样的参数,这 3 个函数执行的操作也不同。

5.4.1 万金油 Number()

  Number() 函数基于如下规则执行转换:

  • 布尔值, true 转换为 1, false 转换为 0。
  • 数值,直接返回。
  • null ,返回 0。
  • undefined ,返回 NaN 。
  • 字符串,应用以下规则:
  1. 如果字符串包含数值字符,包括数值字符前面带加、减号的情况,则转换为一个十进制数值。因此, Number(“1”) 返回 1, Number(“123”) 返回 123, Number(“011”) 返回 11(忽略前面的零)。
  2. 如果字符串包含有效的浮点值格式如 “1.1” ,则会转换为相应的浮点值(同样,忽略前面的零)。
  3. 如果字符串包含有效的十六进制格式如 “0xf” ,则会转换为与该十六进制值对应的十进制整数值。
  4. 如果是空字符串(不包含字符),则返回 0。
  5. 如果字符串包含除上述情况之外的其他字符,则返回 NaN 。
  • 对象,调用 valueOf() 方法,并按照上述规则转换返回的值。如果转换结果是 NaN ,则调用toString() 方法,再按照转换字符串的规则转换。
       从不同数据类型到数值的转换有时候会比较复杂,看一看 Number() 的转换规则就知道了。下面是
    几个具体的例子:
let num1 = Number("Hello world!"); // NaN
let num2 = Number(""); // 0
let num3 = Number("000011"); // 11
let num4 = Number(true); // 1

   可以看到,字符串 “Hello world” 转换之后是 NaN ,因为它找不到对应的数值。空字符串转换后是 0。字符串 000011 转换后是 11,因为前面的零被忽略了。最后, true 转换为 1。

5.4.2 获得整数优先使用parseInt()

   考虑到用 Number() 函数转换字符串时相对复杂且有点反常规,通常在需要得到整数时可以优先使用 parseInt() 函数
   转换规则 parseInt() 函数更专注于字符串是否包含数值模式。字符串最前面的空格会被忽略,从第一个非空格字符开始转换。如果第一个字符不是数值字符、加号或减号, parseInt() 立即返回 NaN 。这意味着空字符串也会返回 NaN (这一点跟 Number() 不一样,它返回 0)。如果第一个字符是数值字符、加号或减号,则继续依次检测每个字符,直到字符串末尾,或碰到非数值字符。比如,“1234blue” 会被转换为 1234,因为 “blue” 会被完全忽略。类似地, “22.5” 会被转换为 22,因为小数点不是有效的整数字符。
   进制识别 假设字符串中的第一个字符是数值字符, parseInt() 函数也能识别不同的整数格式(十进制、八进制、十六进制)。换句话说,如果字符串以 “0x” 开头,就会被解释为十六进制整数。如果字符串以 "0"开头,且紧跟着数值字符,在非严格模式下会被某些实现解释为八进制整数。
   下面几个转换示例有助于理解上述规则:

let num1 = parseInt("1234blue"); // 1234
let num2 = parseInt(""); // NaN
let num3 = parseInt("0xA"); // 10,解释为十六进制整数
let num4 = parseInt(22.5); // 22
let num5 = parseInt("70"); // 70,解释为十进制值
let num6 = parseInt("0xf"); // 15,解释为十六进制整数

   不同的数值格式很容易混淆,因此 parseInt() 也接收第二个参数,用于指定底数(进制数)。如果知道要解析的值是十六进制,那么可以传入 16 作为第二个参数,以便正确解析:

let num = parseInt("0xAF", 16); // 175 , AF的十进制为175

   事实上,如果提供了十六进制参数,那么字符串前面的 “0x” 可以省掉:

let num1 = parseInt("AF", 16); // 175
let num2 = parseInt("AF"); // NaN

   在这个例子中,第一个转换是正确的,而第二个转换失败了。区别在于第一次传入了进制数作为参数,告诉 parseInt() 要解析的是一个十六进制字符串。而第二个转换检测到第一个字符就是非数值字符,随即自动停止并返回 NaN 。
   通过第二个参数,可以极大扩展转换后获得的结果类型。比如:

let num1 = parseInt("10", 2); // 2,按二进制解析
let num2 = parseInt("10", 8); // 8,按八进制解析
let num3 = parseInt("10", 10); // 10,按十进制解析
let num4 = parseInt("10", 16); // 16,按十六进制解析

   因为不传底数参数相当于让 parseInt() 自己决定如何解析,所以为避免解析出错,建议始终传给它第二个参数。

多数情况下解析的应该都是十进制数,此时第二个参数就要传入 10。

5.4.3 获得浮点数优先使用parseFloat()

  parseFloat() 函数的工作方式跟 parseInt() 函数类似,都是从位置 0 开始检测每个字符。同样,它也是解析到字符串末尾或者解析到一个无效的浮点数值字符为止。这意味着第一次出现的小数点是有效的,但第二次出现的小数点就无效了,此时字符串的剩余字符都会被忽略。因此, “22.34.5” 将转换成 22.34。
  parseFloat() 函数的另一个不同之处在于,它始终忽略字符串开头的零。这个函数能识别前面讨
论的所有浮点格式,以及十进制格式(开头的零始终被忽略)。十六进制数值始终会返回 0。因为
parseFloat() 只解析十进制值,因此不能指定底数。最后,如果字符串表示整数(没有小数点或者小
数点后面只有一个零),则 parseFloat() 返回整数。下面是几个示例:

let num1 = parseFloat("1234blue"); // 1234,按整数解析
let num2 = parseFloat("0xA"); // 0
let num3 = parseFloat("22.5"); // 22.5
let num4 = parseFloat("22.34.5"); // 22.34
let num5 = parseFloat("0908.5"); // 908.5
let num6 = parseFloat("3.125e7"); // 31250000

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com