关于前端:现代JavaScript高级教程Javascript数据类型和类型转换

Javascript 数据类型和类型转换

在 JavaScript 中，了解数据类型，如何辨别它们，以及它们如何被转换是至关重要的。在这篇文章中，咱们将探讨这些主题，以帮忙坚固你的 JavaScript 根底。

根底数据类型和援用数据类型

当波及 JavaScript 的数据类型时，咱们能够将其分为两类：根本数据类型和援用数据类型。

1. 根本数据类型（Primitive Types）：

• 数字（Number）：示意数值，能够蕴含整数和浮点数。例如：let age = 25;
• 字符串（String）：示意文本数据，由一串字符组成。能够应用单引号或双引号包裹。例如：let name = 'John';
• 布尔（Boolean）：示意逻辑值，只有两个可能的值：true（真）和false（假）。例如：let isStudent = true;
• 空值（Null）：示意空值或无值。它是一个非凡的关键字null。例如：let myVariable = null;
• 未定义（Undefined）：示意变量申明但未赋值的值。它是一个非凡的关键字undefined。例如：let myVariable;
• 符号（Symbol）：示意惟一且不可变的值，用于创建对象属性的惟一标识符。在 ES6 中引入。例如：let id = Symbol('id');

2. 援用数据类型（Reference Types）：

• 对象（Object）：示意简单的数据结构，能够蕴含多个键值对。对象能够通过大括号 {} 创立，或者通过构造函数创立。例如：

  let person = {
    name: 'John',
    age: 25,
    city: 'New York'
  };

• 数组（Array）：示意有序的数据汇合，能够蕴含任意类型的数据。数组能够通过方括号 [] 创立。例如：

  let numbers = [1, 2, 3, 4, 5];

• 函数（Function）：是一段可执行的代码块，能够接管参数并返回值。函数能够作为变量、参数传递、存储在对象属性中等。例如：

  function greet(name) {console.log('Hello,' + name + '!');
  }

根本数据类型在 JavaScript 中是按值传递的，而援用数据类型则是按援用传递的。这意味着根本数据类型的值在传递过程中是复制的，而援用数据类型的值在传递过程中是共享的。

理解这些根本数据类型和援用数据类型，为后续解说类型转换提供了根本的背景常识。它们在 JavaScript 中的不同行为和用法对于了解类型转换的概念和机制十分重要。

应用 typeof 操作符

在 JavaScript 中，咱们能够应用 typeof 操作符来获取一个值的数据类型。上面是一些例子：

console.log(typeof undefined);  // 'undefined'
console.log(typeof true);  // 'boolean'
console.log(typeof 78);  // 'number'
console.log(typeof 'hey');  // 'string'
console.log(typeof Symbol());  // 'symbol'
console.log(typeof BigInt(1));  // 'bigint'
console.log(typeof new String('abc'));  // 'object'
console.log(typeof null);  // 'object'
console.log(typeof function(){});  // 'function'
console.log(typeof {name: 'Jack'});  // 'object'

留神，typeof返回的是值的类型，而不是变量的类型。因为在 JavaScript 中，变量自身并没有类型，它们能够持有任何类型的值。

对大多数对象应用 typeof 时，返回的后果是 'object'，对于函数则返回'function'。特地的，对null 应用 typeof 返回的也是'object'，这是一个历史遗留的 bug，咱们无奈改过。所以，如果咱们须要查看一个值是否为null，咱们能够应用以下形式：

var a = null;
console.log(!a && typeof a === "object"); // true

包装类型

在 JavaScript 中，根本数据类型有对应的包装对象，这样咱们就能够在根本数据类型上调用办法了。例如，字符串有对应的 String 包装对象，咱们就能够在字符串上调用 String 对象的办法：

let s = 'Hello, world!';
console.log(s.length);  // 13

这里，length是 String 对象的一个属性，咱们能够在字符串 s 上拜访它。这是如何做到的呢？当咱们在一个字符串上调用一个办法或者拜访一个属性时，JavaScript 会将字符串主动转换为一个长期的 String 对象，而后在这个长期对象上调用办法或者拜访属性。实现后，长期对象就会被销毁。

