任务12.5 JavaScript内置对象

网页设计项目教程（HTML5+CSS3+JavaScript）模块12使用JavaScript脚本语言实现网页任务12.5JavaScript内置对象学习目标认识String、Array、Math、Date四个内置对象，会用其属性与方法处理字符、数组与日期知识目标理解内置对象的概念；掌握String对象的创建与常用方法；掌握Array对象的创建与常用方法；掌握Math、Date对象的特点与用法。能力目标能够创建字符串并使用方法操作字符串；能够创建数组并进行增删改查；能够使用Math对象完成数学运算；能够创建Date对象并格式化日期时间。素养目标体会面向对象编程思想；养成查阅文档的习惯；培养举一反三的学习能力；提升综合运用所学知识解决问题的能力。任务描述JavaScript提供了多个内置对象，通过其属性与方法能够实现复杂的功能作为一门基于对象的程序语言，JavaScript提供了多个内置对象，如String对象、Array对象、Math对象、Date对象。通过这些内置对象提供的属性和方法，开发人员能够实现复杂的功能。String对象用于表示和操作字符串；Array对象用于在单个变量中存储多个值；Math对象用于执行数学任务；Date对象用于处理日期与时间。本任务目标：掌握四个内置对象的创建方式，熟练运用其常用属性与方法，能够综合运用内置对象完成字符串处理、数组操作与日期时间处理。12.5.1String对象·创建字符串既能通过字面量创建字符串原始值，也能通过String构造函数创建字符串对象//两种方式创建字符串conststr01="你好";//字符串原始值conststr02=newString("你好");//字符串对象说明根据编码习惯，一般使用字符串字面量的方式创建字符串。字符串原始值和字符串对象共享很多属性和方法，也就意味着字符串原始值可调用String对象提供的属性和方法来操作字符串。String对象String是JavaScript内置对象，用于表示和操作字符。常用属性：length，用于获取字符串的长度；常用方法：indexOf()、toLowerCase()、toUpperCase()、slice()、split()、replace()、charAt()、concat()、trim()等，详见下页表12-6。12.5.1String对象·常用属性与方法length属性返回字符串的长度；常用方法覆盖查找、转换、截取、分割等操作length属性conststr01="你好";conststr02=newString("你好");console.log(str01.length,str02.length);//22要点中文字符按1个字符计算长度；字符串原始值可直接调用属性与方法；方法调用后一般返回新的字符串，原字符串不变。方法名说明indexOf()返回某个指定的字符串值在字符串中首次出现的位置toLowerCase()将字符串转换成小写toUpperCase()将字符串转换成大写slice()提取字符串的一部分并返回一个新字符串split()把字符串分割为字符串数组replace()在字符串中查找匹配的子串，并替换匹配的子串charAt()返回在指定位置的字符concat()连接两个或更多字符串，并返回新的字符串trim()去除字符串两边的空白表12-6String对象的常用方法案例演示：String对象常用方法的使用创建demo16.html，使用String对象的常用方法来操作字符串//引入的JavaScript代码（demo16.html）conststr01="长风破浪会有时，直挂云帆济沧海";console.log("“济”字在字符串中首次出现的位置为："+str01.indexOf("济"));conststr02="HELLO";console.log("字符串转为小写：",str02.toLowerCase());conststr03="world";console.log("字符串转为大写：",str03.toUpperCase());conststr04="书山有路勤为径";console.log("提取字符串片段：",str04.slice(2,4));conststr05="少壮不努力，老大徒伤悲";console.log("分割字符串为数组：",str05.split("，"));conststr06="苦海无涯苦作舟吗？";console.log("替换字符串的部分字符：",str06.replace("吗？","。"));conststr07="咬定青山不放松";console.log("获取字符串的第2号位的字符：",str07.charAt(2));conststr08="立根原在破岩中";console.log("将字符串连接起来：",str07.concat("，",str08));conststr09="锲而不舍，金石可镂";console.log("去除字符串的首尾空格：",str09.trim());开发者工具·ConsoleConsole>“济”字在字符串中首次出现的位置为：9>字符串转为小写：hello>字符串转为大写：WORLD>提取字符串片段：山有>获取字符串的第2号位的字符：青slice(2,4)提取索引2～3的字符；split("，")按中文逗号分割成数组。图12-22String对象常用方法的使用12.5.2Array对象·创建数组可以通过字面量和Array构造函数两种方式创建数组，一般使用字面量方式//字面量方式创建数组constfruits=["苹果","梨子","哈密瓜","西瓜"];

