前端数据类型的探索：基础到引用数据类型

2023-11-13 10:56:39

前端开发中，数据的类型化是至关重要的，它不仅影响代码的运行效率，也影响代码的可维护性。在 JS/TS 中，数据类型分为基础数据类型和引用数据类型，本文将一一解析。

基础数据类型

基础数据类型包括 Number、String、Boolean、Null 和 Undefined，它们的值直接存储在变量中，是不可变的。

Number

Number 类型用于表示数字，包括整数、小数和浮点数。它可以用来进行数学运算，也可以用作变量的索引。

let number = 10;
console.log(number + 5); // 15

String

String 类型用于表示字符串，它由一个或多个字符组成。字符串可以用来进行字符串操作，也可以用作变量的名称或值。

let string = "Hello World";
console.log(string.toUpperCase()); // HELLO WORLD

Boolean

Boolean 类型用于表示布尔值，它只有两个可能的值：true 和 false。布尔值通常用于控制条件语句和循环。

let boolean = true;
console.log(!boolean); // false

Null

Null 类型表示一个空值，它不同于 Undefined。Null 值通常用于表示一个尚未分配值的变量。

let nullValue = null;
console.log(nullValue); // null

Undefined

Undefined 类型表示一个未定义的值，它与 Null 值不同。Undefined 值通常用于表示一个变量尚未被赋值。

let undefinedValue;
console.log(undefinedValue); // undefined

引用数据类型

引用数据类型包括 Object、Array 和 Function，它们的值存储在堆中，通过引用来访问。引用数据类型是可变的，这意味着它们的值可以改变。

Object

Object 类型用于表示对象，它由一组键值对组成。对象可以用来存储和组织数据，也可以用作变量的名称或值。

let object = {
  name: "John Doe",
  age: 30,
  city: "New York"
};
console.log(object.name); // John Doe

Array

Array 类型用于表示数组，它由一个有序的元素列表组成。数组可以用来存储和组织数据，也可以用作变量的名称或值。

let array = [1, 2, 3, 4, 5];
console.log(array[2]); // 3

Function

Function 类型用于表示函数，它是一组可以被调用的代码。函数可以用来执行任务，也可以用作变量的名称或值。

function sum(a, b) {
  return a + b;
}
console.log(sum(1, 2)); // 3

深入理解基础数据类型和引用数据类型的异同

在 JS/TS 中，基础数据类型和引用数据类型之间存在着本质的区别。基础数据类型的值直接存储在变量中，而引用数据类型的值存储在堆中，通过引用来访问。这导致了以下异同：

可变性： 基础数据类型是不可变的，这意味着它们的值一旦被赋值就不能改变。而引用数据类型是可变的，这意味着它们的值可以改变。
比较： 基础数据类型可以通过简单的比较运算符（如 == 和 ===）进行比较。而引用数据类型不能通过简单的比较运算符进行比较，因为它们的值存储在不同的内存地址中。
传递： 基础数据类型是通过值传递的，这意味着当一个基础数据类型的变量被传递给一个函数时，函数会得到该变量的副本。而引用数据类型是通过引用传递的，这意味着当一个引用数据类型的变量被传递给一个函数时，函数会得到该变量的引用，而不是副本。

灵活应用数据类型，打造健壮的前端应用

理解了 JS/TS 中的数据类型后，你就可以灵活地使用它们来打造健壮的前端应用。例如，你可以使用 Number 类型来存储价格，使用 String 类型来存储用户名，使用 Boolean 类型来控制条件语句和循环，使用 Object 类型来存储和组织用户信息，使用 Array 类型来存储一组数据，使用 Function 类型来定义函数。