JavaScript中的数据类型

原始数据类型：String、Number、Boolean、Null、Undefiend、Symbol、BigInt

引用数据类型：Array、Function、Object、RegExp、Date

原始数据类型

原始数据类型的值是不可变的，一旦创建就不能直接修改其内容。当对原始类型的变量进行赋值或者传递时，是按值传递，会复制一份独立的数据。

String：具有不可变性，对字符串进行操作时，实际返回的是新的字符串。例如，对字符串调用.toUpperCase()不会改变原字符串，而是返回一个新的字符串。

内置方法：

testString = "Hello World"
// 返回指定索引的字符串
console.log(testString.charAt(4)); // o
// 返回指定索引处字符的 Unicode 编码值
console.log(testString.charCodeAt(4)); // 111
// 将多个字符串拼接到当前字符串的末尾
console.log(testString.concat(" 111","www")); // Hello World 111www
// 提取字符串的一部分，返回一个新字符串
console.log(testString.slice(1,2)); // e
// 提取字符串的一部分，与 slice 类似，但不接受负值
console.log(testString.substring(1,2)); // e
// 根据分隔符将字符串拆分为数组
console.log(testString.split(""));// ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']
// 将字符串转换为大写
console.log(testString.toUpperCase()); // HELLO WORLD
// 将字符串转换为小写
console.log(testString.toLowerCase()); // hello world
// indexOf(searchValue, fromIndex) 返回指定值首次出现的索引，未找到时返回 -1
console.log(testString.indexOf("o")); // 4
// lastIndexOf(searchValue, fromIndex)：返回指定值最后一次出现的索引，未找到时返回 -1
console.log(testString.lastIndexOf("l")); //9 
// 检查字符串是否包含指定值
console.log(testString.includes("o")); // true
// 检查字符串是否以指定值开头
console.log(testString.startsWith("H")); // true
// 检查字符串是否以指定值结尾
console.log(testString.endsWith("d")); // true
// replace(searchValue, replaceValue)：替换字符串中的第一个指定值
console.log(testString.replace("l","X")); // HeXlo World
// 替换字符串中所有匹配的值
console.log(testString.replaceAll("l","X")); // HeXXo WorXd
// 移除字符串两端的空白字符 (另有trimStart()、trimEnd())
console.log(testString.trim()); // Hello World
// 返回字符串的长度
console.log(testString.length); // 11
// 返回字符串本身
console.log(testString.toString()); // Hello World

Number：用于表示整数和浮点数，所有数字在 JavaScript 中均为 IEEE 754 双精度浮点数。

特殊值：NaN表示Not a Number，常出现在非法数学运算中。Infinity 和-Infinity表示无穷大无穷小。
Boolean： 只有两个值，true和false，通常用于逻辑判断和条件控制。
Undefined： 表示变量已声明但未赋值的状态，或者函数没有显式返回值，返回的也是undefined。
Null： 表示无值或者空的状态，是特殊的原始值。

注意：typeof null 返回 "object"，这是 JavaScript 语言设计中的一个历史遗留问题。
Symbol： ES6引入的新数据类型，用于生成独一无二的标识符，常用于对象属性的键，避免命名冲突。

每个Symbol值都是唯一且不可变的，不能自动转换为字符串，但是可以显式转换、通过description属性获取描述信息。
1
2
3
4
5
6
7
8
const sym1 = Symbol("an") const sym2 = Symbol("an") console.log(sym1===sym2); // false const obj = { [sym1]: 1 } console.log(obj[sym1]); // 1
BigInt：表示任意精度的整数，解决了 Number 类型在表示大整数时精度丢失的问题。

可以表示超出 Number.MAX_SAFE_INTEGER（即 2^53 - 1）的整数。

使用 n 后缀或 BigInt() 构造函数来创建 BigInt 类型的数值。
1
2
3
const big1 = 2423526443272357524n const big2 = BigInt("2423526443272357524") console.log(big1===big2); // true

引用数据类型

普通对象 Object：最基本的数据结构，用键值对的形式存储数据。

键（属性名）通常为字符串、Symbol。

属性可以动态添加、修改、删除。

属性可以通过点语法或者中括号访问。
1
2
3
4
5
const person = { name: "anan", age: 18 } console.log(person.name); // anan

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

内置方法：

const arr = [1,2,3]
// ==============  遍历  ==============
// 遍历数组  forEach
arr.forEach((item,index)=>{
    console.log(item,index);
})
// 遍历数组  for...of
for (let item of arr){
    console.log(item);
}
// 遍历数组的索引  for...in 
for (let index in arr){
    console.log(arr[index]);
}

