零基础快速入门前端JavaScript四大核心内置对象：Math、Date、String、Array全解析(可用于备赛蓝桥杯Web应用开发)

在 JavaScript 开发中，内置对象是语言原生提供、无需额外引入即可直接使用的核心工具，是实现业务逻辑的基础。
其中Math、Date、String、Array四个对象，覆盖了数值计算、日期处理、文本操作、集合管理四大高频开发场景，是每一个 JS 开发者必须熟练掌握的核心内容。
本文将逐一拆解每个对象的定位、核心特性、高频 API 与使用示例，最后附上汇总速查表，方便学习与查阅。

一、Math 对象：静态数学运算工具

Math 对象是 JavaScript 唯一的数学静态对象，专门用于执行各类数学运算，是数值处理的核心工具。

核心特性

❌ 非构造函数，无法通过 new Math() 实例化 ，所有属性和方法均为静态，必须直接通过Math.属性/方法调用
所有 API 均为无状态的纯函数，输入固定则输出固定，无任何副作用

核心常用常量

|------------------|-----------------------------|---------------|
| 常量 | 说明 | 典型使用场景 |
| Math.PI | 圆周率 π，约等于 3.141592653589793 | 圆周长 / 面积、弧度计算 |
| Math.E | 自然对数的底数，约等于 2.718 | 指数、对数运算 |
| Math.SQRT2 | 2 的平方根，约等于 1.414 | 平方根、几何计算 |

高频 API 与使用示例

取整类方法

复制代码

// 向下取整（舍弃小数，取更小的整数）
Math.floor(3.99)  // 3
Math.floor(-3.1)  // -4

// 向上取整（进一法，取更大的整数）
Math.ceil(3.01)   // 4
Math.ceil(-3.9)   // -3

// 四舍五入
Math.round(3.5)   // 4
Math.round(3.4)   // 3

// 直接截断小数部分（无视正负，仅保留整数位）
Math.trunc(3.999) // 3
Math.trunc(-3.99) // -3

最值与绝对值计算

复制代码

// 取多个数值的最大值/最小值
Math.max(1, 5, 3, 9)  // 9
Math.min(1, 5, 3, 9)  // 1
// 配合展开运算符处理数组
const numArr = [12, 45, 7, 23]
Math.max(...numArr)  // 45

// 绝对值计算
Math.abs(-5)  // 5
Math.abs(5)   // 5

随机数生成

复制代码

// 生成 [0, 1) 之间的随机浮点数
Math.random()

// 封装：生成 [min, max] 区间的随机整数
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min
}
getRandomInt(0, 100) // 0-100之间的随机整数

幂运算与开方

复制代码

// 幂运算：Math.pow(底数, 指数)
Math.pow(2, 3)  // 8 等价于 2**3

// 平方根计算
Math.sqrt(16)   // 4

二、Date 对象：日期时间处理构造函数

Date 对象是 JavaScript 中唯一用于处理日期和时间的内置构造函数，可实现日期的创建、格式化、差值计算、时区转换等全场景功能。

核心特性

✅ 构造函数，必须通过 new Date() 创建实例后使用实例方法；仅静态方法可直接调用
时间基准为1970 年 1 月 1 日 00:00:00 UTC，时间戳为该时间点到目标时间的毫秒数
月份范围为0-11 （0 代表 1 月，11 代表 12 月），星期范围为0-6（0 代表周日，6 代表周六），是新手高频踩坑点
实例默认读取本地时区，同时提供 UTC 时区的专属方法

实例创建的 4 种常用方式

复制代码

// 1. 无参数：创建当前系统时间的实例
const now = new Date()

// 2. 传入毫秒级时间戳
const date1 = new Date(1742803200000) // 2025-03-24 00:00:00

// 3. 传入年月日时分秒（月份0-11）
const date2 = new Date(2026, 2, 24, 10, 30, 0) // 2026年3月24日 10:30:00

// 4. 传入标准日期字符串
const date3 = new Date('2026-03-24 10:30:00')

高频 API 与使用示例

日期信息获取（本地时区）

复制代码

const date = new Date('2026-03-24 10:30:00')
date.getFullYear()  // 2026 4位完整年份
date.getMonth()     // 2 月份（0-11，对应3月）
date.getDate()      // 24 日期（1-31）
date.getDay()       // 2 星期（0周日-6周六，对应周二）
date.getHours()     // 10 小时（0-23）
date.getMinutes()   // 30 分钟（0-59）
date.getSeconds()   // 0 秒（0-59）
date.getTime()      // 1742802600000 毫秒级时间戳

对应 UTC 时区方法：将get替换为getUTC，如getUTCFullYear()、getUTCMonth()

日期信息设置

复制代码

const date = new Date()
date.setFullYear(2027) // 设置年份为2027
date.setMonth(11)      // 设置月份为12月
date.setDate(1)         // 设置日期为1号
// 同理可设置时分秒，对应`setHours/setMinutes/setSeconds`

静态方法

复制代码

