JavaScript内置对象详解

最新推荐文章于 2025-03-27 15:33:54 发布

遇见~未来

最新推荐文章于 2025-03-27 15:33:54 发布

阅读量653

点赞数 17

分类专栏： JavaScript 文章标签： javascript 前端 html 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/2301_76428778/article/details/145244428

版权

JavaScript 专栏收录该内容

107 篇文章

订阅专栏

在 JavaScript 中，对象主要分为三种类型：自定义对象、内置对象和浏览器对象。前两者属于 ECMAScript 的基础内容，而浏览器对象则是 JavaScript 独有的部分。

内置对象是 JavaScript 语言自带的对象，为开发者提供了一系列常用且基础必要的功能，以属性和方法的形式呈现。开发者无需了解其内部实现细节，可直接使用，极大地提高了开发效率。JavaScript 提供了多个内置对象，如 Math、Date、Array、String、Boolean、Number 等。

一、Math 对象

Math 对象较为特殊，它并非构造函数，而是一个工具类，无需创建对象实例即可直接使用。其内部封装了丰富的数学运算相关的属性和方法。

属性：
- Math.PI：表示圆周率，是一个固定的数学常数。
方法：
- Math.abs(x)：计算并返回参数x的绝对值。例如，Math.abs(-5)的结果为5。
- Math.ceil(x)：对参数x向上取整，只要小数部分不为0，整数部分就自动加1。如Math.ceil(2.1)的结果是3。
- Math.floor(x)：对参数x向下取整，直接舍去小数部分。例如，Math.floor(2.9)的结果为2。
- Math.round(x)：对参数x进行四舍五入取整。特别地，当小数部分为.5时，会往大的方向取整。比如Math.round(1.5)的结果是2，Math.round(-1.5)的结果是-1。
- Math.random()：生成一个大于等于0且小于1的随机数，取值范围是[0, 1)。若要生成一个0到x之间的随机数，可以使用Math.round(Math.random() * x)；若要生成一个x到y之间的随机数，则可使用Math.floor(Math.random() * (y - x + 1) + x) 。
- Math.max(num1, num2,...)：获取传入的多个数字中的最大值。例如，Math.max(3, 7, 2)的结果为7。
- Math.min(num1, num2,...)：获取传入的多个数字中的最小值。例如，Math.min(5, 1, 9)的结果为1。
- Math.pow(x, y)：返回x的y次幂。例如，Math.pow(2, 3)的结果为8。
- Math.sqrt(x)：对参数x进行开方运算。例如，Math.sqrt(16)的结果为4。

课堂小练习

编写一个程序，随机生成一个 1 - 10 之间的数字，让用户输入一个数字进行猜测。如果用户输入的数字大于随机数，提示 “数字大了，继续猜”；如果小于随机数，提示 “数字小了，继续猜”；如果等于随机数，提示 “猜对了，结束程序”。

var trueNum = Math.floor(Math.random() * 10 + 1);

var num = +prompt("请输入数字");

console.log(trueNum);

