理解 JavaScript 数据类型:从基础到高级

97 阅读3分钟

在前端开发的世界里,JavaScript 作为一门核心语言,其数据类型的理解和运用至关重要。今天,就让我们一同深入探讨 JavaScript 的数据类型,从简单的基础类型到复杂的对象类型,全面解析其中的奥秘。

一、JavaScript 数据类型概述

JavaScript 中的数据类型主要分为两大类:简单数据类型(Primitive)和复杂数据类型(Object)。简单数据类型存储在栈内存中,采用拷贝式传值;而复杂数据类型则由栈内存中的地址引用和堆内存中的对象内容组成,使用引用式赋值。

1.1 简单数据类型

简单数据类型一共有 6 种,分别是 stringnumberbooleannullundefinedsymbolbigint。其中,numeric 又包含 numberbigint

1.1.1 string

字符串类型用于表示文本数据,是最常见的数据类型之一。例如:

const name = '张三';

1.1.2 number

number 类型用于表示整数和浮点数。不过,JavaScript 中的 number 类型在处理高精度计算时存在一定的局限性,例如 0.1 + 0.2 的结果并不是 0.3

console.log(0.1 + 0.2); // 输出: 0.30000000000000004

1.1.3 bigint

为了解决 number 类型在处理大数时的精度问题,ES6 引入了 bigint 类型。bigint 可以表示任意大的整数,后面需要加 n 或者使用 BigInt() 函数来创建。

const bigNum = 123456789012345678901234567890123456789n;
const theNum = BigInt("123456789012345678901234567890123456789");

1.1.4 boolean

布尔类型只有两个值:truefalse,常用于条件判断。

const isStudent = true;

1.1.5 nullundefined

null 表示一个空对象指针,通常用于手动释放对象的引用;undefined 表示变量已声明但未赋值。

let person = null;
let age;
console.log(age); // 输出: undefined

1.1.6 symbol

symbol 是 ES6 新增的一种数据类型,用于创建独一无二的值。可以使用 Symbol() 函数来创建 symbol 类型的值。

const sym = Symbol();
const sym1 = Symbol();
console.log(sym === sym1); // 输出: false

symbol 还可以作为对象的属性名,确保属性名的唯一性。

const ID = Symbol('id');
const user = {
    [ID]: 123,
    name: 'Alice'
};

1.2 复杂数据类型

除了上述 6 种简单数据类型外,其他的都属于复杂数据类型,也就是 object。复杂数据类型在栈内存中存储的是地址引用,实际的对象内容存储在堆内存中。

const person = {
    name: '李四',
    age: 20
};

二、类型判断与刻意练习

2.1 类型判断

在 JavaScript 中,可以使用 typeof 运算符来判断简单数据类型(除了 null),typeof 返回的是类型的字符串。

function add(a, b) {
    // 参数的校验
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw new TypeError('a 和 b 必须是数字');
    }
    return a + b;
}

不过,typeof 对于 null 的判断会返回 object,这是 JavaScript 早期的一个设计缺陷。如果需要更准确地判断数据类型,可以使用 Object.prototype.toString.call() 方法。

2.2 刻意练习:编写 add 函数

/**
 * @func 两数之和
 * @param {number} a 
 * @param {number} b 
 * @returns {number}
 */
function add(a, b) {
    // 参数的校验
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw new TypeError('a 和 b 必须是数字');
    }
    return a + b;
}

三、ECMA 与 JavaScript

JavaScript 是 ECMA 语法规范的一个版本。ECMA 是一个制定标准的组织,JavaScript 遵循 ECMA 制定的规范进行发展。需要注意的是,JavaScript 和 Java 并没有关系,它们是两门不同的编程语言。

四、总结

JavaScript 的数据类型是前端开发的基础,深入理解简单数据类型和复杂数据类型的特点、区别以及类型判断方法,对于编写高质量的 JavaScript 代码至关重要。同时,随着 ES6 等新标准的推出,新的数据类型如 symbolbigint 为我们提供了更多的编程可能性。希望通过本文的介绍,大家对 JavaScript 数据类型有了更全面的认识,在实际开发中能够更加得心应手。