CH14_JS常用内置对象

🕗 发布于 2024-07-13 10:28 javascript 开发语言 ecmascript

第14章：JS常用内置对象

本章目标

掌握Javascript的常用内置对象
Number、Boolean、String
Math对象
Date对象

课程回顾

对象的概念
如何创建对象，几种方式创建
值类型和引用类型的区别

讲解内容

1. 内置对象

JavaScript中的内置对象有number，Boolean，String，Date，Array等通过给他们创建对象来访问更多的方法和属性

我们学习的所有编程语言都具有内置对象，这些对象创建了语言的基本功能，所以JavaScript也有许多内在对象将其定义为语言。本篇文章将为大家详细介绍几种JavaScript中的内置语言。

在这里插入图片描述

2. Number数字对象

概述：通过Number将变量设置为数值来创建对象。然后，此变量就可以访问对象具有的属性和方法，我们可以通过与new关键字结合使用

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。

在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由浮点型类型。

Number数字对象名词解析

无穷大（Infinity）

当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。

实例：
```
function test1(){
            var n0=10;
            console.log(typeof n0);

            var n1=100/0;
            console.log(n1);

            var n2=2;
            while(n2!=Infinity){
                n2*=n2; // 重复计算直到 myNumber 等于 Infinity
                //console.log(n2);
            }
            console.log(n2);
        }
```

NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

function test2(){

            var n1=123;
            var n2="123";
            var n3=123*"2";
            var n4="abc";
            var n5=12*"2a";

            console.log("n1:"+isNaN(n1));
            console.log("n2:"+isNaN(n2));
            console.log("n3:"+isNaN(n3));
            console.log("n4:"+isNaN(n4));
            console.log("n5:"+isNaN(n5));
        }

数字可以是数字或对象

function test3(){
            var n1=123;
            var n2=new Number(123);

            console.log("n1:"+typeof(n1));  //返回number
            console.log("n2:"+typeof n2);   //返回object
        }

Number对象的属性

在这里插入图片描述

实例：

function test4(){
            var n1=Number.MIN_VALUE;
            var n2=Number.MAX_VALUE;
            var n3=Number.NaN;

            var n4=Number.MIN_SAFE_INTEGER;
            var n5=Number.MAX_SAFE_INTEGER;
            

            console.log("最小值:"+n1);
            console.log("最大值:"+n2);
            console.log("非数字特殊值:"+n3);
            console.log("最小安全整数："+n4);
            console.log("最大安全整数："+n5);
        }

Number对象的方法

在这里插入图片描述

实例：

function test5(){
            var str=prompt("请输入一个数字：");

            var n1=Number.parseInt(str);
            var n2=Number.parseFloat(str);
           
            console.log("n1:"+n1);
            console.log("n2:"+n2);
            console.log("是否为有限数字："+Number.isFinite(n1));
            console.log("是否为整数："+Number.isInteger(n1));
            console.log("是否为非数字："+Number.isNaN(n1));
            console.log("是否为安全整数："+Number.isSafeInteger(n1));
        }

数字类型原型上的方法

在这里插入图片描述

实例：

function test6(){

            var n1=123;
           
            console.log("科学计数法表示："+n1.toExponential());
            console.log("指定小数表示："+n1.toFixed(2));
            console.log("指定精度表示："+n1.toPrecision(2));
        }

3. Boolean对象

概念：Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).

boolean对象属性

在这里插入图片描述

function Student(name,age){
            this.name=name;
            this.age=age;
        }

        function test1(){
            var n1=new Object();
            var n2=new Boolean();
            var n3=new Student("张三",18);
                 
            console.log(n1.constructor==Boolean);
            console.log(n2.constructor==Boolean);

            console.log(n1.constructor);
            console.log(n2.constructor);
            console.log(n3.constructor);
        }

        function test2(){
            Student.prototype.sex="男";

            var stu1=new Student("张三",15);
            var stu2=new Student("李四",18);
            stu2.sex="女";

            console.log(stu1.sex);
            console.log(stu2.sex);
        }

Boolean对象方法

在这里插入图片描述

实例：

 function test3(){
            var n1=new Boolean(false);

            console.log(n1.toString());
            console.log(n1.valueOf());
        }

4. Date对象

概念：Date对象是日期和时间对象
创建对象的方式：var date=new Date()

以下四种方式创建Date对象

function test1() {

            var d1 = new Date(); //当前时间
            var d2 = new Date(1000);//毫秒
            var d3 = new Date("2023-5-15");//dateString：日期字符串
            var d4 = new Date(2023, 5, 20, 13, 25, 30, 300);//具体日期属性

            console.log("d1:"+d1);
            console.log("d2:"+d2);
            console.log("d3:"+d3);
            console.log("d4:"+d4);
        }

Date对象的方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear()	已废弃。请使用 getFullYear() 方法代替。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()	setTime() 方法以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds()	setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear()	已废弃。请使用 setFullYear() 方法代替。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	已废弃。请使用 toUTCString() 方法代替。
toISOString()	使用 ISO 标准返回字符串的日期格式。
toJSON()	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。实例：`var today = new Date(); var UTCstring = today.toUTCString();`
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

