JS内置对象完全指南:Math、Date、包装类与字符串方法详解

发布时间:2026/7/27 19:36:29

JS内置对象完全指南:Math、Date、包装类与字符串方法详解
前言本文是JavaScript基础系列的第九篇系统讲解JS中常用的内置对象。内容包括Math对象数学运算、Date对象日期时间、包装类基本类型与对象的转换机制以及字符串的常用方法。掌握这些内容你就能熟练运用JS自带的工具集高效开发。一、内置对象概述1.1 什么是内置对象JS中的对象分为三种对象类型说明示例自定义对象​开发者自己创建的对象{ name: jack }内置对象​JS语言自带的对象Math、Date、Array、String等浏览器对象​浏览器提供的对象不属于ECMAScriptwindow、document、location内置对象就是指JS语言自带的一些对象这些对象供开发者使用并提供一些常用的或是最基本而必要的功能属性和方法。程序员不用管具体怎么实现直接使用就可以了帮助我们快速开发。1.2 常用内置对象Object、Function、Array、Math、Date、String、Boolean、Number、RegExp1.3 查阅文档的方法MDN文档是最好的学习资源MDN JavaScript 参考查阅文档三步走查看该方法的功能查看里面参数的意义和类型查看返回值的意义和类型通过demo进行测试二、Math对象2.1 基本概念Math是一个工具类不是构造函数无需创建对象实例直接使用其封装好的数学运算属性和方法2.2 常用属性和方法属性Math.PI; // 圆周率 ≈ 3.14159方法方法说明示例结果Math.abs(x)计算绝对值Math.abs(-5)5Math.ceil(x)向上取整Math.ceil(4.1)5Math.floor(x)向下取整Math.floor(4.9)4Math.round(x)四舍五入取整Math.round(4.5)5Math.random()生成[0,1)随机数Math.random()0.xxxMath.max(x,y,...)获取最大值Math.max(1,5,3)5Math.min(x,y,...)获取最小值Math.min(1,5,3)1Math.pow(x,y)返回x的y次幂Math.pow(2,3)8Math.sqrt(x)开方运算Math.sqrt(9)32.3 随机数应用公式// 生成0-x之间的随机整数四舍五入 Math.round(Math.random() * x); // 生成0-x之间的随机整数向下取整 Math.floor(Math.random() * (x 1)); // 生成x-y之间的随机整数四舍五入 Math.round(Math.random() * (y - x) x); // 生成x-y之间的随机整数向下取整★ 推荐 Math.floor(Math.random() * (y - x 1) x);2.4 实战案例猜数字游戏let trueNum Math.floor(Math.random() * 100 1); let num prompt(请输入数字); while (true) { if (trueNum num) { alert(大了); num prompt(请输入数字); } else if (trueNum num) { alert(小了); num prompt(请输入数字); } else { alert(恭喜你猜对了); break; } }三、Date对象3.1 基本概念在JS中使用Date来处理日期和时间。它是一个构造函数所以必须要实例化后才能使用。3.2 创建Date对象// 当前时间 let date new Date(); // 指定时间字符串格式 let d1 new Date(2025-11-15); let d2 new Date(2025/11/15 12:00:00); // 指定时间数字格式月份需-1 let d3 new Date(2025, 10, 15); // 实际为2025年11月15日注意数字格式中月份从0开始0代表1月10代表11月。3.3 实例方法方法说明返回值范围getDate()获取日期1-31getDay()获取周几0-60代表周日getMonth()获取月份0-110代表1月getFullYear()获取完整年份四位数字getHours()获取小时0-23getMinutes()获取分钟0-59getSeconds()获取秒数0-59getTime()获取时间戳毫秒数长整数3.4 时间戳及其四种获取方式时间戳从格林威治标准时间的1970年1月1日0时0分0秒到当前日期所花费的毫秒数。// 四种获取时间戳的方式 let t1 new Date().getTime(); let t2 new Date().valueOf(); let t3 new Date(); // 利用一元运算符 let t4 Date.now(); // ★ 推荐最简洁3.5 性能测试应用let start Date.now(); // 执行需要测试的代码... for (let i 0; i 1000000; i) { /* 耗时操作 */ } let end Date.now(); console.log(执行了 (end - start) 毫秒);3.6 实战案例倒计时函数function countDown(time) { let nt new Date(); // 当前时间戳 let ft new Date(time); // 目标时间戳 let ct ft - nt; // 差值毫秒 ct ct / 1000; // 转换为秒 // 计算天、时、分、秒 let date parseInt(ct / 60 / 60 / 24); let hour parseInt((ct / 60 / 60) % 24); let min parseInt((ct / 60) % 60); let sec parseInt(ct % 60); return 剩余时间${date}天${hour}小时${min}分钟${sec}秒; } console.log(countDown(2026-01-01));四、包装类4.1 基本概念JS中的数据类型分为两大类类型说明示例基本数据类型​存储在栈内存中String、Number、Boolean、Null、Undefined引用数据类型​存储在堆内存中Object、Array、Function等包装类将基本数据类型转换为对应的对象类型。String(); // 将字符串基本类型转换为String对象 Number(); // 将数字基本类型转换为Number对象 Boolean(); // 将布尔值基本类型转换为Boolean对象4.2 注意事项实际开发中很少使用基本数据类型的对象使用基本数据类型对象进行比较时可能产生不可预估的结果let str1 new String(hello); let str2 new String(hello); console.log(str1 str2); // false两个不同的对象4.3 底层机制let str hello; // 基本数据类型 console.log(str.length); // 底层临时使用String包装类转换为对象执行过程临时转换为String对象读取length属性转换回基本数据类型重要方法和属性只能添加给对象不能添加给基本数据类型。当我们对一些基本数据类型的值去调用属性和方法时浏览器会临时使用包装类将其转换为对象然后再调用对象的属性和方法调用完以后再将其转换为基本数据类型。五、字符串方法5.1 字符串存储特点字符串底层以字符数组形式保存let str hello; // 底层存储[h, e, l, l, o]5.2 常用方法汇总1length属性let str hello; str.length; // 52charAt() 和 str[]str.charAt(0); // h str[0]; // hES6特性更推荐3concat() — 连接字符串let str hello; str.concat( , world); // hello world // 作用和一样但更常用4indexOf() — 查找首次出现位置let str hello world; str.indexOf(o); // 4首次出现位置 str.indexOf(o, 5); // 7从索引5开始查找 str.indexOf(z); // -1找不到5lastIndexOf() — 从后往前查找str.lastIndexOf(o); // 7从后往前找6includes() — 判断是否包含str.includes(hello); // true str.includes(xyz); // false7slice() — 截取字符串支持负数let str hello; str.slice(0, 3); // hel不包含结束位置 str.slice(0, -1); // hell负数从后计算 str.slice(2); // llo省略第二个参数截取到最后8substring() — 截取字符串不支持负数str.substring(0, 3); // hel str.substring(3, 0); // hel自动交换参数位置 str.substring(-1, 3); // hel负数视为09substr() — 截取字符串指定长度str.substr(0, 3); // hel从索引0开始截取3个三种截取方法对比方法参数支持负数特点slice(start, end)开始索引结束索引✅最常用推荐substring(start, end)开始索引结束索引❌自动交换参数substr(start, length)开始索引截取长度❌已废弃不推荐10split() — 拆分为数组let str red,orange,yellow; str.split(,); // [red, orange, yellow] str.split(); // [r, e, d, ,, o, ...]11replace() — 替换字符let str hello world; str.replace(world, JavaScript); // hello JavaScript // 注意只替换第一个匹配项12toUpperCase() / toLowerCase()let str Hello World; str.toUpperCase(); // HELLO WORLD str.toLowerCase(); // hello world5.3 方法速查表方法功能返回值length获取字符串长度数字charAt(index)获取指定位置字符字符str[index]获取指定位置字符ES6字符concat(str)连接字符串新字符串indexOf(search)查找首次出现位置索引或-1lastIndexOf(search)从后往前查找索引或-1includes(search)判断是否包含true/falseslice(start, end)截取字符串新字符串substring(start, end)截取字符串新字符串substr(start, length)截取字符串新字符串split(separator)拆分为数组数组replace(old, new)替换字符新字符串toUpperCase()转换为大写新字符串toLowerCase()转换为小写新字符串总结本文系统梳理了JavaScript中常用的内置对象主题核心要点Math对象​工具类无需实例化提供数学运算方法Date对象​构造函数处理日期时间时间戳的四种获取方式包装类​基本类型临时转换为对象调用属性和方法后再转回字符串方法​截取、查找、替换、转换、拆分等常用操作掌握这些内置对象你就能在日常开发中得心应手地处理各种常见任务。

