网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象基础-内置对象

JavaScript是一种基于对象的编程语言，JavaScript将对象分为内置对象、浏览器内置对象和自定义对象三种。本章主要讲述常用JavaScript内置对象。

JavaScript语法基础

内置对象目录

JavaScript对象基础8.1JavaScript对象概述8.2对象8.3内置对象习题88.3内置对象8.3.1数学对象1.数学对象的属性8.3内置对象使用Math对象的属性的语法如下：var变量名=Math.属性;例如，引用Math对象的PI属性，代码为：varpi_value=Math.PI;8.3内置对象2.数学对象的方法8.3内置对象使用Math对象的方法的语法如下：var变量名=Math.方法(参数);例如：varsqrt_value=Math.sqrt(16);8.3内置对象8.3内置对象保留小数位数的toFixed()函数和toPrecision()函数的使用格式如下：数字.toFixed(n)数字.toPrecision(n)例如，下面代码：varnum=3021.1258;vardec1=num.toFixed(3);//保留3位小数，结果为3021.126vardec2=num.toPrecision(6);//保留6位数字，结果为3021.138.3内置对象8.3.2字符串对象1.字符串对象的创建（1）直接声明字符串变量语法格式如下：var字符串变量名=字符串;例如，创建字符串对象st，并对其赋值，代码如下：varst="HelloWorld";8.3内置对象（2）使用new关键字创建字符串对象使用new关键字创建字符串对象的语法格式如下：var字符串对象名=newString(字符串);8.3内置对象2.String对象的属性String对象的属性只有3个，见表。8.3内置对象3.String对象的方法8.3内置对象【例8-6】创建一个String对象，调用anchor方法创建一个锚点，该锚点的name属性为Anchor1。本例文件8-6.html在浏览器中显示如图8-6所示。8.3内置对象<scripttype="text/javascript">varstrVariable="欢迎访问网易/";//创建字符串对象

strVariable=strVariable.anchor("Anchor1");//调用anchor()方法创建一个a元素字符串

alert(strVariable);//在对话框中显示strVariable的值</script>运行上面代码，在浏览器中将弹出一个对话框，其中显示strVariable的值为：<aname="Anchor1">欢迎访问网易/</a>8.3内置对象8.3.3日期对象1.创建日期对象创建Date对象必须使用new关键字，创建Date对象有4种方法。方法1的，其语法格式为：var日期对象名=newDate();方法2的，其语法格式为：var日期对象名=newDate(日期字符串);方法3的，其语法格式为：var日期对象名=newDate(年,月,日[,时,分,秒[,毫秒]])方法4的，其语法格式为：var日期对象名=newDate(毫秒)8.3内置对象2.Date对象的方法8.3内置对象【例8-7】显示当前的日期、时间。本例文件8-7.html在浏览器中显示如图8-7所示。<scripttype="text/javascript">vard=newDate();//创建一个日期对象，假设当前系统日期时间是：2023/8/323:8:19document.write(d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+"<br>");document.write(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()+":"+d.getMilliseconds()+"<br>");document.write(d.getTime()+"<br>");document.write("当前日期时间:"+d.toLocaleString()+"<br>");</script>8.3内置对象3.日期的运算1）日期对象与整数年、月、日相加或者相减，得到一个新的日期对象。例如，设置日期、年，代码如下：d=newDate();//创建一个日期对象，假设当前日期是：2023/8/323:13:52alert(d.toLocaleString());//显示当前的日期和时间：2023/8/323:13:52d.setDate(25);//设置日期在25号alert(d.toLocaleString());//显示设置新日期后的日期：2023/8/2523:13:52d.setYear(2000);//设置年为2000年alert(d.toLocaleString());//显示设置新日期后的日期：2000/8/2523:13:528.3内置对象例如，计算当前日期10天后的日期，计算当前时间20分钟前的时间，代码如下：vard1=newDate();//创建一个对象d1，假设当前日期是：2023/8/323:18:21d1.setDate(d1.getDate()+10);//返回一个月中的日期，然后加上10，最后把d1的值设置成新的日期对象document.write("当前日期的10天后:"+d1.toLocaleString()+"<br>");//2023/8/1323:18:21vard2=newDate();//创建一个对象d2，假设当前日期是：2023/8/323:18:21d2.setMinutes(d2.getMinutes()-20);document.write("当前时间的20分钟前:"+d2.toLocaleString()+"<br>");//2023/8/322:58:218.3内置对象【例8-8】获取当前时间的前n天或后n天的日期。本例文件8-8.html在浏览器中显示如图8-8所示。<scripttype="text/javascript">functionshowdate(n){vard=newDate();//返回当前的日期和时间

