news 2026/7/27 19:36:18

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JS内置对象完全指南:Math、Date、包装类与字符串方法详解

前言

本文是JavaScript基础系列的第九篇,系统讲解JS中常用的内置对象。内容包括Math对象(数学运算)、Date对象(日期时间)、包装类(基本类型与对象的转换机制)以及字符串的常用方法。掌握这些内容,你就能熟练运用JS自带的工具集高效开发。


一、内置对象概述

1.1 什么是内置对象

JS中的对象分为三种:

对象类型

说明

示例

自定义对象

开发者自己创建的对象

{ name: "jack" }

内置对象

JS语言自带的对象

Math、Date、Array、String等

浏览器对象

浏览器提供的对象(不属于ECMAScript)

window、document、location

内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供一些常用的或是最基本而必要的功能(属性和方法)。程序员不用管具体怎么实现,直接使用就可以了,帮助我们快速开发。

1.2 常用内置对象

Object、Function、Array、Math、Date、String、Boolean、Number、RegExp

1.3 查阅文档的方法

MDN文档是最好的学习资源:MDN JavaScript 参考

查阅文档三步走:

  1. 查看该方法的功能

  2. 查看里面参数的意义和类型

  3. 查看返回值的意义和类型

  4. 通过demo进行测试


二、Math对象

2.1 基本概念

  • Math是一个工具类,不是构造函数

  • 无需创建对象实例,直接使用其封装好的数学运算属性和方法

2.2 常用属性和方法

属性
Math.PI; // 圆周率 ≈ 3.14159
方法

方法

说明

示例

结果

Math.abs(x)

计算绝对值

Math.abs(-5)

5

Math.ceil(x)

向上取整

Math.ceil(4.1)

5

Math.floor(x)

向下取整

Math.floor(4.9)

4

Math.round(x)

四舍五入取整

Math.round(4.5)

5

Math.random()

生成[0,1)随机数

Math.random()

0.xxx

Math.max(x,y,...)

获取最大值

Math.max(1,5,3)

5

Math.min(x,y,...)

获取最小值

Math.min(1,5,3)

1

Math.pow(x,y)

返回x的y次幂

Math.pow(2,3)

8

Math.sqrt(x)

开方运算

Math.sqrt(9)

3

2.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-31

getDay()

获取周几

0-6(0代表周日)

getMonth()

获取月份

0-11(0代表1月)

getFullYear()

获取完整年份

四位数字

getHours()

获取小时

0-23

getMinutes()

获取分钟

0-59

getSeconds()

获取秒数

0-59

getTime()

获取时间戳(毫秒数)

长整数

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包装类转换为对象

执行过程

  1. 临时转换为String对象

  2. 读取length属性

  3. 转换回基本数据类型

重要:方法和属性只能添加给对象,不能添加给基本数据类型。当我们对一些基本数据类型的值去调用属性和方法时,浏览器会临时使用包装类将其转换为对象,然后再调用对象的属性和方法,调用完以后再将其转换为基本数据类型。


五、字符串方法

5.1 字符串存储特点

字符串底层以字符数组形式保存:

let str = "hello"; // 底层存储:["h", "e", "l", "l", "o"]

5.2 常用方法汇总

(1)length属性
let str = "hello"; str.length; // 5
(2)charAt() 和 str[]
str.charAt(0); // "h" str[0]; // "h"(ES6特性,更推荐)
(3)concat() — 连接字符串
let str = "hello"; str.concat(" ", "world"); // "hello world" // 作用和+一样,但+更常用
(4)indexOf() — 查找首次出现位置
let str = "hello world"; str.indexOf("o"); // 4(首次出现位置) str.indexOf("o", 5); // 7(从索引5开始查找) str.indexOf("z"); // -1(找不到)
(5)lastIndexOf() — 从后往前查找
str.lastIndexOf("o"); // 7(从后往前找)
(6)includes() — 判断是否包含
str.includes("hello"); // true str.includes("xyz"); // false
(7)slice() — 截取字符串(支持负数)
let str = "hello"; str.slice(0, 3); // "hel"(不包含结束位置) str.slice(0, -1); // "hell"(负数从后计算) str.slice(2); // "llo"(省略第二个参数,截取到最后)
(8)substring() — 截取字符串(不支持负数)
str.substring(0, 3); // "hel" str.substring(3, 0); // "hel"(自动交换参数位置) str.substring(-1, 3); // "hel"(负数视为0)
(9)substr() — 截取字符串(指定长度)
str.substr(0, 3); // "hel"(从索引0开始,截取3个)

