第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()。

语法：

1 2	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 字符串是引号中的零个或多个字符。

语法：

1 2	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(c)	将字符串转换为数组
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>