其余的根本数据类型，如Number，Boolean，也有对应的包装对象，操作形式相似。

隐式类型转换

在 JavaScript 中，隐式类型转换是指在特定的上下文中，JavaScript 主动将一个数据类型转换为另一个数据类型，而无需显式地编写转换代码。以下是一些常见的隐式类型转换示例：

1. 数字转字符串：

let num = 10;
let str = num + ''; // 将数字转换为字符串
console.log(str); // 输入: "10"

在这个例子中，通过将数字与一个空字符串相加，JavaScript 会将数字隐式转换为字符串。

2. 字符串转数字：

let str = '20';
let num = +str; // 将字符串转换为数字
console.log(num); // 输入: 20

在这个例子中，通过应用一元加号操作符（+）对字符串进行操作，JavaScript 会将字符串隐式转换为数字。

3. 布尔值转数字：

let bool = true;
let num = +bool; // 将布尔值转换为数字
console.log(num); // 输入: 1

在这个例子中，通过应用一元加号操作符（+）对布尔值进行操作，JavaScript 会将布尔值隐式转换为数字，true转换为 1，false转换为 0。

4. 字符串转布尔值：

let str = 'true';
let bool = !!str; // 将字符串转换为布尔值
console.log(bool); // 输入: true

在这个例子中，通过应用两个逻辑非操作符（!!）对字符串进行操作，JavaScript 会将字符串隐式转换为布尔值，非空字符串转换为true，空字符串转换为false。

须要留神的是，隐式类型转换在某些状况下可能会导致意外的后果。因而，在进行类型转换时，特地是波及不同的数据类型之间的运算时，要留神确保后果合乎预期。

了解隐式类型转换的规定和机制能够帮忙咱们更好地了解 JavaScript 代码中的行为，并在须要时正确地解决数据类型转换。

5. 对象的隐式转换

在 JavaScript 中，对象在进行隐式类型转换时会依据肯定的规定进行解决。对象的隐式类型转换通常波及将对象转换为字符串或将对象转换为数字。

1. 对象转换为字符串：

当一个对象须要被隐式转换为字符串时，JavaScript 会尝试调用对象的 toString() 办法。toString()办法是一个内置办法，它返回示意对象的字符串模式。

let obj = {name: "John", age: 25};
let str = obj.toString();
console.log(str); // 输入: "[object Object]"

在上述例子中，对象 obj 会被隐式转换为字符串模式，调用了 toString() 办法并返回了"[object Object]"。

须要留神的是，toString()办法的默认实现返回 "[object Object]"，这对于大多数对象来说并不是十分有用。因而，能够通过重写对象的toString() 办法来自定义对象转换为字符串的行为。

let person = {
  name: "John",
  age: 25,
  toString() {return this.name + "-" + this.age;}
};
let str = person.toString();
console.log(str); // 输入: "John - 25"

在这个例子中，咱们重写了 person 对象的 toString() 办法，使其返回自定义的字符串模式。

2. 对象转换为数字：

当一个对象须要被隐式转换为数字时，JavaScript 会尝试调用对象的 valueOf() 办法。valueOf()办法是一个内置办法，它返回示意对象的原始数值模式。

let obj = {value: 42};
let num = obj.valueOf();
console.log(num); // 输入: 42

在上述例子中，对象 obj 会被隐式转换为数字模式，调用了 valueOf() 办法并返回了原始数值42。

须要留神的是，与日期对象的 valueOf() 办法不同，大多数对象的默认 valueOf() 办法的行为通常并不有用。因而，能够通过重写对象的 valueOf() 办法来自定义对象转换为数字的行为。

let counter = {
  value: 0,
  valueOf() {return this.value++;}
};
let num = counter.valueOf();
console.log(num); // 输入: 0
console.log(counter.value); // 输入: 1

在这个例子中，咱们重写了 counter 对象的 valueOf() 办法，使其每次调用时返回一个递增的值。