// 获取当前时间的时间戳（等价于new Date().getTime()，性能更优）
Date.now()

// 解析日期字符串为时间戳
Date.parse('2026-03-24')

高频场景：日期格式化封装

复制代码

// 通用日期格式化函数，默认格式 YYYY-MM-DD HH:mm:ss
function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  
  return format
    .replace('YYYY', year)
    .replace('MM', month)
    .replace('DD', day)
    .replace('HH', hours)
    .replace('mm', minutes)
    .replace('ss', seconds)
}

formatDate(new Date()) // 示例输出：2026-03-24 10:30:00

三、String 对象：字符串文本处理对象

String 对象是 JavaScript 处理文本内容的核心对象，覆盖字符串截取、查找、替换、格式转换等全场景操作，是文本处理的基础。

核心特性

✅ 构造函数，字符串原始值可自动装箱为 String 对象，因此可直接在字符串字面量上调用原型方法
⚠️ 字符串是不可变的，所有 String 方法都不会修改原字符串，只会返回一个全新的字符串
原生支持 Unicode 编码，可正常处理中文、emoji 等特殊字符

高频 API 与使用示例

字符串截取与字符访问

复制代码

const str = 'Hello JavaScript'

// 按索引获取字符
str.charAt(0)    // 'H'
str[0]           // 'H' 简写方式

// 截取字符串：slice(起始索引, 结束索引) 推荐使用，支持负数索引
str.slice(0, 5)  // 'Hello'
str.slice(6)     // 'JavaScript' 省略结束索引，截取到末尾
str.slice(-10)   // 'JavaScript' 负数索引从末尾倒数

// substring(起始索引, 结束索引) 不支持负数索引
str.substring(0,5) // 'Hello'

查找与包含判断

复制代码

const str = 'Hello JavaScript'

// 判断是否包含指定字符串，返回布尔值
str.includes('Java')  // true
str.includes('java')  // false 严格区分大小写

// 判断是否以指定字符串开头/结尾
str.startsWith('Hello') // true
str.endsWith('pt')      // true

// 获取指定字符串的索引，找不到返回-1
str.indexOf('Java')   // 6
str.lastIndexOf('l')  // 3 最后一次出现的索引

字符串修改与转换

复制代码

const str = '  Hello World  '

// 去除首尾空格
str.trim()       // 'Hello World'
str.trimStart()  // 'Hello World  ' 仅去除开头空格
str.trimEnd()    // '  Hello World' 仅去除结尾空格

// 大小写转换
str.toUpperCase() // '  HELLO WORLD  '
str.toLowerCase() // '  hello world  '

// 内容替换
str.replace('World', 'JavaScript') // '  Hello JavaScript  ' 仅替换第一个匹配项
'aaabbb'.replaceAll('a', 'c')      // 'cccbbb' 替换所有匹配项

// 字符串转数组
'a,b,c,d'.split(',') // ['a','b','c','d'] 按指定分隔符分割
'hello'.split('')    // ['h','e','l','l','o'] 按单个字符分割

拼接与重复

复制代码

// 拼接字符串
'Hello'.concat(' ', 'World') // 'Hello World'

// 重复字符串
'abc'.repeat(3) // 'abcabcabc'

四、Array 对象：数组集合处理对象

Array 对象是 JavaScript 中最常用的集合数据结构，用于存储和处理有序数据集，是前端列表渲染、数据聚合、批量处理的核心工具。

核心特性

✅ 构造函数，支持字面量[]和new Array()两种创建方式，字面量为开发首选
数组是可变的有序集合，元素可以是任意类型（数值、字符串、对象、数组等）
原型方法分为修改原数组 和不修改原数组两类，需重点区分，避免意外副作用
原生支持 ES6 + 大量迭代方法，完美适配函数式编程风格

数组创建的常用方式

复制代码

// 1. 字面量创建（开发首选）
const arr1 = [1, 2, 3, 4]

// 2. 构造函数创建
const arr2 = new Array(1,2,3,4) // [1,2,3,4]
const arr3 = new Array(4)        // [empty ×4] 长度为4的空数组

// 3. 类数组/可迭代对象转数组
Array.from('hello') // ['h','e','l','l','o']
Array.from(document.querySelectorAll('div')) // DOM节点列表转数组

// 4. 固定元素数组创建
Array.of(1,2,3) // [1,2,3]

高频 API 与使用示例

1. 不修改原数组的方法（无副作用，推荐优先使用）

复制代码

const arr = [1, 2, 3, 4, 5]

// 遍历：forEach 无返回值，仅用于遍历执行逻辑
arr.forEach(item => console.log(item))

// 映射：map 遍历并返回新数组，长度与原数组完全一致
arr.map(item => item * 2) // [2,4,6,8,10]

// 筛选：filter 返回符合条件的元素组成的新数组
arr.filter(item => item > 3) // [4,5]

// 查找：find 返回第一个符合条件的元素，找不到返回undefined
arr.find(item => item === 3) // 3

