-JS常用内置对象Math、Date、Array)
点此查看所有教程、项目、源码导航文章目录1. 背景2. 内置对象到底是用来干嘛的存在的意义3. Math 数学内置对象3.1 常用属性3.2 常用方法3.3 实用拓展随机整数3.4 Math 小结3.5 静态内置对象到底是怎么实现的(了解即可)4. Date 日期内置对象4.1 创建日期对象4.2 常用获取时间的方法4.3 时间戳5. Array 数组内置对象5.1 创建数组5.2 常用属性 length5.3 常用数组方法6. 三个内置对象对比总结7. 综合实战案例随机生成学生成绩并统计7.1 需求说明7.2 完整代码8. 小结1. 背景前面我们学习了自定义对象我们自己编写对象、属性、方法用来描述学生、汽车这类现实事物。但是在开发的时候有很多能力是几乎所有程序都要用到的计算随机数、取绝对值、获取当前时间、存放一组批量数据……如果每一个开发者每写一个项目都从零手写一套随机数逻辑、手写解析年月日的代码、手写数组增删逻辑会出现很多问题代码重复、写法不统一、容易写出 bug、开发效率极低。JS 语言设计者提前把这些高频、通用、稳定的能力封装好了做成现成的对象这就是内置对象。本篇我们先讲清楚内置对象存在的意义再依次学习三个最核心的内置对象Math、Date、Array最后直接做综合实战案例巩固。2. 内置对象到底是用来干嘛的存在的意义我们可以换一个角度理解前面写的函数、自定义对象是我们自己为当前业务写的逻辑而内置对象是语言官方给我们提供的通用工具包。它的价值主要有这几点避免重复造轮子加减乘除、取随机数、获取系统时间、批量管理一组数据是通用需求不是某个项目独有的。官方统一封装好所有人直接调用不用每个人自己重新实现一遍。代码标准统一如果大家各自写获取时间、随机数的代码一百个人可能有一百种写法别人阅读你的代码时很难看懂。使用内置对象语法是 JS 统一规定的所有开发者都看得懂。稳定、性能更好内置对象底层大多是浏览器内核原生实现不是 JS 代码写出来的经过海量项目验证bug 更少执行效率远高于我们自己手写的版本。降低学习和开发门槛很多底层逻辑很复杂比如随机算法、时间时区换算、数组内存管理。我们不需要弄懂底层原理只需要调用它暴露出来的方法拿到结果即可。一句话总结自定义对象用来描述业务里的事物内置对象是语言提供给我们的通用工具用来解决开发中无处不在的通用基础问题。3. Math 数学内置对象Math 是专门用来做数学运算的内置对象不需要 new 创建直接使用。只要涉及数学相关计算都可以优先考虑 Math。3.1 常用属性// 圆周率 πconsole.log(Math.PI);3.2 常用方法// 1. 取绝对值console.log(Math.abs(-10));// 2. 向上取整往大的整数靠拢console.log(Math.ceil(3.1));// 3. 向下取整往小的整数靠拢console.log(Math.floor(3.9));// 4. 四舍五入console.log(Math.round(3.4));console.log(Math.round(3.5));// 5. 取一组数字最大值、最小值console.log(Math.max(12,5,88,30));console.log(Math.min(12,5,88,30));// 6. 随机数范围 [0,1)包含0不包含1console.log(Math.random());3.3 实用拓展随机整数// 获取 0 ~ 10 的随机整数varnumMath.floor(Math.random()*11);console.log(num);3.4 Math 小结Math 属于静态内置对象不需要实例化直接Math.xxx使用专门服务各类数学计算、随机值场景。3.5 静态内置对象到底是怎么实现的(了解即可)很多同学会好奇为什么 Math 不需要new它底层是怎么写出来的我们先用普通 JS 代码模拟一个简化版 Math看懂逻辑// 静态对象本质引擎在全局提前创建好一个普通对象一次性建好全程就这一个varMyMath{PI:3.1415926,abs:function(n){returnn0?-n:n;},random:function(){returnMath.random();}};这个MyMath就是一个静态对象。它不是函数没有[[Construct]]这个内部能力所以不能写new MyMath()一写就报错所有属性、方法直接挂载在这个唯一对象身上直接MyMath.abs()调用。✅ ECMAScript 规范层面Math在 JS 引擎启动的时候就已经作为全局唯一的普通对象提前创建完毕绑定在全局 window 上。Date、Array 是构造函数自带[[Construct]]new的时候会新建一个实例Math、JSON 这类静态内置对象没有构造能力不存在实例的概念它本身就是唯一的容器命名空间用来打包一堆工具方法和常量这些工具不需要保存自己独有的状态每次调用只靠传入的参数计算所以完全不需要实例。✅ 引擎底层V8 等Math 的这些方法并不是 JS 代码实现的底层是 C/C 写好的原生函数直接对接 CPU 浮点运算指令性能很高。JS 只是暴露一层外壳我们在 JS 里写Math.abs()本质是调用引擎内部预注册好的原生函数。一句话区分构造对象Date、Array模板可以 new 出很多独立实例每个实例有自己专属数据静态内置对象Math全局唯一的工具收纳盒盒子只有一个工具直接放在盒子上不需要复制盒子。4. Date 日期内置对象Date 对象用来处理时间、日期获取年、月、日、时、分、秒计算时间差、做倒计时、展示发布时间。Date 需要使用new关键字创建实例。如果让我们自己写代码处理时间、时区、闰年换算逻辑会非常复杂这也是 Date 内置对象的价值。4.1 创建日期对象// 创建日期对象默认代表当前系统时间varnownewDate();console.log(now);4.2 常用获取时间的方法varnownewDate();// 获取年份console.log(now.getFullYear());// 获取月份0代表1月11代表12月使用时一般 1console.log(now.getMonth()1);// 获取几号console.log(now.getDate());// 获取星期0代表周日console.log(now.getDay());// 时分秒console.log(now.getHours());console.log(now.getMinutes());console.log(now.getSeconds());4.3 时间戳时间戳从 1970-01-01 00:00:00 到当前时刻的毫秒数经常用来做时间对比、记录创建时间。varnownewDate();console.log(now.getTime());小提醒月份、星期的起始值都是 0新手这里很容易踩坑。5. Array 数组内置对象数组是用来存放一组有序数据的内置对象可以存放数字、字符串甚至对象。我们写的[]数组字面量本质就是 Array 的实例。如果没有数组我们想要保存 100 个学生成绩就要定义 100 个独立变量代码会完全失控。数组就是用来批量管理同类数据的工具。5.1 创建数组// 字面量方式开发推荐简洁vararr[10,20,30];// new Array 方式vararr2newArray(10,20,30);5.2 常用属性 lengthlength获取数组里面元素的个数vararr[10,20,30];console.log(arr.length);5.3 常用数组方法vararr[10,20,30];// push在数组末尾追加元素arr.push(40);console.log(arr);// pop删除数组最后一个元素返回删掉的值arr.pop();console.log(arr);// unshift在数组开头添加元素arr.unshift(5);console.log(arr);// shift删除数组第一个元素arr.shift();console.log(arr);// indexOf查找元素找到返回下标找不到返回 -1console.log(arr.indexOf(20));// join把数组所有元素拼接成字符串console.log(arr.join(-));6. 三个内置对象对比总结Math数学计算不用 new静态对象。解决各种数值运算、随机数需求。Date时间日期需要 new 实例。解决年月日时分秒、时间戳、时间对比的复杂问题。Array数组批量保存有序数据。解决大量同类数据统一管理、增删查找的问题开发使用频率最高。7. 综合实战案例随机生成学生成绩并统计7.1 需求说明使用 Math 随机生成 5 个 [0,100] 的整数成绩使用 Array 存放全部成绩使用 Math 求出最高分、最低分、平均分使用 Date 获取本次统计的当前时间一起打印输出。7.2 完整代码// 用来存放成绩的数组varscoreList[];// 循环生成5个随机成绩for(vari0;i5;i){// 0~100 随机整数varscoreMath.floor(Math.random()*101);scoreList.push(score);}// 最高分、最低分varmaxScoreMath.max(...scoreList);varminScoreMath.min(...scoreList);// 求和计算平均分varsum0;for(varj0;jscoreList.length;j){sumsumscoreList[j];}varavgScoresum/scoreList.length;// 获取当前时间varnownewDate();vartimeStrnow.getFullYear()-(now.getMonth()1)-now.getDate() now.getHours():now.getMinutes():now.getSeconds();// 输出全部信息console.log(成绩统计信息);console.log(生成时间,timeStr);console.log(全部成绩,scoreList);console.log(最高分,maxScore);console.log(最低分,minScore);console.log(平均分,avgScore.toFixed(2));代码说明toFixed(2)保留两位小数也是数字的内置方法让平均分展示更加美观。这个案例同时用到了 Math、Array、Date 三大内置对象也是我们日常开发很典型的组合用法。8. 小结内置对象是 JS 官方提前封装好的通用工具包意义避免重复造轮子、统一代码规范、底层稳定高效、屏蔽复杂底层细节。自定义对象用来描述业务事物内置对象用来解决通用基础技术问题。Math 负责数学计算、Date 负责时间、Array 负责批量管理一组数据。实际开发中经常会把多个内置对象搭配在一起配合完成业务需求。 
长河君 · 2026/10/27 18:18:05 · 阅读 1.2k 副队长JavaScript教程(46)-JS常用内置对象Math、Date、Array
点此查看所有教程、项目、源码导航文章目录1. 背景2. 内置对象到底是用来干嘛的存在的意义3. Math 数学内置对象3.1 常用属性3.2 常用方法3.3 实用拓展随机整数3.4 Math 小结3.5 静态内置对象到底是怎么实现的(了解即可)4. Date 日期内置对象4.1 创建日期对象4.2 常用获取时间的方法4.3 时间戳5. Array 数组内置对象5.1 创建数组5.2 常用属性 length5.3 常用数组方法6. 三个内置对象对比总结7. 综合实战案例随机生成学生成绩并统计7.1 需求说明7.2 完整代码8. 小结1. 背景前面我们学习了自定义对象我们自己编写对象、属性、方法用来描述学生、汽车这类现实事物。但是在开发的时候有很多能力是几乎所有程序都要用到的计算随机数、取绝对值、获取当前时间、存放一组批量数据……如果每一个开发者每写一个项目都从零手写一套随机数逻辑、手写解析年月日的代码、手写数组增删逻辑会出现很多问题代码重复、写法不统一、容易写出 bug、开发效率极低。JS 语言设计者提前把这些高频、通用、稳定的能力封装好了做成现成的对象这就是内置对象。本篇我们先讲清楚内置对象存在的意义再依次学习三个最核心的内置对象Math、Date、Array最后直接做综合实战案例巩固。2. 内置对象到底是用来干嘛的存在的意义我们可以换一个角度理解前面写的函数、自定义对象是我们自己为当前业务写的逻辑而内置对象是语言官方给我们提供的通用工具包。它的价值主要有这几点避免重复造轮子加减乘除、取随机数、获取系统时间、批量管理一组数据是通用需求不是某个项目独有的。官方统一封装好所有人直接调用不用每个人自己重新实现一遍。代码标准统一如果大家各自写获取时间、随机数的代码一百个人可能有一百种写法别人阅读你的代码时很难看懂。使用内置对象语法是 JS 统一规定的所有开发者都看得懂。稳定、性能更好内置对象底层大多是浏览器内核原生实现不是 JS 代码写出来的经过海量项目验证bug 更少执行效率远高于我们自己手写的版本。降低学习和开发门槛很多底层逻辑很复杂比如随机算法、时间时区换算、数组内存管理。我们不需要弄懂底层原理只需要调用它暴露出来的方法拿到结果即可。一句话总结自定义对象用来描述业务里的事物内置对象是语言提供给我们的通用工具用来解决开发中无处不在的通用基础问题。3. Math 数学内置对象Math 是专门用来做数学运算的内置对象不需要 new 创建直接使用。只要涉及数学相关计算都可以优先考虑 Math。3.1 常用属性// 圆周率 πconsole.log(Math.PI);3.2 常用方法// 1. 取绝对值console.log(Math.abs(-10));// 2. 向上取整往大的整数靠拢console.log(Math.ceil(3.1));// 3. 向下取整往小的整数靠拢console.log(Math.floor(3.9));// 4. 四舍五入console.log(Math.round(3.4));console.log(Math.round(3.5));// 5. 取一组数字最大值、最小值console.log(Math.max(12,5,88,30));console.log(Math.min(12,5,88,30));// 6. 随机数范围 [0,1)包含0不包含1console.log(Math.random());3.3 实用拓展随机整数// 获取 0 ~ 10 的随机整数varnumMath.floor(Math.random()*11);console.log(num);3.4 Math 小结Math 属于静态内置对象不需要实例化直接Math.xxx使用专门服务各类数学计算、随机值场景。3.5 静态内置对象到底是怎么实现的(了解即可)很多同学会好奇为什么 Math 不需要new它底层是怎么写出来的我们先用普通 JS 代码模拟一个简化版 Math看懂逻辑// 静态对象本质引擎在全局提前创建好一个普通对象一次性建好全程就这一个varMyMath{PI:3.1415926,abs:function(n){returnn0?-n:n;},random:function(){returnMath.random();}};这个MyMath就是一个静态对象。它不是函数没有[[Construct]]这个内部能力所以不能写new MyMath()一写就报错所有属性、方法直接挂载在这个唯一对象身上直接MyMath.abs()调用。✅ ECMAScript 规范层面Math在 JS 引擎启动的时候就已经作为全局唯一的普通对象提前创建完毕绑定在全局 window 上。Date、Array 是构造函数自带[[Construct]]new的时候会新建一个实例Math、JSON 这类静态内置对象没有构造能力不存在实例的概念它本身就是唯一的容器命名空间用来打包一堆工具方法和常量这些工具不需要保存自己独有的状态每次调用只靠传入的参数计算所以完全不需要实例。✅ 引擎底层V8 等Math 的这些方法并不是 JS 代码实现的底层是 C/C 写好的原生函数直接对接 CPU 浮点运算指令性能很高。JS 只是暴露一层外壳我们在 JS 里写Math.abs()本质是调用引擎内部预注册好的原生函数。一句话区分构造对象Date、Array模板可以 new 出很多独立实例每个实例有自己专属数据静态内置对象Math全局唯一的工具收纳盒盒子只有一个工具直接放在盒子上不需要复制盒子。4. Date 日期内置对象Date 对象用来处理时间、日期获取年、月、日、时、分、秒计算时间差、做倒计时、展示发布时间。Date 需要使用new关键字创建实例。如果让我们自己写代码处理时间、时区、闰年换算逻辑会非常复杂这也是 Date 内置对象的价值。4.1 创建日期对象// 创建日期对象默认代表当前系统时间varnownewDate();console.log(now);4.2 常用获取时间的方法varnownewDate();// 获取年份console.log(now.getFullYear());// 获取月份0代表1月11代表12月使用时一般 1console.log(now.getMonth()1);// 获取几号console.log(now.getDate());// 获取星期0代表周日console.log(now.getDay());// 时分秒console.log(now.getHours());console.log(now.getMinutes());console.log(now.getSeconds());4.3 时间戳时间戳从 1970-01-01 00:00:00 到当前时刻的毫秒数经常用来做时间对比、记录创建时间。varnownewDate();console.log(now.getTime());小提醒月份、星期的起始值都是 0新手这里很容易踩坑。5. Array 数组内置对象数组是用来存放一组有序数据的内置对象可以存放数字、字符串甚至对象。我们写的[]数组字面量本质就是 Array 的实例。如果没有数组我们想要保存 100 个学生成绩就要定义 100 个独立变量代码会完全失控。数组就是用来批量管理同类数据的工具。5.1 创建数组// 字面量方式开发推荐简洁vararr[10,20,30];// new Array 方式vararr2newArray(10,20,30);5.2 常用属性 lengthlength获取数组里面元素的个数vararr[10,20,30];console.log(arr.length);5.3 常用数组方法vararr[10,20,30];// push在数组末尾追加元素arr.push(40);console.log(arr);// pop删除数组最后一个元素返回删掉的值arr.pop();console.log(arr);// unshift在数组开头添加元素arr.unshift(5);console.log(arr);// shift删除数组第一个元素arr.shift();console.log(arr);// indexOf查找元素找到返回下标找不到返回 -1console.log(arr.indexOf(20));// join把数组所有元素拼接成字符串console.log(arr.join(-));6. 三个内置对象对比总结Math数学计算不用 new静态对象。解决各种数值运算、随机数需求。Date时间日期需要 new 实例。解决年月日时分秒、时间戳、时间对比的复杂问题。Array数组批量保存有序数据。解决大量同类数据统一管理、增删查找的问题开发使用频率最高。7. 综合实战案例随机生成学生成绩并统计7.1 需求说明使用 Math 随机生成 5 个 [0,100] 的整数成绩使用 Array 存放全部成绩使用 Math 求出最高分、最低分、平均分使用 Date 获取本次统计的当前时间一起打印输出。7.2 完整代码// 用来存放成绩的数组varscoreList[];// 循环生成5个随机成绩for(vari0;i5;i){// 0~100 随机整数varscoreMath.floor(Math.random()*101);scoreList.push(score);}// 最高分、最低分varmaxScoreMath.max(...scoreList);varminScoreMath.min(...scoreList);// 求和计算平均分varsum0;for(varj0;jscoreList.length;j){sumsumscoreList[j];}varavgScoresum/scoreList.length;// 获取当前时间varnownewDate();vartimeStrnow.getFullYear()-(now.getMonth()1)-now.getDate() now.getHours():now.getMinutes():now.getSeconds();// 输出全部信息console.log(成绩统计信息);console.log(生成时间,timeStr);console.log(全部成绩,scoreList);console.log(最高分,maxScore);console.log(最低分,minScore);console.log(平均分,avgScore.toFixed(2));代码说明toFixed(2)保留两位小数也是数字的内置方法让平均分展示更加美观。这个案例同时用到了 Math、Array、Date 三大内置对象也是我们日常开发很典型的组合用法。8. 小结内置对象是 JS 官方提前封装好的通用工具包意义避免重复造轮子、统一代码规范、底层稳定高效、屏蔽复杂底层细节。自定义对象用来描述业务事物内置对象用来解决通用基础技术问题。Math 负责数学计算、Date 负责时间、Array 负责批量管理一组数据。实际开发中经常会把多个内置对象搭配在一起配合完成业务需求。