相关新闻

三分钟掌握Pixelle-Video:AI短视频创作工作流配置终极指南

三分钟掌握Pixelle-Video:AI短视频创作工作流配置终极指南

2026/7/27 19:36:29

三分钟掌握Pixelle-Video:AI短视频创作工作流配置终极指南 【免费下载链接】Pixelle-Video 🚀 AI 全自动短视频引擎 | AI Fully Automated Short Video Engine 项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video 你是否曾经为制作…

WebDeck终极指南:浏览器变身专业控制台,零成本打造你的数字工作站

WebDeck终极指南:浏览器变身专业控制台,零成本打造你的数字工作站

2026/7/27 19:26:28

WebDeck终极指南:浏览器变身专业控制台,零成本打造你的数字工作站 【免费下载链接】WebDeck The free stream deck alternative 项目地址: https://gitcode.com/gh_mirrors/we/WebDeck 你是否曾经羡慕那些专业主播和内容创作者使用的Elgato Strea…

如何快速掌握Superpowers智能开发助手:5个实用技巧提升AI编程效率

如何快速掌握Superpowers智能开发助手:5个实用技巧提升AI编程效率

2026/7/27 19:26:28

如何快速掌握Superpowers智能开发助手:5个实用技巧提升AI编程效率 【免费下载链接】superpowers An agentic skills framework & software development methodology that works. 项目地址: https://gitcode.com/GitHub_Trending/su/superpowers Superpow…