说明：方法很多，基本上就三种类型：

getXXX()：获取对应的日期或时间
setXXX()：设置对应的日期和时间
toXXX()：把Date对象转为成字符串格式

Date方法分组说明
setXxx 这些方法用于设置时间和日期值
getXxx 这些方法用于获取时间和日期值

Date方法分组	说明
setXxx	这些方法用于设置时间和日期值
getXxx	这些方法用于获取时间和日期值

常用的Date方法

值	整数
Seconds 和 Minutes	0 至 59 ，秒和分
Hours	0 至 23 ，时间
Day	0 至 6（星期几）
Date	1 至 31（月份中的天数）
Months	0 至 11（一月至十二月）

实例：显示当前日期与时间

//显示时间
function displayTime(){

            //创建日期对象
            var myDate=new Date();

            //年、月、日
            var year=myDate.getFullYear();
            var month=myDate.getMonth()+1;
            var date=myDate.getDate();

            //时、分、秒
            var hours=myDate.getHours();
            var minutes=myDate.getMinutes();
            var seconds=myDate.getSeconds();

            //星期
            var week=myDate.getDay();

            //显示
            document.getElementById("time").innerText=`${year}年${month}月${date}日 ${hours}:${minutes}:${seconds} 星期：${week}`
        }

5. 定时函数

1. setTimeout()用法
setTimeout（“调用的函数”, “指定的时间后"）

2.setInterval()方法

setInterval（"调用的函数", "指定的时间间隔"）

在这里插入图片描述

实例：结合计时函数，将以上案例升级为动态显示时间。

方式1：

function displayTime(){

            //创建日期对象
            var myDate=new Date();

            //年、月、日
            var year=myDate.getFullYear();
            var month=myDate.getMonth()+1;
            var date=myDate.getDate();

            //时、分、秒
            var hours=myDate.getHours();
            var minutes=myDate.getMinutes();
            var seconds=myDate.getSeconds();

            //星期
            var week=myDate.getDay();

            //显示
            document.getElementById("time").innerText=`${year}年${month}月${date}日 ${hours}:${minutes}:${seconds} 星期：${week}`
            
            setTimeout(displayTime,1000);
        }

方式2：

var timeId;
        function start(){

            //1秒后执行
            timeId=setInterval(displayTime,1000);
        }

        function stop(){

            //清除timeout
            clearInterval(timeId);
        }

6. Math对象

概念：Math 对象用于执行数学任务。

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

语法：

var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根

Math对象方法

在这里插入图片描述

实例：

<script>
        //随机数
        var n1=Math.random();

        //圆周率
        var n2=Math.PI;

        //向上取整
        var n3=Math.ceil(21.3);

        //向下取整
        var n4=Math.floor(21.3);

        //最大值
        var n5=Math.max(21,45,92);

        //最小值
        var n6=Math.min(21,45,92);

        //四舍五入
        var n7=Math.round(41.54);

        //求幂
        var n8=Math.pow(3,2);

        console.log("n1:"+n1);
        console.log("n2:"+n2);
        console.log("n3:"+n3);
        console.log("n4:"+n4);
        console.log("n5:"+n5);
        console.log("n6:"+n6);
        console.log("n7:"+n7);
        console.log("n8:"+n8);

    </script>

7.String对象

概念：JavaScript 字符串是引号中的零个或多个字符。

语法：

var name = "张三";
var name = '张三';

属性与方法：

属性、方法	描述
length	字符串的长度
indexOf(str)	返回字符串中指定文本首次出现的索引（位置），未找到则返回-1
lastIndexOf(str)	返回指定文本在字符串中最后一次出现的索引，未找到则返回-1
substring(start, end)	截取字符串，参数为起始索引和终止索引。
substr(start, length)	截取字符串，参数为起始索引和截取的长度。
replace(oldStr,newStr)	替换字符串
toUpperCase()	转换为大写
toLowerCase()	转换为小写
concat(str1,…)	连接两个或多个字符串
trim()	删除字符串两端的空白符
charAt(index)	回字符串中指定下标（位置）的字符串
[index ]	对字符串进行索引访问，只能读，不能写。
split©	将字符串转换为数组
startsWith(str);	是否以指定字符str开头
endsWith(str)	是否以指定字符str结尾

