JavaScript数据类型

在本章节中，我们将学习JavaScript的各种数据类型，包括基本数据类型和引用数据类型，了解它们的特点和使用方法。

1. 什么是数据类型？

数据类型是指可以在程序中使用的值的类型。JavaScript是一种动态类型语言，变量的类型可以在运行时改变。

JavaScript的数据类型分为两大类：

  • 基本数据类型：直接存储值
  • 引用数据类型：存储指向值的引用（内存地址）

2. 基本数据类型

JavaScript有7种基本数据类型：

2.1 Number（数字）

Number类型表示数值，包括整数和浮点数。

let age = 18; // 整数
let price = 19.99; // 浮点数
let pi = 3.14159; // 浮点数
let hex = 0xFF; // 十六进制，相当于255
let binary = 0b1010; // 二进制，相当于10
let octal = 0o777; // 八进制，相当于511
let infinity = Infinity; // 无穷大
let negativeInfinity = -Infinity; // 负无穷大
let notANumber = NaN; // 不是一个数字

2.2 String（字符串）

String类型表示文本数据，使用单引号、双引号或反引号包裹。

let name = "张三"; // 双引号
let city = '北京'; // 单引号
let message = `我叫${name}，来自${city}`; // 反引号，支持模板字符串

2.3 Boolean（布尔值）

Boolean类型表示逻辑值，只有两个值：true和false。

let isStudent = true;
let isAdult = false;
let hasPermission = true;

2.4 undefined（未定义）

undefined表示变量声明了但没有赋值。

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

2.5 null（空值）

null表示变量的值为空，是一个特殊的关键字。

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

2.6 Symbol（符号）

Symbol是ES6新增的基本数据类型，表示独一无二的值。

let s1 = Symbol();
let s2 = Symbol("description");
let s3 = Symbol("description");
console.log(s2 === s3); // false，每个Symbol都是唯一的

2.7 BigInt（大整数）

BigInt是ES11新增的基本数据类型，用于表示超出Number范围的整数。

let bigInt1 = 123n;
let bigInt2 = BigInt(123);
let bigInt3 = BigInt("123");

3. 引用数据类型

JavaScript的引用数据类型包括：

3.1 Object（对象）

Object是JavaScript中最基本的引用数据类型，用于存储键值对集合。

let person = {
    name: "张三",
    age: 18,
    city: "北京",
    greet: function() {
        console.log(`我叫${this.name}，今年${this.age}岁。`);
    }
};

3.2 Array（数组）

Array用于存储有序的数据集合。

let numbers = [1, 2, 3, 4, 5];
let fruits = ["苹果", "香蕉", "橙子"];
let mixed = [1, "字符串", true, null, undefined, {}];

3.3 Function（函数）

Function是可执行的代码块。

function add(a, b) {
    return a + b;
}

const multiply = function(a, b) {
    return a * b;
};

const divide = (a, b) => {
    return a / b;
};

3.4 Date（日期）

Date用于处理日期和时间。

let now = new Date();
let birthday = new Date(2000, 0, 1); // 2000年1月1日
let specificDate = new Date("2000-01-01");

3.5 RegExp（正则表达式）

RegExp用于匹配字符串中的模式。

let pattern = /abc/;
let globalPattern = /abc/g;
let caseInsensitivePattern = /abc/i;
let multiLinePattern = /abc/m;

4. 基本数据类型与引用数据类型的区别

4.1 存储方式

  • 基本数据类型：直接存储在栈（stack）中
  • 引用数据类型：值存储在堆（heap）中，栈中存储的是指向堆内存的引用（内存地址）

4.2 复制方式

  • 基本数据类型：复制值本身
  • 引用数据类型：复制引用地址，不复制值本身
// 基本数据类型复制
let a = 10;
let b = a;
b = 20;
console.log(a); // 10，a的值不变
console.log(b); // 20

// 引用数据类型复制
let obj1 = { name: "张三" };
let obj2 = obj1;
obj2.name = "李四";
console.log(obj1.name); // 李四，obj1的值也改变了
console.log(obj2.name); // 李四

4.3 比较方式

  • 基本数据类型：比较值是否相等
  • 引用数据类型：比较引用地址是否相等
// 基本数据类型比较
let x = 10;
let y = 10;
console.log(x === y); // true

// 引用数据类型比较
let obj3 = { name: "张三" };
let obj4 = { name: "张三" };
console.log(obj3 === obj4); // false，虽然值相同，但引用地址不同

5. typeof运算符

使用typeof运算符可以检测变量的数据类型。

console.log(typeof 10); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"，这是一个历史遗留问题
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function() {}); // "function"
console.log(typeof Symbol()); // "symbol"
console.log(typeof 123n); // "bigint"

6. 数据类型转换

JavaScript会自动进行类型转换，也可以手动进行类型转换。

6.1 自动类型转换

JavaScript在运算时会自动转换数据类型。

let num = 10;
let str = "20";
let result = num + str;
console.log(result); // "1020"，num被转换为字符串

let bool = true;
let sum = num + bool;
console.log(sum); // 11，bool被转换为数字1

6.2 手动类型转换