d.setDate(d.getDate()+n);//设置成新的日期对象

dd=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();returndd;}document.write("今天是："+showdate(0)+"<br>");document.write("昨天是："+showdate(-1)+"<br>");document.write("明天是："+showdate(1)+"<br>");document.write("5天前是："+showdate(-5)+"<br>");document.write("10天后是："+showdate(10)+"<br>");</script>8.3内置对象2）两个日期相减，得到两个日期之间的毫秒数。通常会将毫秒转换成天、小时、分、秒等。例如，下面代码得到间隔天数。vard1=newDate("2025/5/10");vard2=newDate("2025/5/13");varoneday=24*60*60*1000;//1天的毫秒数vardiff=Math.ceil((d2.getTime()-d1.getTime())/(oneday));//两个日期相减document.write("相差:"+diff+"天");//相差:3天8.3内置对象例如，下面代码获取两日期月份之差。vard1=newDate("2025/5/13");vard2=newDate("2025/10/10");vardiff=(d1.getFullYear()-d2.getFullYear())*12+d1.getMonth()-d2.getMonth();document.write("相差:"+diff+"月");//相差:-5月8.3内置对象例如，下面代码得到间隔时间。vard1=newDate("2025/10/1010:06:01");vard2=newDate("2025/10/1020:30:58");vard3=d1-d2;varh=Math.floor(d3/3600000);varm=Math.floor((d3-h*3600000)/60000);vars=(d3-h*3600000-m*60000)/1000;document.write("相差:"+h+"小时"+m+"分"+s+"秒");//相差:-11小时35分3秒8.3内置对象3）可以比较两个日期的大小，得到布尔值true或false。例如下面代码：vard1=newDate(2025,4,13,12,22,51,380);vard2=newDate(2025,1,25,22,15,35,491);document.write(d1<d2);//false8.3内置对象例如，下面的代码将当前日期与2025年11月20日做比较。vard=newDate();d.setFullYear(2025,10,20);//注意这里的10代表11月dstring="今天是"+d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";vartoday=newDate();if(d>today){document.write(dstring+"之前");}else{document.write(dstring+"之后");}8.3内置对象8.3.4数组对象1.定义数组（1）常规方式用Array()构造函数和new关键字创建指定长度的数组对象，语法格式如下：var数组名=newArray([size]);例如，下面代码分别定义名为cars1长度为0和名为cars2长度为5的数组对象：varcars1=newArray();varcars2=newArray(5);cars2数组的下标元素为cars2[0]、cars2[1]、cars2[2]、cars2[3]和cars2[4]。8.3内置对象（2）简洁方式语法格式如下：var数组名=newArray(元素1,元素2,元素3,…);例如，下面代码定义数组包含元素“TOYOTA”、“Audi”、“BMW”的数组cars3。varcars3=newArray("TOYOTA","Audi","BMW");8.3内置对象（3）字面方式语法格式如下：var数组名=[元素1,元素2,元素3,…];例如，下面代码定义数组同样包含元素“TOYOTA”、“Audi”、“BMW”的数组cars4。varcars4=["TOYOTA","Audi","BMW"];8.3内置对象2.数组对象的属性例如，声明元素个数为3的数组对象myArr，并赋予初始值80、70、90，输出length属性，将length修改为2，代码如下：varmyArr=newArray(80,70,90);//创建数组document.write("数组的个数:"+myArr.length);//输出数组的元素个数myArr.length=2;//修改元素个数8.3内置对象3.数组对象的方法8.3内置对象4.访问数组可以对数组元素赋值或取值，其语法格式如下：数组变量[i]=值;//为数组元素赋值，i是下标序列号变量名=数组变量[i];//用数组元素为变量赋值8.3内置对象5.添加数组元素（1）直接为元素赋值例如，下面代码先声明一个空的数组cars，然后分别为下标为0、1、2、4的元素赋值。varcars=newArray();cars[0]="Tesla";cars[1]="TOYOTA";cars[2]="Benz";cars[4]="Audi";8.3内置对象（2）用push()方法追加元素例如，以下代码先声明一个数组cars，然后调用数组的push()方法在数组尾部追加元素。varcars=newArray();cars.push("Tesla");cars.push("TOYOTA");cars.push("Benz");cars.push("BMW");cars.push("Audi");document.write(cars);//显示所有数组元素8.3内置对象6.遍历数组（1）使用for循环变量数组【例8-9】遍历数组cars，本例文件8-9.html在浏览器中显示如图8-9所示。8.3内置对象<scripttype="text/javascript">varcars=newArray("Tesla","TOYOTA","Benz","BMW","Audi");

