网站
引入
JS 中的数据有不同类型,不同类型的数据在使用方式和存储方式上有区别。
了解数据类型,才能知道一个变量保存的是文本、数字、还是更复杂的数据,也能理解运算和比较时的行为。
正文
定义
定义
JS 的数据类型分为值类型(原始类型)和引用类型两大类,值类型直接保存数据本身,引用类型保存数据的内存地址。
值类型
值类型也叫原始类型,直接保存数据本身。
| 类型 | 说明 | 示例 |
|---|---|---|
string | 字符串 | "hello" |
number | 数字 | 100、3.14 |
boolean | 布尔值 | true、false |
null | 空值 | null |
undefined | 未定义 | undefined |
symbol | 唯一标识 | Symbol() |
bigint | 大整数 | 123n |
let text = "hello";
let num = 100;
let flag = true;
let empty = null;
let notSet;
let id = Symbol("id");
let big = 123n;值类型的变量直接保存数据,赋值时会复制一份。
let a = 10;
let b = a;
a = 20;
console.log(a);
console.log(b);输出结果:
20
10b 保存的是复制出来的值,修改 a 不会影响 b。
引用类型
引用类型保存的是数据的内存地址。
| 类型 | 说明 | 示例 |
|---|---|---|
object | 对象 | { name: "Tom" } |
array | 数组 | [1, 2, 3] |
function | 函数 | function () {} |
let person = { name: "Tom", age: 18 };
let list = [1, 2, 3];
let sayHello = function () {
console.log("hello");
};引用类型的变量保存的是地址,赋值时复制的是地址。
let obj1 = { name: "Tom" };
let obj2 = obj1;
obj2.name = "Jerry";
console.log(obj1.name);
console.log(obj2.name);输出结果:
"Jerry"
"Jerry"两个变量指向同一个对象,修改其中一个会影响另一个。
值类型和引用类型的区别
| 对比 | 值类型 | 引用类型 |
|---|---|---|
| 存储位置 | 栈内存 | 堆内存 |
| 保存内容 | 数据本身 | 数据的内存地址 |
| 赋值行为 | 复制数据 | 复制地址 |
| 修改影响 | 互不影响 | 指向同一份数据时会互相影响 |
typeof 判断类型
typeof 可以查看数据属于什么类型。
console.log(typeof "hello");
console.log(typeof 100);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof Symbol());
console.log(typeof 123n);输出结果:
"string"
"number"
"boolean"
"undefined"
"object"
"symbol"
"bigint"注意 typeof null 返回 "object",这是 JS 的一个历史遗留问题,null 实际上不是对象。
typeof 常见结果
| 表达式 | 结果 |
|---|---|
typeof "hello" | "string" |
typeof 100 | "number" |
typeof 3.14 | "number" |
typeof true | "boolean" |
typeof undefined | "undefined" |
typeof null | "object" |
typeof Symbol() | "symbol" |
typeof 123n | "bigint" |
typeof { name: "Tom" } | "object" |
typeof [1, 2, 3] | "object" |
typeof function () {} | "function" |
typeof NaN | "number" |
注意:
typeof null返回"object",这是已知的 bugtypeof [1, 2, 3]返回"object",数组本质上是对象typeof NaN返回"number",NaN表示不是有效数字,但类型仍然是number- 只有函数会返回
"function",其他引用类型都返回"object"
判断数组
如果要判断一个值是不是数组,可以用 Array.isArray()。
console.log(Array.isArray([1, 2, 3]));
console.log(Array.isArray({ name: "Tom" }));输出结果:
true
false判断 null
因为 typeof null 返回 "object",判断 null 可以直接用严格相等。
let value = null;
console.log(value === null);输出结果:
true例子
查看变量类型
let name = "Tom";
let age = 18;
let isLogin = true;
let list = [1, 2, 3];
console.log(typeof name);
console.log(typeof age);
console.log(typeof isLogin);
console.log(typeof list);
console.log(Array.isArray(list));输出结果:
"string"
"number"
"boolean"
"object"
true值类型赋值
let a = "hello";
let b = a;
a = "world";
console.log(a);
console.log(b);输出结果:
"world"
"hello"值类型赋值后,修改互不影响。
引用类型赋值
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1);
console.log(arr2);输出结果:
[1, 2, 3, 4]
[1, 2, 3, 4]引用类型赋值后,两个变量指向同一份数据。
特点
- JS 数据类型分为值类型和引用类型
- 值类型直接保存数据,引用类型保存数据的地址
- 值类型赋值是复制数据,引用类型赋值是复制地址
typeof可以查看数据类型typeof null返回"object",这是已知的 bugtypeof对数组也返回"object",判断数组要用Array.isArray()- 值类型有 7 种:
string、number、boolean、null、undefined、symbol、bigint - 引用类型包括对象、数组、函数
理解
可以把值类型理解为写在纸上的字,抄一份就是独立的一份,改了原来那张不影响抄出来的那张。
引用类型更像是给了别人一个地址,大家都按这个地址去找同一个地方,其中一个人改了里面的东西,其他人看到的也会变。
typeof 是最常用的类型判断方式,但对 null 和数组不太准,所以实际中经常配合 Array.isArray() 和 === null 来用。
引出
理解了数据类型的分类后,可以继续学习 JS 值类型 和 JS 引用类型,分别深入了解它们各自的特点和行为。
也可以学习 JS 类型转换,了解不同类型之间怎么互相转换。