// ==============  增删改  ==============
// 数组末尾添加一个或多个元素,返回新数组的长度
arr.push(4) 
console.log(arr); // [1, 2, 3, 4]
// 数组末尾移除一个元素，返回被移除的元素
arr.pop()
console.log(arr); // [1, 2, 3]
// 数组开头移除一个元素，返回被移除的元素
arr.shift()
console.log(arr); // [2, 3]
// 数组开头添加一个或多个元素，返回新数组的长度
arr.unshift(1)
console.log(arr); // [1,2, 3]
// 从指定位置开始删除或添加元素
// array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
// 移除元素：移除从索引1开始的两个元素
arr.splice(1,2) 
console.log(arr); // [1]
// 添加元素：在索引1处添加一个元素2
arr.splice(1,0,2)
console.log(arr); // [1, 2]
// 替换元素：从索引1开始移除一个元素并插入7
arr.splice(1,1,7)
console.log(arr); // [1, 7]
// 使用负数作为 start 参数：
arr.splice(-1,1,2,3)
console.log(arr); // [1, 2, 3]

// ==============  查找和搜索  ==============
// indexOf(searchElement, fromIndex) 
// 返回指定元素首次出现的索引，未找到时返回 -1
console.log(arr.indexOf(2) ); // 1
// lastIndexOf(searchElement, fromIndex)
// 返回指定元素最后一次出现的索引，未找到时返回 -1
console.log(arr.lastIndexOf(2)); // 1
// find(callback)
// 返回数组中第一个满足条件的元素，未找到时返回 undefined
console.log(arr.find(item=>item===2)); // 2
// findIndex(callback)
// 返回数组中第一个满足条件的元素的索引，未找到时返回 -1
console.log(arr.findIndex(item=>item===4)); // -1
// includes(value)
// 检查数组是否包含指定值，返回布尔值。
console.log(arr.includes(2)); // true

// ==============  转换和映射  ==============
// map(callback)
// 对数组的每个元素执行回调函数，返回一个新数组，包含每次回调的结果。
console.log(arr.map(item=>item+1)); // [2, 3, 4]
// 返回一个新数组，包含所有满足条件的元素。
console.log(arr.filter(item=>item===2)); //[2]
// 对数组的每个元素执行回调函数，将结果累积为一个值。另有reduceRight，从右累积
console.log(arr.reduce((sum,cur)=>sum+cur,0)); // 6
// 返回数组的一个浅拷贝，包含从 start 到 end（不包括 end）的元素。
console.log(arr.slice(1,2)); // [2]
// 合并多个数组，返回一个新数组
console.log(arr.concat([4,5])); // [1, 2, 3, 4, 5]

// ==============  数组排序  ============== 
// sort(compareFunction)
const newArr = [5,2,4,3,1]
// 默认按字符串顺序排序，可以通过传入比较函数实现自定义排序。
console.log(newArr.sort()); // [1, 2, 3, 4, 5]
let a1 = newArr.sort((a,b)=>a-b); // 升序排序，返回 [1, 2, 3]
let a2 = newArr.sort((a,b)=>b-a); // 降序排序，返回 [5, 4, 3, 2, 1]
// 直接修改原数组
console.log('地址一致吗？',a1 === a2); // 地址一致吗？ true

// ==============  数组检查和验证  ==============
// every(callback) 检查数组中的每个元素是否都满足条件，返回布尔值。
console.log(newArr.every(item=>item>0)); // true
// some(callback) 检查数组中是否有至少一个元素满足条件，返回布尔值
console.log(newArr.some(item=>item>0)); // true

// ==============  数组的解构和拷贝  ==============
// Array.from(arrayLike) 将类数组对象（如字符串、NodeList 等）转换为数组。
console.log(Array.from('hello')); // ['h', 'e', 'l', 'l', 'o']
// Array.isArray(value) 检查一个值是否为数组，返回布尔值
console.log(Array.isArray('hello')); // false

函数 Function：本质上也是对象，可以存储代码块并在需要时执行。

可以赋值给变量、作为参数传递给其他函数、甚至从函数中返回。

具有属性和方法（例如 .call()、.apply()）。

支持闭包，即内部函数可以访问外部函数的变量。
1
2
3
4
function greet(name){ console.log(`Hello World,${name}`); } greet("anan") // Hello World,anan

日期对象 Date

可以获取当前时间、进行时间计算、格式化日期等操作。

通过 new Date() 创建实例，并提供多种格式的构造方法。

// ============= 日期对象创建 ===============
// 创建当前日期和时间
const now = new Date()
console.log(now); // Sat Feb 15 2025 16:13:03 GMT+0800 (中国标准时间)
// 创建特定日期和时间 月份从0开始!!!
const spe_date = new Date(2025,1,25,10,35,24)
console.log(spe_date);// Tue Feb 25 2025 10:35:24 GMT+0800 (中国标准时间)
// 使用时间戳（自1970年1月1日以来的毫秒数）
const time_stamp = new Date(1696070400000)
console.log(time_stamp); // Sat Sep 30 2023 18:40:00 GMT+0800 (中国标准时间)
// 使用日期字符串
const date_string = new Date("2025-02-25T10:35:24")
console.log(date_string); // Tue Feb 25 2025 10:35:24 GMT+0800 (中国标准时间)