如何用 AI 漫剧做硬核科普?把枯燥的量子力学变成热血格斗漫画

如何用 AI 漫剧做硬核科普?把枯燥的量子力学变成热血格斗漫画

2026/7/27 20:46:32

硬核科普内容往往面临“概念抽象、受众看不懂”的痛点。如果能将枯燥的量子力学拟人化,变成类似《龙珠》或《刃牙》的热血格斗漫画——例如将“波粒二象性”设计为主角的瞬移与实体化双重形态,科普门槛将降维打击。然而,个人创作者很难既精通…

Norish高级部署指南:Docker容器化与服务器性能优化最佳实践

Norish高级部署指南:Docker容器化与服务器性能优化最佳实践

2026/7/27 20:46:32

Norish高级部署指南:Docker容器化与服务器性能优化最佳实践 【免费下载链接】norish Norish - A realtime, self-hosted recipe app for families & friends 项目地址: https://gitcode.com/gh_mirrors/no/norish Norish是一款面向家庭和朋友的实时自托…

OpenMLOps参数配置详解:JupyterHub多用户环境与资源分配最佳实践

OpenMLOps参数配置详解:JupyterHub多用户环境与资源分配最佳实践

2026/7/27 20:46:32

OpenMLOps参数配置详解:JupyterHub多用户环境与资源分配最佳实践 【免费下载链接】OpenMLOps 项目地址: https://gitcode.com/gh_mirrors/op/OpenMLOps OpenMLOps是一个功能强大的开源MLOps平台,其中JupyterHub作为多用户环境的核心组件&#xf…

AI监管与版权合规:生成内容标识、数据来源与模型备案实务指南

AI监管与版权合规:生成内容标识、数据来源与模型备案实务指南

2026/7/27 20:46:32

2023年以来,全球主要经济体密集出台AIGC监管政策。欧盟AI法案明确要求生成式AI内容必须可识别;我国网信办发布的《生成式AI管理办法》同样规定,生成内容应当体现标识。标识不仅是合规要求,更是建立用户信任的基础。随着AI生成内容…