须要留神的是，对象的隐式类型转换的行为和后果可能会因对象的类型、实现形式以及具体的上下文而有所不同。在编写代码时，倡议依据理论需要和预期后果来解决对象的隐式类型转换，并确保了解和把握对象的 toString() 和valueOf()办法的应用。

显式类型转换

在 JavaScript 中，咱们能够应用一些内置函数和操作符来进行显式类型转换，以将一个值转换为特定的数据类型。上面是一些罕用的类型转换函数和操作符以及它们的用法和注意事项：

1. String() 函数：用于将一个值转换为字符串类型。

let num = 10;
let str = String(num); // 将数字转换为字符串
console.log(str); // 输入: "10"

须要留神的是，应用 String()函数进行转换时，对于 null 和 undefined 值会别离失去 “null” 和 “undefined” 字符串。

2. Number() 函数：用于将一个值转换为数字类型。

let str = "20";
let num = Number(str); // 将字符串转换为数字
console.log(num); // 输入: 20

须要留神的是，应用 Number()函数进行转换时，如果传入的字符串无奈解析为无效的数字，将返回 NaN（Not a Number）。

3. Boolean() 函数：用于将一个值转换为布尔类型。

let num = 0;
let bool = Boolean(num); // 将数字转换为布尔值
console.log(bool); // 输入: false

须要留神的是，应用 Boolean()函数进行转换时，对于 0、-0、null、undefined、NaN 和空字符串会返回 false，其余值都会返回 true。

4. parseInt() 和 parseFloat() 函数：用于将字符串转换为整数和浮点数类型。

let str = "123";
let num = parseInt(str); // 将字符串转换为整数
console.log(num); // 输入: 123

let floatStr = "3.14";
let floatNum = parseFloat(floatStr); // 将字符串转换为浮点数
console.log(floatNum); // 输入: 3.14

须要留神的是，应用 parseInt() 和 parseFloat() 函数进行转换时，它们会尝试解析字符串的结尾局部，直到遇到非数字字符为止。

除了上述函数，还有一些罕用的操作符也能够进行显式类型转换：

• 加号操作符（+）：用于将值转换为数字类型。

let str = "20";
let num = +str; // 将字符串转换为数字
console.log(num); // 输入: 20

• 双重取反操作符（!!）：用于将值转换为布尔类型。

let num = 0;
let bool = !!num; // 将数字转换为布尔值
console.log(bool); // 输入: false

在进行显式类型转换时，须要留神以下几点：

• 理解转换函数和操作符的行为和规定，以防止出现意外的后果。
• 特地留神在将字符串转换为数字时，确保字符串可能正确解析为无效的数字，以防止失去 NaN。
• 留神解决 null 和 undefined 值时的类型转换后果。
• 在类型转换场景中，依据具体需要抉择适合的函数或操作符。

通过显式类型转换，咱们能够将值从一个数据类型转换为另一个数据类型，以满足具体的需要和逻辑。

类型转换规定

理解类型转换的规定和注意事项是十分重要的，能够帮忙咱们防止出现意外的后果和谬误的行为。上面是一些类型转换的规定和须要留神的状况：

1. 类型转换的优先级：在 JavaScript 中，类型转换有肯定的优先级。从高到低的优先级程序是：

• 布尔值 -> 数字 -> 字符串

这意味着在进行混合类型的操作时，JavaScript 会首先尝试将值转换为布尔值，而后是数字，最初是字符串。

2. 字符串拼接优先：在波及字符串和其余数据类型的操作中，字符串拼接的优先级最高。这意味着如果一个操作符是字符串拼接操作符（+），那么其余操作数将被隐式转换为字符串。

let num = 10;
let str = "The number is:" + num;
console.log(str); // 输入: "The number is: 10"

在这个例子中，数字 num 会被隐式转换为字符串，而后与其余字符串进行拼接。

3. NaN（Not a Number）：当波及无奈进行无效数值计算的状况时，JavaScript 会返回 NaN。NaN 是一个非凡的数字值，示意不是一个无效的数字。

let result = 10 / "hello";
console.log(result); // 输入: NaN