// ============= 获取具体日期和时间 ===============
const now_time = new Date()
console.log(now_time.getFullYear()); // 年
console.log(now_time.getMonth()+1); // 月
console.log(now_time.getDate());// 日
console.log(now_time.getHours());// 时
console.log(now_time.getMinutes());// 分
console.log(now_time.getSeconds());// 秒
console.log(now_time.getMilliseconds()); // 毫秒,范围在 0 到 999 
console.log(now_time.getDay());// 星期

// ============= 时间戳操作 ===============
const now_time_stamp = new Date()
// getTime 返回自1970年1月1日以来的毫秒数
console.log(now_time_stamp.getTime()); // 1739607954915 
console.log(now_time_stamp.setTime(1696684800000)); // 1696684800000

// ============= 日期格式化 ===============
// 本身没有内置的格式化方法
// 但可以通过手动拼接
// 或使用第三方库（如 moment.js 或 date-fns）来实现。
function formDate(date){
    const year =date.getFullYear()
    const month =date.getMonth()+1
    const day =date.getDate()
    return `${year}-${month}-${day}`
}
console.log(formDate(new Date())); // 2025-2-15

正则表达式 RegExp：用于模式匹配字符串。

支持各种模式和修饰符（如 g 全局匹配、i 忽略大小写）。

可用于查找、替换和验证字符串格式。

字面量语法
const regex = /pattern/flags

pattern：正则表达式的模式，用于定义匹配规则。

flags：可选的标志，用于修改匹配行为
构造函数语法

const regex = new RegExp(“pattern”, “flags”);

常见的模式

.：匹配任意单个字符（默认不包括换行符）。

\d：匹配任意数字（0-9）。

\w：匹配任意字母、数字或下划线（等价于 [a-zA-Z0-9_]）。

\s：匹配任意空白字符（空格、制表符、换行符等）。

[abc]：匹配方括号中的任意一个字符。

[^abc]：匹配不在方括号中的任意字符。

^：匹配字符串的开头。

$：匹配字符串的结尾。

\b：匹配单词边界。

\B：匹配非单词边界。

*：匹配前面的字符 0 次或多次。

+：匹配前面的字符 1 次或多次。

?：匹配前面的字符 0 次或 1 次。

{n}：匹配前面的字符恰好 n 次。

{n, m}：匹配前面的字符至少 n 次，最多 m 次。

()：分组，捕获匹配的内容。

|：表示逻辑“或”，用于匹配多个选项中的任意一个。

常见的标志

g：全局匹配（匹配所有可能的结果）。

i：忽略大小写。

m：多行模式（允许 ^ 和 $ 匹配每一行的开头和结尾）。

s：单行模式（允许 . 匹配换行符）。

u：Unicode 模式（支持 Unicode 字符）。

y：粘性匹配（从上次匹配的位置开始匹配）

常用的方法

const regex1 = /abc/
// ============ test 是否有匹配的
console.log(regex1.test('wwwabcde')); // true
console.log(regex1.test('a0b0ccc')); // false
// ============ exec 执行匹配，返回匹配结果数组或 null
const regex2 = /(\d+)/;
res = regex2.exec('a123b233c3d4');
if (res){
    console.log(res[0]); //完整匹配： "123"
    console.log(res[1]); //第一个捕获组： "123"
    console.log(res.index); // 匹配的起始位置 1
    console.log(res.input); // 原始字符串 a123b233c3d4
}
// ============ 返回匹配结果数组，包含所有匹配的内容
const regex3 = /(\d+)/g; // 全局匹配
res = "a123b233c3d4".match(regex3);
console.log(res);// ['123', '233', '3', '4']
// ============ 返回一个迭代器，包含所有匹配的结果数组。
res = "a123b233c3d4".matchAll(regex3);
console.log(res); // RegExpStringIterator
for (let match of res){
    console.log(match);
    // ['123', '123', index: 1, input: 'a123b233c3d4', groups: undefined]
    // ['233', '233', index: 5, input: 'a123b233c3d4', groups: undefined]
    // ['3', '3', index: 9, input: 'a123b233c3d4', groups: undefined]
    // ['4', '4', index: 11, input: 'a123b233c3d4', groups: undefined]
}
// ============ 返回匹配内容的索引，未找到时返回 -1
res = "a123b233c3d4".search(regex3);
console.log(res); // 1

// 还可以使用正则表达式替换字符串、拆分字符串。

错误对象 Error： 用于表示程序运行时发生的错误，帮助开发者进行调试和异常处理。

包含错误信息、错误名称和堆栈信息。

可通过 throw 关键字抛出，并使用 try...catch 进行捕获和处理。
1
2
3
4
5
6
try { // 手动抛出一个异常 throw new Error("Something went wrong!"); } catch (e) { console.error(e.name + ": " + e.message); // "Error: Something went wrong!" }

JavaScript

#数组 #七大原始数据类型 #函数 #正则对象 #日期对象

进一步讨论数据类型上一篇

css绘制场景应用下一篇