三种截取方法对比

方法

参数

支持负数

特点

slice(start, end)

开始索引,结束索引

最常用,推荐

substring(start, end)

开始索引,结束索引

自动交换参数

substr(start, length)

开始索引,截取长度

已废弃,不推荐

(10)split() — 拆分为数组
let str = "red,orange,yellow"; str.split(","); // ["red", "orange", "yellow"] str.split(""); // ["r", "e", "d", ",", "o", ...]
(11)replace() — 替换字符
let str = "hello world"; str.replace("world", "JavaScript"); // "hello JavaScript" // 注意:只替换第一个匹配项
(12)toUpperCase() / toLowerCase()
let str = "Hello World"; str.toUpperCase(); // "HELLO WORLD" str.toLowerCase(); // "hello world"

5.3 方法速查表

方法

功能

返回值

length

获取字符串长度

数字

charAt(index)

获取指定位置字符

字符

str[index]

获取指定位置字符(ES6)

字符

concat(str)

连接字符串

新字符串

indexOf(search)

查找首次出现位置

索引或-1

lastIndexOf(search)

从后往前查找

索引或-1

includes(search)

判断是否包含

true/false

slice(start, end)

截取字符串

新字符串

substring(start, end)

截取字符串

新字符串

substr(start, length)

截取字符串

新字符串

split(separator)

拆分为数组

数组

replace(old, new)

替换字符

新字符串

toUpperCase()

转换为大写

新字符串

toLowerCase()

转换为小写

新字符串


总结

本文系统梳理了JavaScript中常用的内置对象:

主题

核心要点

Math对象

工具类,无需实例化,提供数学运算方法

Date对象

构造函数,处理日期时间,时间戳的四种获取方式

包装类

基本类型临时转换为对象,调用属性和方法后再转回

字符串方法

截取、查找、替换、转换、拆分等常用操作

掌握这些内置对象,你就能在日常开发中得心应手地处理各种常见任务。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/27 19:35:07

计算机毕业设计之基于springboot的家政服务系统的设计与实现

当下社会&#xff0c;信息技术充斥社会各个领域&#xff0c;已融入人们生活的点滴&#xff0c;日常中人们管理信息、办理业务、购买商品等都可以网络线上进行&#xff0c;快速而又便利&#xff0c;特别是随着移动互联网时代的到来&#xff0c;更是让人们随时享受着网络给带来的…

作者头像 李华
网站建设 2026/7/27 19:34:40

docker 安装mysql完美教程 建议收藏

一、安装mysql5.7 直接复制粘贴跟着做即可快速完成&#xff0c;可以不用查看详细步骤 &#xff08;1&#xff09;拉取 docker pull mysql:5.7 #或者 docker pull swr.cn-north-4.myhuaweicloud.com/library/mysql:5.7 &#xff08;2&#xff09;在本地创建mysql的映射目录 mk…

作者头像 李华
网站建设 2026/7/27 19:32:26

WPF开发必备:MVVM Dialogs框架对话框深度解析

WPF开发必备&#xff1a;MVVM Dialogs框架对话框深度解析 【免费下载链接】mvvm-dialogs Library simplifying the concept of opening dialogs from a view model when using MVVM in WPF 项目地址: https://gitcode.com/gh_mirrors/mv/mvvm-dialogs MVVM Dialogs是一款…

作者头像 李华
网站建设 2026/7/27 19:29:14

Flutter 布局核心思想

Flutter 布局核心思想 引言&#xff1a;从盒模型到布局哲学在Flutter的世界里&#xff0c;布局不仅仅是摆放组件的位置&#xff0c;更是一种声明式的界面构建哲学。作为一门由Google推出的跨平台框架&#xff0c;Flutter的布局系统遵循着"一切皆为Widget"的核心理念。…

作者头像 李华