for(vari=0;i<cars.length;i++){document.write(i+":"+cars[i]);document.write("<br>");}</script>8.3内置对象（2）使用forin循环遍历数组例如，下面代码，与例8-9运行结果相同。varcars=newArray("Tesla","TOYOTA","Benz","BMW","Audi");for(variincars){document.write(i+":"+cars[i]);document.write("<br>");}8.3内置对象7．删除元素（1）用pop()方法删除数组元素pop()方法的语法格式为：数组名.pop()例如，以下代码先使用pop()方法删除尾部的1个元素，然后将数组元素个数设置为1个。varcars=["Tesla","TOYOTA","Benz","BMW"];varcar=cars.pop();//从尾部弹出一个元素document.write(car+"<br>");//BMWdocument.write(cars.length+""+cars+"<br>");//3Tesla,TOYOTA,Benzcars.length=1;//将数组元素个数设置为1个document.write(cars.length+""+cars);//1Tesla8.3内置对象（2）用shift()方法删除数组元素shift()方法的语法格式为：数组名.shift()例如，以下代码从头部删除元素。varcars=["Tesla","TOYOTA","Benz","BMW"];varcar=cars.shift();//从头部删除一个元素Tesladocument.write(car+"<br>");//Tesladocument.write(cars.length+""+cars+"<br>");//3TOYOTA,Benz,BMW8.3内置对象（3）用splice()方法删除数组元素splice()方法从指定位置删除指定的元素，并缩减数组长度，语法格式为：数组名.splice(索引位置,删除个数)例如，以下代码从索引位置1开始，删除2个元素。varcars=["Tesla","TOYOTA","Benz","BMW"];varcar=cars.splice(1,2);//从下标1的位置开始，删除2个元素document.write(car+"<br>");//TOYOTA,Benzdocument.write(cars.length+""+cars+"<br>");//2Tesla,BMW8.3内置对象8．插入数组元素（1）用unshift()方法插入元素unshift()方法向数组的开头添加一个或更多元素，并返回新的长度。语法格式为：数组名.unshift(元素1,元素2,元素3,…)例如，以下代码先定义了一个初始化元素的数组fruits，然后调用数组的unshift()方法在数组头部插入两个元素。varfruits=["Banana","Orange","Apple","Mango"];fruits.unshift("Lemon","Pineapple");document.write(fruits);//Lemon,Pineapple,Banana,Orange,Apple,Mango8.3内置对象（2）用splice()方法插入元素语法格式为：数组名.splice(索引位置,删除个数,插入元素1,插入元素2,…,插入元素n)例如，以下代码先定义了一个初始化元素的数组fruits，然后调用数组的splice()方法从索引位置2上删除0个元素，插入3个元素。varfruits=["Banana","Orange","Apple","Mango"];fruits.splice(2,0,"Lemon","Kiwi","Cherries");document.write(fruits);//Banana,Orange,Lemon,Kiwi,Cherries,Apple,Mango8.3内置对象9．合并数组concat()方法将多个数组连接成一个新数组，语法格式为：var数组名=数组名1.concat(数组名2,数组名3,…,数组名n);例如，以下代码在arr2数组后连接arr1、arr3数组，形成一个新数组newArr。vararr1=[1,2];vararr2=[11,22,33];vararr3=["333","444"];varnewArr=arr2.concat(arr1,arr3);document.write(newArr);//11,22,33,1,2,333,4448.3内置对象10．数组转字符串join()方法把数组的所有元素合并成一个用指定分隔符分隔的字符串。语法格式为：数组名.join(分隔符)例如，以下代码分别用指定分隔符和默认分隔符转换成字符串并显示。varfruits=["Banana","Orange","Apple","Mango"];varfruitsString=fruits.join("->");//分隔符是"->"document.write(fruitsString+"<br>");//Banana->Orange->Apple->MangovarfruitsString=fruits.join();//默认分隔符是","document.write(fruitsString+"<br>");//Banana,Orange,Apple,Mango8.3内置对象11．数组元素反序reverse()方法将数组中的元素按相反顺序排列，而且是改变当前的数组，不创建新的数组。语法格式为：数组名.reverse()例如，以下代码直接在number数组中对元素反序排列。varnumber=["111","222","333","444"];number.reverse();document.write(number);//444,333,222,1118.3内置对象12．数组元素的排序sort()方法将数组中的元素按照默认的规则排序，语法格式为：数组名.sort()例如，以下代码：varfruits=newArray();fruits[0]="Banana";fruits[1]="Orange";fruits[2]="Apple";fruits[3]="Mango";document.write("排序前:"+fruits+"<br>");//Banana,Orange,Apple,Mangofruits.sort();document.write("排序后:"+fruits);//Apple,Banana,Mango,Orange8.3内置对象13．二维数组（1）直接定义并且初始化这种方法在元素数量少的情况下可以用。例如，以下代码：vararr=[["0-0","0-1","0-2"],["1-0","1-1","1-2"],["2-0","2-1","2-2"]];（8.3内置对象（2）未知长度的二维数组构造动态二维数组的方法步骤如下：1）先定义一维数组：vararr=newArray();2）构造二维数组，每一个一维数组的元素都声明为一个新数组：arr[0]=newArray();arr[1]=newArray();arr[2]=newArray();3）给数组元素赋值：arr[0][0]="0-0";arr[0][1]="0-1";arr[1][0]="1-0";arr[1][1]="1-1";8.3内置对象【例8-10】构造二维数组，本例文件8-10.html在浏览器中显示如图8-10所示。<scripttype="text/javascript">vararr=newArray();//先声明一维数组

