面试官：说说Javascript数据类型和类型转换

头像
linwu
     广东
    阅读 7 分钟
    头图

    大厂学习资料

    这是我整理的学习资料，非常系统和完善，欢迎一起学习

    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');
    1. 引用数据类型（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()方法，使其返回自定义的字符串形式。

    1. 对象转换为数字：

    在JavaScript中，当一个对象需要被隐式转换为数字时，会首先尝试调用对象的valueOf()方法，如果该方法返回的不是原始值（例如数字），则会接着尝试调用对象的toString()方法，将返回值转换为数字

    let obj = { value: 42 };

let num = obj.valueOf();

console.log(num); // 输出: { value: 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" 字符串。

    1. Number() 函数：用于将一个值转换为数字类型。
    let str = "20";

let num = Number(str); // 将字符串转换为数字

console.log(num); // 输出: 20

    需要注意的是，使用Number()函数进行转换时，如果传入的字符串无法解析为有效的数字，将返回 NaN（Not a Number）。

    1. Boolean() 函数：用于将一个值转换为布尔类型。
    let num = 0;

let bool = Boolean(num); // 将数字转换为布尔值

console.log(bool); // 输出: false

    需要注意的是，使用Boolean()函数进行转换时，对于 0、-0、null、undefined、NaN 和空字符串会返回 false，其他值都会返回 true。

    1. 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会首先尝试将值转换为布尔值，然后是数字，最后是字符串。

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

        let num = 10;

let str = "The number is: " + num;

console.log(str); // 输出: "The number is: 10"

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

      1. NaN（Not a Number）：当涉及无法进行有效数值计算的情况时，JavaScript会返回NaN。NaN是一个特殊的数字值，表示不是一个有效的数字。

        let result = 10 / "hello";

console.log(result); // 输出: NaN

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

      1. 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"。

      1. 注意一元加号操作符（+）的行为：一元加号操作符可以用于将值转换为数字类型，但需要注意一些情况。当应用于字符串时，一元加号操作符会尝试将字符串解析为数字。

        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()方法的详细解释和用法示例。
    Microsoft前端javascripttypescriptreactvue.js
    linwu
    41 声望11 粉丝

    ☀高级前端开发工程师

    « 上一篇
    面试官： 类型兼容：结构化类型
    下一篇 »
    面试官：说说TypeScript类型系统层级

    引用和评论

    推荐阅读
    头像
    JS中的异步编程与Promise

    linwu阅读 605

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新