AI搜索入口:传统搜索被AI助手冲击的深度解析

AI搜索入口:传统搜索被AI助手冲击的深度解析

2026/7/27 20:46:32

AI搜索入口的崛起与变局搜索行为正在经历根本性转变。用户在搜索框中输入问题,期望获得的不再是链接列表,而是直接答案。这一变化源于大语言模型技术的成熟,AI助手、研究助手、答案引擎等新型搜索入口正在分流传统搜索引擎的用户。据行业观察…

AI写作的5个破绽与优化技巧

AI写作的5个破绽与优化技巧

2026/7/27 20:36:31

1. 为什么AI写作容易"露馅"? 去年帮朋友审阅一篇技术文章时,第一段就让我皱起了眉头。不是内容有问题,而是字里行间透着股"机器味"——那些"随着科技发展"、"本文将探讨"的套路句式,活像…

[具身智能-649]:个人电脑搭建 RTSP 服务完整方案(Windows / Ubuntu 双平台,适配 RDK X5 rtsp2display 调试)

[具身智能-649]:个人电脑搭建 RTSP 服务完整方案(Windows / Ubuntu 双平台,适配 RDK X5 rtsp2display 调试)

2026/7/27 8:45:59

目标:电脑作为RTSP 服务端,循环推送 H264/H265 视频流; RDK X5 通过 rtsp2display 拉流预览,完全不需要在开发板编译 live555。 提供两套成熟方案: ✅ 方案 A:FFmpeg(最简单,优先推…

PDF合并与动态水印的工程化方案:2026国内免费工具实测对比

PDF合并与动态水印的工程化方案:2026国内免费工具实测对比

2026/7/27 8:42:17

一、背景与测试方案 在实际项目交付中,PDF文件合并与版权保护水印的叠加是一个高频但容易被低估的技术需求。典型的处理链路涉及:多源PDF的文件流合并、页面级水印渲染(含透明度混合与图层叠加)、输出文件体积控制。看似简单的操作…

PDF拆分压完图糊了?2026国内免费实测,档案员都在用的组合方案

PDF拆分压完图糊了?2026国内免费实测,档案员都在用的组合方案

2026/7/27 14:56:57

说实话,提到PDF拆分再压缩,我真是被折腾得够呛。 上个月公司年度合同归档,一份300多页的PDF总合同,需要按年份拆分成三个独立文件,再分别压缩到10MB以内方便邮件发送各部门确认。我心想这还不简单?先找个海…

多模态 AI 前端工程——图像上传、压缩与流式返回的协同设计

多模态 AI 前端工程——图像上传、压缩与流式返回的协同设计

2026/7/27 0:05:04

多模态 AI 前端工程——图像上传、压缩与流式返回的协同设计 一、多模态对话的「首字节延迟」:上传与流式的协同鸿沟 多模态 AI 应用的前端体验,往往卡在"首字节延迟"上。用户上传一张图片,提一个问题,然后盯着空白对…

【微科普】网红水晶香薰真相拆解:透明固体香薰并非香精结晶,一文理清各类无火香薰释香机理

【微科普】网红水晶香薰真相拆解:透明固体香薰并非香精结晶,一文理清各类无火香薰释香机理

2026/7/27 0:05:04

文章目录第一章 大众普遍存在的认知误区:水晶香薰是芳香烃结晶产物1.1 聚丙烯酸钠凝胶水晶珠体系(市面占比90%家用水晶香薰)1.2 无机盐硬质结晶载体:泻盐与钾明矾香薰原石1.3 植物多糖与PVA整块果冻型水晶香膏1.4 唯一特例&#x…

优启通3.7修改版:深度优化的PE系统维护工具

优启通3.7修改版:深度优化的PE系统维护工具

2026/7/27 0:05:04

1. 项目概述今天要跟大家分享的是一个经过深度优化的PE工具——优启通3.7(2025修改版)。这个版本是在原版基础上进行了大量功能增强和兼容性改进的12月最新版本,特别适合系统维护人员和电脑爱好者使用。作为一个长期从事IT运维的老兵&#xf…