//Array构造函数创建数组constanimals=newArray("孔雀","熊猫","狮子","老虎");说明Array是JavaScript内置对象，用于在单个变量中存储多个值。数组中的每个值都有对应的索引号，索引号从0开始；通过「数组名[索引号]」即可访问对应的元素。Array对象常用属性：length，设置或获取数组元素的个数；常用方法：indexOf()、join()、push()、unshift()、pop()、shift()、slice()、concat()、filter()等，详见下页表12-8。12.5.2Array对象·常用属性与方法length属性可获取、设置数组的长度；常用方法覆盖查找、增删、截取、过滤等操作length属性constfruits=["苹果","梨子","哈密瓜","西瓜"];console.log(fruits.length);//4//修改fruits数组长度为2fruits.length=2;console.log(fruits);//["苹果","梨子"]要点设置length小于原长度时，多余的元素会被删除；push/pop操作数组末尾，unshift/shift操作数组开头。方法名说明indexOf()搜索数组中的元素，并返回它所在的位置join()把数组的所有元素放入一个字符串push()向数组的末尾添加一个或更多元素unshift()向数组的开头添加一个或更多元素pop()删除数组的最后一个元素并返回删除的元素shift()删除并返回数组的第一个元素slice()选取数组的一部分，并返回一个新数组concat()连接两个或更多的数组，并返回结果filter()检测数值元素，并返回符合条件所有元素的数组表12-8Array对象的常用方法案例演示：Array对象常用方法的使用创建demo17.html，使用Array对象的常用方法来操作数组//引入的JavaScript代码（demo17.html）constarray01=["西游记","水浒传","红楼梦","三国演义"];console.log("“红楼梦”在数组中的位置（索引号）：",array01.indexOf("红楼梦"));constarray02=["造纸术","指南针","火药","印刷术"];console.log("将数组中的所有元素放入一个字符串：",array02.join("，"));constarray03=["兰","竹"];array03.push("菊");array03.unshift("梅");array03.pop();array03.shift();console.log("增删元素后的数组：",array03);constarray04=["诗","书","礼","乐"];console.log("选取数组的一部分：",array04.slice(1,3));console.log("连接多个数组：",array01.concat(array02,array04));constarray05=array04.filter(function(item){returnitem!="礼";});console.log("返回符合条件的元素：",array05);开发者工具·ConsoleConsole>“红楼梦”在数组中的位置（索引号）：2>增删元素后的数组：["兰","竹"]>选取数组的一部分：["书","礼"]>返回符合条件的元素：["诗","书","乐"]push→unshift→pop→shift依次在末尾加「菊」、开头加「梅」、删末尾、删开头，最终为["兰","竹"]。图12-23Array对象常用方法的使用12.5.3Math对象Math对象具有与数学相关的常用属性和方法，用于执行数学任务特点与String、Array不同，Math不是一个构造器，其方法和属性都是静态的，如引用圆周率的写法是Math.PI。常用属性（表12-9）PI：返回圆周率（约等于3.14159）；E：返回算术常量e，即自然对数的底数（约等于2.718）。方法说明max(x,y,...,n)返回x,y,z,...,n中的最大值min(x,y,...,n)返回x,y,z,...,n中的最小值pow(x,y)返回x的y次幂random()返回0~1之间的随机数表12-10Math对象的常用方法（一）方法说明round(x)四舍五入ceil(x)对数进行上舍入floor(x)对x进行下舍入表12-10Math对象的常用方法（二）案例演示：Math对象常用方法的使用创建demo18.html，通过Math对象的常用方法执行数学任务//引入的JavaScript代码（demo18.html）constnum01=Math.max(12,10,44);console.log("获取“12,10,44”中的最大值：",num01);constnum02=Math.min(12,10,44);console.log("获取“12,10,44”中的最小值：",num02);constnum03=Math.pow(2,3);console.log("获取2的3次幂：",num03);constnum04=Math.random();console.log("获取0~1之间的随机数：",num04);constnum05=Math.round(3.56);console.log("获取3.56四舍五入的结果：",num05);constnum06=Math.ceil(3.56);console.log("获取3.56上舍入的结果：",num06);constnum07=Math.floor(3.56);console.log("获取3.56下舍入的结果：",num07);舍入方法对比对3.56而言：round四舍五入得4；ceil向上取整得4；floor向下取整得3。开发者工具·ConsoleConsole>最大值：44>最小值：10>2的3次幂：8>随机数：0.439452...>四舍五入：4>上舍入：4>下舍入：3图12-24Math对象常用方法的使用12.5.4Date对象·创建Date对象通过Date构造函数创建Date对象，有四种创建方式constdate01=newDate();constdate02=newDate(milliseconds);constdate03=newDate(dateString);constdate04=newDate(year,month,day,hours,minutes,seconds,milliseconds);