// 查找索引：findIndex 返回第一个符合条件的元素索引，找不到返回-1
arr.findIndex(item => item === 3) // 2

// 全量判断：every 所有元素符合条件返回true，否则返回false
arr.every(item => item > 0) // true

// 存在判断：some 只要有一个元素符合条件就返回true
arr.some(item => item > 4) // true

// 截取：slice(起始索引, 结束索引) 与String.slice用法完全一致
arr.slice(1,3) // [2,3]
arr.slice(-2)  // [4,5]

// 拼接：concat 合并多个数组，返回新数组
arr.concat([6,7]) // [1,2,3,4,5,6,7]

// 数组转字符串：join
arr.join('-') // '1-2-3-4-5'
arr.join('')  // '12345'

// 数据聚合：reduce 累计处理数组元素，返回最终聚合结果
// 数组求和
arr.reduce((sum, current) => sum + current, 0) // 15
// 数组求最大值
arr.reduce((max, current) => current > max ? current : max, arr[0]) //5

2. 修改原数组的方法（有副作用，谨慎使用）

复制代码

const arr = [1,2,3]

// 尾部添加/删除
arr.push(4) // 数组变为 [1,2,3,4]，返回新长度4
arr.pop()   // 数组变为 [1,2,3]，返回被删除的元素4

// 头部添加/删除
arr.unshift(0) // 数组变为 [0,1,2,3]，返回新长度4
arr.shift()    // 数组变为 [1,2,3]，返回被删除的元素0

// 万能操作：splice(起始索引, 删除个数, 新增元素1, 新增元素2...)
// 可同时实现删除、插入、替换操作
const arr2 = [1,2,3,4,5]
arr2.splice(2, 1) // 从索引2删除1个元素，数组变为 [1,2,4,5]
arr2.splice(2, 0, 3) // 从索引2插入3，数组变回 [1,2,3,4,5]
arr2.splice(2, 2, 'a', 'b') // 从索引2删除2个，插入2个元素，数组变为 [1,2,'a','b',5]

// 排序：sort 注意默认按Unicode编码排序，数字排序必须传入回调
const numArr = [10, 2, 22, 1]
numArr.sort() // 默认排序结果：[1, 10, 2, 22] ❌
numArr.sort((a, b) => a - b) // 升序 [1,2,10,22] ✅
numArr.sort((a, b) => b - a) // 降序 [22,10,2,1] ✅

// 反转数组
arr.reverse() // [3,2,1]

// 数组填充
new Array(3).fill(0) // [0,0,0]

3. 常用静态与进阶方法

复制代码

// 判断是否为数组（解决typeof [] === 'object'的判断缺陷）
Array.isArray([1,2,3]) // true
Array.isArray('123')    // false

// 数组扁平化
[1, [2, [3, 4]]].flat(2) // [1,2,3,4] flat(扁平化深度)，默认1层

// 遍历+扁平化二合一
[1,2,3].flatMap(item => [item, item*2]) // [1,2,2,4,3,6]

四大内置对象核心信息汇总表

为了方便快速查阅与记忆，整理核心信息汇总表如下：

|------------|----------|------------|-----------------------------------------|---------------------------------|-------------------------------------------------------------|
| 内置对象 | 核心定位 | 是否为构造函数 | 核心特性 | 高频使用场景 | 核心高频 API 速记 |
| Math | 数学运算静态工具 | ❌ 否（不可实例化） | 全静态 API，无状态纯函数，无副作用 | 数值取整、随机数生成、最值计算、数学公式运算 | floor/ceil/round/random/max/min/abs/PI |
| Date | 日期时间处理 | ✅ 是（必须实例化） | 基于 1970 年 UTC 时间戳，月份 0-11，区分本地 / UTC 时区 | 日期格式化、时间差计算、倒计时、时区转换 | getFullYear/getMonth/getDate/getTime/now()/setFullYear |
| String | 字符串文本处理 | ✅ 是（自动装箱） | 字符串不可变，所有方法返回新字符串，无副作用 | 文本截取、查找替换、大小写转换、格式校验、字符串 - 数组转换 | slice/includes/indexOf/replace/trim/split/toUpperCase |
| Array | 数组集合处理 | ✅ 是 | 有序可变集合，方法分「修改原数组 / 不修改原数组」两类 | 列表数据处理、遍历筛选、排序、数据聚合、前端列表渲染 | map/filter/reduce/splice/slice/push/pop/forEach/find/flat |

总结

Math、Date、String、Array 四个内置对象，覆盖了 JavaScript 开发中 90% 以上的基础数据处理场景。

对于 Math 对象，重点掌握取整、随机数、最值三类高频操作；
对于 Date 对象，重点掌握日期创建、信息获取、格式化，避开月份从 0 开始的经典坑点；
对于 String 对象，牢记字符串不可变的核心特性，熟练使用截取、查找、替换、分割四大类操作；
对于 Array 对象，优先使用无副作用的非修改类方法，熟练掌握 map、filter、reduce 三大函数式编程核心方法，是提升前端开发效率的关键。