在这个例子中，字符串 ”hello” 无奈被解析为无效的数字，所以计算结果为 NaN。

4. null 和 undefined 的类型转换：null 和 undefined 在进行类型转换时有一些非凡规定：

• null 在进行数字转换时会被转换为 0，而在进行字符串转换时会被转换为 ”null”。
• undefined 在进行数字转换时会被转换为 NaN，而在进行字符串转换时会被转换为 ”undefined”。

let num = Number(null);
console.log(num); // 输入: 0

let str = String(undefined);
console.log(str); // 输入: "undefined"

在这个例子中，null 在数字转换时被转换为 0，undefined 在字符串转换时被转换为 ”undefined”。

5. 留神一元加号操作符（+）的行为：一元加号操作符能够用于将值转换为数字类型，但须要留神一些状况。当利用于字符串时，一元加号操作符会尝试将字符串解析为数字。

let str = "123";
let num = +str;
console.log(num); // 输入: 123

let invalidStr = "hello";
let invalidNum = +invalidStr;
console.log(invalidNum); // 输入: NaN

在这个例子中，无效的数字字符串能够胜利转换为数字，而无奈解析为数字的字符串会转换为 NaN。

理解这些规定和注意事项能够帮忙咱们更好地了解类型转换的行为，并在编写代码时防止潜在的谬误和意外后果。同时，在进行类型转换时，要依据具体的需要抉择适合的办法和操作符，并进行适当的错误处理和边界查看。

最佳实际

在 JavaScript 中，以下是一些类型转换的最佳实际和常见利用场景，以帮忙咱们编写更平安、清晰和高效的代码：

1. 防止意外的类型转换：隐式类型转换可能导致意外的后果和谬误的行为。为了防止这种状况，能够遵循以下实际：

   • 显式地应用适当的类型转换函数或操作符，明确指定冀望的转换后果。
   • 在波及类型转换的操作中，增加适当的错误处理机制，以避免有效的转换。

2. 类型平安的比拟：在条件语句中，确保进行类型平安的比拟，防止因类型转换而导致的问题。应用失当的比拟操作符（如 === 和!==）能够同时比拟值和类型，确保比拟的准确性。

   let num = "10";
   if (num === 10) {
     // 正确的比拟形式，值和类型都匹配
     console.log("The number is 10.");
   } else {console.log("The number is not 10.");
   }

   在这个例子中，应用 === 进行比拟能够防止字符串与数字的隐式转换，确保比拟的准确性。

3. 应用适当的类型转换技巧：在某些状况下，能够应用类型转换来解决问题或优化代码逻辑。以下是一些常见的类型转换技巧：

   • 将字符串转换为数字或反之：应用 Number() 函数或一元加号操作符（+）进行转换。
   • 将字符串转换为数组：应用 split() 函数将字符串拆分为数组。
   • 将对象转换为字符串：应用 JSON.stringify() 函数将对象转换为字符串示意。
   • 将数字转换为字符串并增加特定格局：应用字符串模板或字符串拼接操作符（+）。
4. 思考性能和可读性：只管类型转换是一种弱小的工具，但适度应用或滥用可能会影响代码的性能和可读性。在进行类型转换时，要权衡利弊，并确保代码易于了解和保护。

总之，把握类型转换的最佳实际能够帮忙咱们编写更强壮和高效的代码。遵循类型平安的比拟、防止意外的类型转换、抉择适当的类型转换技巧，并在性能和可读性之间找到均衡，都是编写优质 JavaScript 代码的重要因素。

参考资料

1. MDN Web Docs – Type Conversion: MDN Web Docs 中对于 JavaScript 中类型转换的官网文档，提供了对于隐式类型转换和显式类型转换的具体解释和示例。
2. MDN Web Docs – toString(): MDN Web Docs 中对于 toString() 办法的官网文档，提供了无关对象的 toString() 办法的具体解释和用法示例。
3. MDN Web Docs – valueOf(): MDN Web Docs 中对于 valueOf() 办法的官网文档，提供了无关对象的 valueOf() 办法的具体解释和用法示例。