while (true) {

if (trueNum < num) {

alert("大了");

num = +prompt("请输入数字");

} else if (trueNum > num) {

alert("小了");

num = +prompt("请输入数字");

} else {

alert("恭喜你");

break;

}

二、Date 对象

在 JavaScript 中，Date对象是一个构造函数，用于处理日期和时间相关的操作。使用时必须先进行实例化。

创建 Date 对象：
- 直接使用构造函数：创建一个封装当前代码执行时间的Date对象。例如：

var d = new Date();

创建指定时间的对象：通过在构造函数中传递表示时间的字符串或数字作为参数来创建。日期的格式有以下几种写法：

var d2 = new Date("10/23/2023 9:00:00");//字符串型

var d4 = new Date("2023 - 11 - 09 8:59:00");//字符串型

var d3 = new Date(2023, 10, 09);//数字型，注意月份从0开始，这里10表示11月

时间对象的方法：
- getFullYear()：获取当前日期对象的年份，返回一个四位数字。
- getMonth()：获取当前时间对象的月份，返回值范围是0 - 11，其中0表示1月，1表示2月，以此类推。若要得到实际月份，需将返回值加1。
- getDate()：获取当前日期对象是几号，返回值范围是1 - 31。
- getDay()：获取当前日期对象是周几，返回值范围是0 - 6，其中0表示周日，1表示周一，6表示周六。
- getHours()：获取当前小时数，返回值范围是0 - 23。
- getMinutes()：获取当前分钟数，返回值范围是0 - 59。
- getSeconds()：获取当前秒钟数，返回值范围是0 - 59。
- 时间戳相关方法：
  - getTime()：获取当前日期对象的时间戳，即从格林威治标准时间的 1970 年 1 月 1 日 0 时 0 分 0 秒到当前日期所花费的毫秒数。
  - Date.now()：获取当前代码执行时的时间的时间戳，这是 HTML5 新增的方法。
  - valueOf()：获取当前日期对象的时间戳，与getTime()方法返回值相同。

var nowTime = new Date();

//获取当前的时间戳(4种方法)

var time = +new Date();

var time1 = Date.now();//h5新增的

var time2 = nowTime.valueOf();

var time3 = nowTime.getTime();

//利用时间戳来测试代码的执行的性能

var start = Date.now();

// 这里可以放置需要测试性能的代码

var end = Date.now();

// console.log("执行了" + (end - start));

课堂小练习：自制一个倒计时

// 封装倒计时函数

function countDown(time) {

var nowTime = +new Date(); //当前时间的毫秒数

var inputTime = +new Date(time); //输入时间的毫秒数

var times = (inputTime - nowTime) / 1000; //输入时间与当前时间的秒数

var d = parseInt(times / 60 / 60 / 24); //天

var h = parseInt((times / 60 / 60) % 24); //时

h = h < 10? "0" + h : h;

var m = parseInt((times / 60) % 60); //分

m = m < 10? "0" + m : m;

var s = parseInt(times % 60); //当前的秒

s = s < 10? "0" + s : s;

return "剩余时间： " + d + "天" + h + "时" + m + "分" + s + "秒";

}

var res = countDown("2023/9/24");

console.log(res);

三、基本包装类

在 JavaScript 中，数据类型分为基本数据类型和引用数据类型。基本数据类型包括String、Number、Boolean、Null、Undefined；引用数据类型主要是Object。

包装类：

JavaScript 提供了三个包装类，可将基本数据类型转换为对象。

- String()：将基本数据类型字符串转换为String对象。
- Number()：将基本数据类型数字转换为Number对象。
- Boolean()：将基本数据类型布尔值转换为Boolean对象。

在实际应用中，通常不会使用基本数据类型的对象，因为在进行某些比较操作时，可能会产生不可预估的结果。

//创建一个Number类型的对象

var num = new Number(3);

var str = new String("hello");

var bool = new Boolean(true);

num.hello = "abc你好";

console.log(typeof num); //object

console.log(num.hello); //abc你好

需要注意的是，方法和属性只能添加给对象，不能直接添加给基本数据类型。当对基本数据类型的值调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法，调用完成后，又会将其转换回基本数据类型。

var s = 123;

s = s.toString();

console.log(s, typeof s);

字符串方法：
- length属性：用于获取字符串的长度。例如：

var str = "hello";

/* 在底层字符串是以字符数组的形式保存的 ["h","e","l","l","o"] */

console.log(str.length); //5

charAt(index)：返回字符串中指定位置的字符，根据索引获取指定字符。例如：

var str = "hello";

var res = str.charAt(0); //h

console.log(str[0]); //h，这种方式也能获取指定位置字符

concat(str1, str2,...)：用于连接两个或多个字符串，作用与+运算符类似。例如：

var str = "hello";

res = str.concat(",你好", ",再见"); //hello,你好,再见

indexOf(searchValue, [start])：检索字符串中是否含有指定内容。如果找到，返回该内容第一次出现的索引；若未找到，则返回-1。start参数可选，用于指定开始查找的位置，默认从字符串开头开始查找。例如：

var str = "hello";

res = str.indexOf("p"); //-1

lastIndexOf(searchValue, [start])：用法与indexOf()类似，不同之处在于它是从字符串的末尾开始向前查找。例如：

var str = "hello";

res = str.lastIndexOf("l"); //3

slice(start, [end])：从字符串中截取指定的内容，不会影响原字符串，而是返回截取到的新字符串。参数start表示开始位置的索引（包括开始位置），end表示结束位置的索引（不包括结束位置）。如果省略end参数，则会截取从start位置到字符串末尾的所有内容。也可以传递负数作为参数，负数表示从字符串末尾开始计算的位置。例如：

var str = "hello";

res = str.slice(0, 2); //he

substring(from, [to])：用于截取字符串，与slice()方法类似。参数from表示开始位置的索引（包括开始位置），to表示结束位置的索引（不包括结束位置）。若省略to参数，则会截取从from位置到字符串末尾的所有内容。与slice()不同的是，该方法不能接收负值作为参数，如果传递了负值，则默认使用0。而且当to小于from时，它会自动调整参数的位置，将两个参数交换。
substr(start, length)：用于截取字符串。参数start表示截取开始位置的索引，length表示截取的长度。例如：