//实例constdate02=newDate(1712630695346);constdate03=newDate("2024-03-1508:30:00");constdate04=newDate(2021,3,15,8,30,0);方式说明无参数表示实例化时刻的时间时间戳1970-01-01起的毫秒数dateString表示日期的字符串值多个参数年、月、日、时、分、秒、毫秒使用第四种方式的注意事项·年份（year）为4位整数；·月份（month）为0（1月）～11（12月）之间的整数，比实际月份小1；·小时（hours）为0～23之间的整数，其中23表示晚上11点；·分钟（minutes）、秒钟（seconds）都是0～59的整数；·毫秒（milliseconds）是0～9999之间的整数。12.5.4Date对象·常用方法Date对象的常用方法分为获取类（getXXX）与设置类（setXXX）两组获取方法说明getDate()返回一个月中的某一天(1~31)getDay()返回一周中的某一天(0~6)getFullYear()以四位数字返回年份getHours()返回小时(0~23)getMinutes()返回分钟(0~59)getMonth()返回月份(0~11)getSeconds()返回秒数(0~59)getMilliseconds()返回毫秒(0~999)getTime()返回1970年1月1日至今的毫秒数表12-11Date对象的常用方法（获取类）设置方法说明setDate()设置月的某一天(1~31)setFullYear()设置年份（四位数字）setHours()设置小时(0~23)setMinutes()设置分钟(0~59)setMonth()设置月份(0~11)setSeconds()设置秒钟(0~59)setTime()以毫秒设置Date对象表12-11Date对象的常用方法（设置类）注意：getMonth()返回0～11，比实际月份小1，格式化时需要加1。案例演示：时间对象转换成字符串创建demo19.html，创建时间对象并格式化时间，将时间对象转换成字符串//引入的JavaScript代码（demo19.html）functionformatDate(timeStamp){vardate=newDate(timeStamp);constyear=date.getFullYear();constmonth=date.getMonth()+1;constday=date.getDate();consthours=date.getHours();constminutes=date.getMinutes();constseconds=date.getSeconds();constweek=date.getDay();constweekMap=["一","二","三","四","五","六","日"];consttimeStr=year+"年"+month+"月"+day+"日"+""+hours+":"+minutes+":"+seconds;returntimeStr+"星期"+weekMap[week];}

constnow=newDate();//此刻的时间对象constnowStamp=now.getTime();//时间戳（毫秒数）consttimeStr=formatDate(nowStamp);console.log("格式化后的时间表示为：",timeStr);思路先取时间戳，再在函数内还原成Date对象，逐项取出年月日时分秒与星期后拼接成字符串。开发者工具·ConsoleConsole>格式化后的时间表示为：2024年3月15日8:30:0星期五图12-25时间对象转换成字符串四个内置对象对比String、Array、Math、Date各司其职，创建方式与调用形式不尽相同内置对象主要用途创建方式调用示例String对象表示和操作字符字面量/newString()实例方法：str01.indexOf("济")Array对象在单个变量中存储多个值字面量/newArray()实例方法：arr01.push("菊")Math对象执行数学任务不是构造器，无需new静态成员：Math.PI、Math.random()Date对象处理日期与时间newDate(...)实例方法：date01.getFullYear()记忆要点·String与Array习惯用字面量创建；·Math的属性与方法都是静态的，直接用「Math.成员」调用；·Date只能用构造函数创建。使用建议·不必死记全部方法，记住常用方法、会用文档查阅即可；·先想清楚要「做什么」，再去找对应的对象与方法。任务实施：计算7天后的日期定义processDate函数，解析日期字符串，打印7天后的日期及其是当年的第几天functionprocessDate(dateStr){//1.解析日期字符串，创建Date对象vardate=