说明：以上方法中，涉及索引的都从0开始

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
    <div id="result">
        
    </div>

    <script>
        var str=" Hello China ";

        var result="";

        var newStr= str.trim();
        // str.trimLeft();
        // str.trimRight();

        result+="长度："+str.length+"<br/>"
        result+="长度："+newStr.length+"<br/>"
        result+="索引："+str.indexOf("ll")+"<br/>";
        result+="索引："+str.lastIndexOf("h")+"<br/>";
        result+="截取："+str.substring(2,4)+"<br/>";  //包前，不包后
        result+="截取："+str.substr(2,2)+"<br/>"; //起始索引，长度
        result+="替换："+str.replace("h","-")+"<br/>";  //?
        result+="大写："+str.toUpperCase()+"<br/>";
        result+="小写："+str.toLowerCase()+"<br/>";
        result+="连接："+str.concat("中国","123")+"<br/>";
        result+="连接："+str.concat(...names)+"<br/>";
        result+="指定位置字符："+str.charAt(1)+"<br/>";
        //str[1]="A";  //此行代码无效
        result+="指定索引位置的字符："+str[1]+"<br/>";


        //显示结果
        document.getElementById("result").innerHTML=result;
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str1="aa bb cc dd";
        var str2="aa-bb-cc-dd";
        var str3="hello";

        // var strs1= str1.split(" ");
        // for(var i=0;i<strs1.length;i++){
        //     console.log(strs1[i]);
        // }

        // var strs2= str2.split("-");
        // for(var i=0;i<strs2.length;i++){
        //     console.log(strs2[i]);
        // }

        var strs3=str3.split("");
        for(var i=0;i<str3.length;i++){
            console.log(strs3[i]);
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var name = prompt("请输入姓名：");

        alert("首字符为张吗:" + name.startsWith("张"));
        alert("尾字符为杰吗:" + name.endsWith("杰"));

    </script>
</body>

</html>

课后作业

1.自定义一个闹钟，用户可以设置多个时间点的闹钟，当指定时间到达，则弹出警告框提示。

2.自定义一个秒表，可以启动、暂停、停止。

3.随机生成100个1至100的数字，存在数组中，然后判断其中有多少个偶数。

4.输入5个学生的考试成绩，判断其最高分、最低分各是多少。

5.自定义游戏，剪刀、石头、布，实现人机对局，记录双发所得分数。

6.自定义数组，存储用户输入的10个姓名：

A.判断名字包含“杰”的姓名个数。

B.判断名字以"张"开头的姓名个数。

C.判断名字以"燕"结尾的姓名个数。

7.查找字符串：'abcoefoxyozzopp’中所有o出现的位置以及次数

8.定义一个变量，值为多段单词用空格隔开，找出最长的单词且输出>.

9.现有字符串”一年中快乐而漫长的暑假也如期到来”,请取出索引为0,3,5,7,9的字符串。

10.根据输入密码判断，返回密码强度.

弱：密码小于6位数

中:密码大于6位数并且密码由两种不同类型字符组成

强: 密码大于6位数并且密码由三种不同类型字符组成

超强：密码大于6位数并且密码由四种不同类型字符组成

字符类型分别为:大写字母、小写字母、数字、特殊符号（@,_,$,&）

原文地址：https://blog.csdn.net/m0_37631902/article/details/140375229

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：MyBatis（40）使用 MyBatis 时，事务管理的常见问题有哪些，如何解决
下一篇：【云岚到家】-day05-7-项目迁移-活动管理

谷歌推出设备内置人工智能，实时向手机用户发出诈骗电话警报
Google 宣布推出适用于 Android 的新安全功能，可实时防御诈骗和有害应用。
阅读更多2024-11-16
动手学深度学习70 BERT微调
13 bert一般可以用工具转成c++ 开销大。考虑怎么提升bert性能。14 设备性能不高，可以用蒸馏bert。模型中有大量冗余的东西。9 10, 一般不固定，固定参数可以使训练速度加快，可以尝试
阅读更多2024-11-16
怎么改变网络IP地址：实用指南与注意事项
在数字化时代，IP地址作为设备连接互联网的“身份证”，扮演着至关重要的角色。无论是出于隐私保护、访问限制绕过，还是网络安全考虑，有时我们需要更改设备的IP地址。然而，对于许多非技术用户而言，这一过程可
阅读更多2024-11-16
huggingface 下载方法测试ok
huggingface 下载方法：
阅读更多2024-11-16
计算机网络（10）网络性能
在计算机网络中，网络性能是指网络传输数据的效率、速度和稳定性。
阅读更多2024-11-16
Springboot校园失物招领平台
Springboot校园失物招领平台
阅读更多2024-11-16
HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）
HarmonyOS 提供了一个强大的 API 集，方便开发者获取设备的硬件和软件信息。通过模块的deviceInfo接口，开发者可以访问设备的型号、品牌、系统版本等详细信息。本文将详细介绍如何使用这些
阅读更多2024-11-16
Vue3集成搜索引擎智能提示API
问题：因为API返回的是JSONP数据，JSONP是跨域访问的一种方式，网上很多都是用的原生的 js 代码去发送请求，嵌入到vue中不太方便，因此我想着vue能不能直接发送jsonp 请求，后面发现v
阅读更多2024-11-16
【Linux】Linux 权限的理解
本文简单介绍了Linux的基础知识--权限。
阅读更多2024-11-16
Python 中.title()函数和.lower()函数
将字符串中的每一大写字母都变成的小写字母。将字符串中的每一单词的首字母大写。1.lower()函数的功能。1.title()函数的功能。一.title()函数。二.lower()函数。
阅读更多2024-11-16

CH14_JS常用内置对象

第14章：JS常用内置对象

本章目标

课程回顾

讲解内容

1. 内置对象

2. Number数字对象

3. Boolean对象

4. Date对象

5. 定时函数

6. Math对象

7.String对象

课后作业

相关文章