CH14_JS常用内置对象

第14章：JS常用内置对象

本章目标

1. 掌握Javascript的常用内置对象
2. Number、Boolean、String
3. Math对象
4. Date对象

课程回顾

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

讲解内容

1. 内置对象

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

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

2. Number数字对象

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

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

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

2. Number数字对象名词解析

   1. 无穷大（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);
              }

   2. 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));
              }

   3. 数字可以是数字或对象

      function test3(){
                  var n1=123;
                  var n2=new Number(123);
      
                  console.log("n1:"+typeof(n1));  //返回number
                  console.log("n2:"+typeof n2);   //返回object
              }

3. 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);
           }

4. 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));
           }

5. 数字类型原型上的方法

   

   实例：

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

3. Boolean对象

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

2. 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);
           }

3. Boolean对象方法

   

   实例：

    function test3(){
               var n1=new Boolean(false);
   
               console.log(n1.toString());
               console.log(n1.valueOf());
           }

4. Date对象

1. 概念：Date对象是日期和时间对象

2. 创建对象的方式：var date=new Date()

3. 以下四种方式创建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);
           }

4. 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 对象的原始值。

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

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

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

5. 常用的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对象

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

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

2. 语法：

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

3. 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对象

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

2. 语法：

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

3. 属性与方法：

   属性、方法	描述
   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位数并且密码由四种不同类型字符组成

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