n=10;//一维长度为n,n为变量，可以根据实际情况改变

m=5;//一维数组里面每个元素数组可以包含的数量p，p也是一个变量

for(vari=0;i<n;i++){arr[i]=newArray();//每一个一维数组中的元素都是一个数组，构造二维数组

for(varj=0;j<m;j++){arr[i][j]=i.toString()+"-"+j.toString()+",";//将变量初始化

}}//按行、列显示二维数组中的元素

varn=arr.length;//获取arr的元素个数

varm=arr[0].length;//获取子数组的元素的个数

for(vari=0;i<n;i++){for(varj=0;j<m;j++){document.write(arr[i][j]);}document.write("<br>")}</script>8.3内置对象8.3.5扩展运算符扩展运算符（spreadoperator）是ES6的新增语法，用三个点（...）表示。1．在函数调用中使用扩展运算符例如，以下代码演示了如何使用扩展运算符将数组转为函数参数：functionmyFunc(a,b,c){document.write(a+b+c);}letnumbers=[1,2,3];//数组myFunc(...numbers);//把数组用扩展运算符转为函数的多个参数。输出:6document.write("<br>");myFunc(numbers[0],numbers[1],numbers[2]);//传入3个参数，不用…运算符 8.3内置对象2．在数组字面量中使用扩展运算符例如，以下代码演示了如何使用扩展运算符合并两个数组：letarr1=[1,2,3];letarr2=[4,5,6];letcombined1=[...arr1,...arr2];//使用扩展运算符合并两个数组letcombined2=[...arr2,...arr1];//不同的排列方式合并为不同的顺序document.write(combined1+"<br>");//输出:[1,2,3,4,5,6]document.write(combined2);//输出:[4,5,6,1,2,3]8.3内置对象使用扩展运算符向数组中添加元素，代码如下：letarr3=['this','is','an'];arr3=[...arr3,'array'];//添加元素document.write(arr3);//输出:['this','is','an','array']8.3内置对象使用扩展运算符和Math.min/Math.max方法获得数值数组中的最小值/最大值，代码如下：constarr4=[1,-1,0,5,3];constmin=Math.min(...arr4);constmax=Math.max(...arr4);document.write("min=",min,"max=",max);//输出:min=-1max=58.3内置对象使用扩展运算符将一个字符串分解成单个字符的数组，代码如下：conststr='Hello