零基础快速入门前端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.SQRT22 的平方根约等于 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-110 代表 1 月11 代表 12 月星期范围为0-60 代表周日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]) //52. 修改原数组的方法有副作用谨慎使用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/PIDate日期时间处理✅ 是必须实例化基于 1970 年 UTC 时间戳月份 0-11区分本地 / UTC 时区日期格式化、时间差计算、倒计时、时区转换getFullYear/getMonth/getDate/getTime/now()/setFullYearString字符串文本处理✅ 是自动装箱字符串不可变所有方法返回新字符串无副作用文本截取、查找替换、大小写转换、格式校验、字符串 - 数组转换slice/includes/indexOf/replace/trim/split/toUpperCaseArray数组集合处理✅ 是有序可变集合方法分「修改原数组 / 不修改原数组」两类列表数据处理、遍历筛选、排序、数据聚合、前端列表渲染map/filter/reduce/splice/slice/push/pop/forEach/find/flat总结Math、Date、String、Array 四个内置对象覆盖了 JavaScript 开发中 90% 以上的基础数据处理场景。对于 Math 对象重点掌握取整、随机数、最值三类高频操作对于 Date 对象重点掌握日期创建、信息获取、格式化避开月份从 0 开始的经典坑点对于 String 对象牢记字符串不可变的核心特性熟练使用截取、查找、替换、分割四大类操作对于 Array 对象优先使用无副作用的非修改类方法熟练掌握 map、filter、reduce 三大函数式编程核心方法是提升前端开发效率的关键。