自学内容网 自学内容网

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 和 Minutes0 至 59 ,秒和分
    Hours0 至 23 ,时间
    Day0 至 6(星期几)
    Date1 至 31(月份中的天数)
    Months0 至 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位数并且密码由四种不同类型字符组成

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


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

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