可以使用以下方法手动转换数据类型：

6.2.1 转换为Number

let strNum = "123";
let num1 = Number(strNum); // 123
let num2 = parseInt(strNum); // 123
let num3 = parseFloat("123.45"); // 123.45
let boolNum = Number(true); // 1
let nullNum = Number(null); // 0
let undefNum = Number(undefined); // NaN

6.2.2 转换为String

let num = 123;
let str1 = String(num); // "123"
let str2 = num.toString(); // "123"
let boolStr = String(true); // "true"
let nullStr = String(null); // "null"
let undefStr = String(undefined); // "undefined"

6.2.3 转换为Boolean

let num = 123;
let bool1 = Boolean(num); // true
let bool2 = Boolean(0); // false
let bool3 = Boolean("Hello"); // true
let bool4 = Boolean(""); // false
let bool5 = Boolean(null); // false
let bool6 = Boolean(undefined); // false
let bool7 = Boolean({}); // true，空对象转换为true
let bool8 = Boolean([]); // true，空数组转换为true

7. 常见数据类型的使用

7.1 数字的常见操作

let num = 10;
console.log(num.toString()); // 转换为字符串
console.log(num.toFixed(2)); // 保留两位小数，"10.00"
console.log(Math.round(10.6)); // 四舍五入，11
console.log(Math.floor(10.9)); // 向下取整，10
console.log(Math.ceil(10.1)); // 向上取整，11
console.log(Math.random()); // 生成0-1之间的随机数
console.log(Math.max(1, 2, 3)); // 最大值，3
console.log(Math.min(1, 2, 3)); // 最小值，1

7.2 字符串的常见操作

let str = "Hello JavaScript";
console.log(str.length); // 字符串长度，16
console.log(str.charAt(0)); // 获取指定位置的字符，"H"
console.log(str.substring(0, 5)); // 截取子字符串，"Hello"
console.log(str.slice(6)); // 从指定位置开始截取，"JavaScript"
console.log(str.toUpperCase()); // 转换为大写，"HELLO JAVASCRIPT"
console.log(str.toLowerCase()); // 转换为小写，"hello javascript"
console.log(str.indexOf("JavaScript")); // 查找子字符串位置，6
console.log(str.replace("JavaScript", "World")); // 替换子字符串，"Hello World"
console.log(str.split(" ")); // 分割字符串为数组，["Hello", "JavaScript"]

7.3 数组的常见操作

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 数组长度，5
arr.push(6); // 添加元素到末尾
console.log(arr); // [1, 2, 3, 4, 5, 6]
arr.pop(); // 删除末尾元素
console.log(arr); // [1, 2, 3, 4, 5]
arr.unshift(0); // 添加元素到开头
console.log(arr); // [0, 1, 2, 3, 4, 5]
arr.shift(); // 删除开头元素
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.slice(1, 4)); // 截取数组，[2, 3, 4]
console.log(arr.indexOf(3)); // 查找元素位置，2
console.log(arr.includes(6)); // 检查元素是否存在，false
arr.sort((a, b) => b - a); // 排序（降序）
console.log(arr); // [5, 4, 3, 2, 1]
arr.reverse(); // 反转数组
console.log(arr); // [1, 2, 3, 4, 5]

8. 常见问题解答

Q: null和undefined有什么区别？

A: null表示变量的值为空，是一个赋值；undefined表示变量声明了但没有赋值，是一个未赋值的状态。

Q: 为什么typeof null返回"object"？

A: 这是JavaScript的一个历史遗留问题，null在底层实现中被表示为一个空指针，而typeof运算符检测到空指针时返回"object"。

Q: 如何判断一个变量是否为数组？

A: 可以使用Array.isArray(arr)方法，或者Object.prototype.toString.call(arr) === '[object Array]'。

Q: 基本数据类型和引用数据类型在内存中的存储有什么区别？

A: 基本数据类型直接存储在栈中，引用数据类型的值存储在堆中，栈中存储的是指向堆内存的引用。

9. 练习项目

  1. 创建一个HTML文件，包含以下内容：

    • 一个输入框，用于输入数字
    • 一个按钮
    • JavaScript代码，点击按钮时：
      • 将输入的字符串转换为数字
      • 计算该数字的平方
      • 显示结果

  2. 验证以下数据类型转换的结果：

    • Number("123")
    • Number("123abc")
    • Number(true)
    • String(123)
    • Boolean(0)
    • Boolean("")
    • Boolean({})

10. 小结

  • JavaScript有7种基本数据类型：Number、String、Boolean、undefined、null、Symbol、BigInt
  • JavaScript的引用数据类型包括Object、Array、Function、Date、RegExp等
  • 基本数据类型直接存储值，引用数据类型存储指向值的引用
  • 使用typeof运算符可以检测变量的数据类型
  • JavaScript会自动进行类型转换，也可以手动进行类型转换
  • 基本数据类型和引用数据类型在复制、比较和存储方式上有很大区别

在下一章节中，我们将学习JavaScript运算符的相关知识。

« 上一篇 JavaScript变量 下一篇 » JavaScript运算符
↑