HTML 前端 实例与教程 10

单元11JavaScript对象HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】11.1对象简介11.1.1访问对象的属性11.1.2访问对象的方法11.1.3创建JavaScript对象11.1.4创建对象实例11.1.5JavaScript类11.2Number对象11.2.1数字11.2.2精度11.2.3八进制和十六进制11.2.4Infinity11.2.5NaN11.3字符串对象11.3.1字符串长度11.3.2查找字符串11.3.3大小写转换11.3.4转为数组11.3.5特殊字符11.4日期对象11.4.1创建日期11.4.2获取日期11.4.3设置日期11.4.4日期比较11.5数组对象11.5.1创建数组11.5.2访问数组11.5.3数组属性和方法【商业实例】“仿写淘宝首页”项目——添加跳转链接任务一给分类模块添加跳转链接任务二给商品卡片添加跳转链接【综合实训】制作穿梭框功能组件【单元小结】目录【学习导读】在生活中，每一个具体的事物都属于某一个类别，例如电视属于家电类别，床属于家具类别，外套属于衣服类别。在JavaScript的世界里，几乎所有的数据都可以用对象来表示，对象在JavaScript中扮演着非常重要的角色，它们被广泛用于存储和操作数据，以实现面向对象编程，以及构建复杂的数据结构和应用程序。对象是JavaScript中的核心概念，对于理解和应用JavaScript编程至关重要。本单元将详细介绍JavaScript对象的使用方法。学习导读【学习目标】知识目标1．掌握JavaScript对象的访问方法。2．掌握JavaScript的字符串对象。3．掌握JavaScript的数组对象。能力目标1．能够独立创建普通对象。2．能够独立创建数组对象。3．能够独立创建日期对象。素质目标1．培养学生良好的编程能力。2．培养学生的分类能力。3．培养学生的信息收集能力。学习目标思维导图11.1对象简介JavaScript对象是一种具有属性和方法的复合数据类型，以键值对的形式组织和存储数据。对象是一种非常灵活的数据结构，可以用来表示和操作复杂的数据和逻辑关系。JavaScript对象由一组属性和方法组成。属性是对象的特征或数据，可以是基本数据类型（如字符串、数字、布尔值）、对象、函数等。每个属性都有唯一的键，通过键可以访问和操作属性的值。方法是对象的行为，是一种特殊类型的属性，同时也是一个函数。JavaScript提供了多个内置对象，比如字符串对象、日期对象、数组对象等。也可以自定义对象，并给对象添加属性和方法。11.1对象简介11.1.1访问对象的属性可以通过在对象名称后面加上一个点，再加上属性的键来访问对象的属性。例如，使用

可以访问对象person的name属性的值。可以使用对象名称加方括号（方括号中包含属性的键）来访问对象的属性。例如，使用person["name"]也可以访问对象person的name属性的值。无论是使用点表示法还是方括号表示法，属性的键都可以是一个字符串或一个变量。如果属性的键是一个变量，可以使用方括号表示法来动态地访问对象的属性。如果对象中不存在指定的属性，使用点表示法将返回undefined，而使用方括号表示法将返回undefined或抛出一个错误。1．点表示法2．方括号表示法11.1对象简介11.1.2访问对象的方法可以通过在对象名称后面加上一个点，再加上方法的键来访问对象的方法并执行它。例如，使用person.sayHello()可以调用对象person的sayHello()方法。可以使用对象名称加方括号（方括号中包含方法的键）来访问对象的方法并执行它。例如，使用person["sayHello"]()也可以调用对象person的sayHello()方法。无论是使用点表示法还是方括号表示法，方法的键都可以是一个字符串或一个变量。如果方法的键是一个变量，可以使用方括号表示法来动态地访问对象的方法。1．点表示法2．方括号表示法11.1对象简介11.1.3创建JavaScript对象1．对象字面量使用对象字面量可直接创建对象，即使用一对花括号，在其中定义属性和方法。例如创建一个对象，对象包括姓名和年龄属性，代码如下所示。2．构造函数constperson={name:"John",age:30};使用构造函数也可创建对象。可以自定义构造函数，然后使用new关键字来实例化一个对象。例如创建一个包含姓名和年龄属性的对象，代码如下所示。functionPerson(name,age){=name;this.age=age;}constperson=newPerson("John",30);11.1对象简介11.1.3创建JavaScript对象3．Object.create()方法所有的对象都是Object的实例，每一个对象都会从Ototype继承属性和方法，create()是Object自带的方法。可以使用Object.create()方法，在现有对象的基础上创建新对象。例如基于一个现有对象创建一个包含姓名和年龄属性的新对象，代码如下所示。constpersonPrototype={name:"John",age:30};constperson=Object.create(personPrototype);11.1对象简介11.1.3创建JavaScript对象4．工厂函数使用工厂函数可创建对象。工厂函数是一个返回对象的函数。例如使用工厂函数来创建对象，代码如下所示。functioncreatePerson(name,age){ return{name:name,age:age};}constperson=createPerson("John",30);11.1对象简介11.1.4创建对象实例创建对象实例是指通过调用构造函数来创建新的对象。对象实例是基于构造函数或类定义的对象模板的具体实体，它拥有该模板中定义的属性和方法。创建完对象实例后，可以使用new关键字来生成一个对象。例如，如果有一个构造函数Person()，可以通过newPerson()来创建一个Person的实例。这样的实例将继承构造函数中定义的属性和方法，并拥有自己的数据，代码如下所示。11.1对象简介11.1.4创建对象实例1．把属性添加到对象当创建了对象实例后就可以给对象添加属性，例如给myFather添加sex属性，代码如下所示。myFather.sex='male‘x=myFather.sex;执行以上代码后，x的值是male。11.1对象简介11.1.4创建对象实例2．把方法添加到对象在构造函数内部不仅可以添加属性，也可以添加方法，方法是附加在对象上的函数。在构造函数内部用function关键字来定义方法，例如在Person对象实例中定义changeName()方法，代码如下所示。然后调用changeName()函数来修改对象的lastName属性，代码如下所示。11.1对象简介11.1.5JavaScript类在JavaScript中，使用class关键字定义类，在类中通过constructor()方法来接收初始化类的参数。类可以具有构造函数，该构造函数在创建类的实例时自动调用，并用于初始化实例的属性。通过类，我们可以创建多个对象实例，每个实例都具有相同的属性和方法。类提供了一种更结构化和面向对象的方式来组织和操作代码，使代码更易于理解、扩展和维护。类可以用于创建复杂的数据结构、模块化的功能组件和面向对象的程序。010203JavaScript类是一种用于创建对象的蓝图或模板。类是一种特殊的函数，它可以包含属性和方法的定义，以描述对象的特征和行为。11.1对象简介11.1.5JavaScript类例如将构造函数Person()改写成类，代码如下所示（实例位置：单元11/11-1.html）。网页效果11.2Number对象11.2.1数字在JavaScript中，数字是一种基本的数据类型，用于表示数值。数字可以是整数或浮点数，可以使用数字字面量直接表示，例如42表示整数，3.14表示浮点数。JavaScript支持各种数学运算，如加法、减法、乘法和除法运算等。可以使用算术运算符（+、－、*、/）对数字进行基本运算，并可以使用括号来控制运算的优先级。11.2Number对象11.2.1数字JavaScript提供了一些内置对象和方法来处理数字。例如，Math对象提供了一些常用的数学函数，如Math.round()、Math.floor()、Math.random()等，使用示例如下。11.2Number对象11.2.2精度例如，对于某些小数计算，由于浮点数的精度有限，可能出现小数结果无法精确表示的情况。例如，0.1+0.2的结果在JavaScript中是.30000000000000004，而不是0.3。JavaScript中的数字精度指的是数字的精确度和有效位数。由于JavaScript使用双精度浮点数表示数字，因此存在一些精度问题。为了进行精确的数值计算，可以使用一些技巧和库。一种常见的方法是使用整数运算来代替浮点数运算，然后将结果转换为浮点数。另外，还可以使用专门用于精确计算的JavaScript库，如Big.js和Decimal.js。在JavaScript中，数字以64位浮点数的形式存储，其中52位用于表示有效数字（尾数），11位用于表示指数，1位用于表示符号。这种表示方法在大多数情况下提供了足够的精度，但对于某些特定的数值计算，可能会出现舍入误差和精度丢失的情况。11.2Number对象11.2.3八进制和十六进制八进制八进制是一种基于8的数字系统，使用0～7这8个整数来表示数值。在JavaScript中，可以通过在数值前面加上0o或0O来表示数值为八进制。例如，0o10表示八进制数值10，对应的十进制值是8。十六进制十六进制是一种基于16的数字系统，使用0～9和A～F（或a～f）这16个字符来表示数值。在JavaScript中，可以通过在数值前面加上0x或0X来表示数值为十六进制。例如，0x10表示十六进制数值10，对应的十进制值是16。11.2Number对象11.2.3八进制和十六进制使用八进制和十六进制可以方便地表示一些特定的数值，尤其是与位运算和字节操作相关的数值。八进制和十六进制的数值在JavaScript中会被自动转换为十进制，在进行数值计算时与十进制数值没有区别。可以使用toString()方法来将数据转换为十六进制、八进制、二进制。例如将十进制数128分别转换成十六进制、八进制和二进制，代码如下所示。11.2Number对象11.2.4Infinity当数字运算结果超出JavaScript所能表示的数字上限时，就变为特殊的无穷大值，在JavaScript中以关键字Infinity表示。同样地，当负数的值超出JavaScript所能表示的负数范围时，结果为负无穷大，在JavaScript中以－Infinity表示。Infinity是一个特殊的数值，它是不能被改变的。它是JavaScript中的一个内置常量，可以直接通过引用Infinity来使用。Infinity是一个数值，它遵循数值运算的规则。对Infinity进行加法、减法、乘法或除法运算，结果仍然是Infinity。Infinity与任何数值相乘的结果也都是Infinity。11.2Number对象11.2.5NaN在执行无效的数学操作时，会得到NaN，例如将非数字字符串转换为数字、进行除零运算。当数学操作无法生成有效的数值时，JavaScript会返回NaN作为结果。要判断一个值是否为NaN，可以使用全局函数isNaN()。该函数接收一个参数，并返回一个布尔值，表示参数是否为NaN。010203在JavaScript中，NaN表示非数字值。它是一个特殊的数值，用于表示无效的或不可表示的数字结果。11.2Number对象11.2.5NaN例如使用isNaN()全局函数来判断一个值是否NaN，代码如下所示。varx=1000/"Apple";isNaN(x);//返回truevary=100/"1000";isNaN(y);//返回false当数字除以0后会返回Infinity，Infinity也代表数字，所以会返回false，代码如下所示。varx=1000/0;isNaN(x);//返回false11.3字符串对象在JavaScript中，字符串对象是一种内置对象，用于处理和操作字符串。字符串对象提供了一系列属性和方法，用于对字符串进行各种操作和转换。字符串对象可以使用字符串字面量表示，例如conststr="Hello,World!";。也可以通过String()构造函数来创建对象实例，例如conststr=newString("Hello,World!");。不过，通常情况下更倾向于直接使用字符串字面量。11.3字符串对象使用单引号或双引号表示字符串，例如：varcarname="VolvoXC60";varcarname='VolvoXC60';可以使用索引来访问字符串中的字符，字符串的索引从零开始，所以字符串第一个字符的索引为0，第二个字符的索引为1，以此类推。varcharacter=carname[7];//表示字符串中第8个字符，也可能为空字符11.3字符串对象字符串中也可以嵌套引号，但需要和字符串外面的引号区分，当外面使用双引号时内部使用单引号；外面使用单引号时内部使用双引号，否则会被当作字符串结束符，例如：varanswer="It'salright";varanswer="Heiscalled'Johnny'";varanswer='Heiscalled"Johnny"';如果字符串内部和外面的引号一样，可以在字符串中使用转义字符（\），这样就不会把内部的引号当作字符串结束符了，例如：varanswer='It\'salright';varanswer="Heiscalled\"Johnny\"";11.3字符串对象11.3.1字符串长度在JavaScript中，字符串长度指的是字符串中包含的字符的数量。可以通过字符串对象的length属性来获取字符串长度。JavaScript中的字符串长度是以字符为单位的，而不是以字节或字为单位。对于大多数字符，每个字符占用一个字符位置。但对于一些特殊的Unicode字符，可能会占用多个字符位置。例如，对于仅包含英文字符的字符串，每个英文字符占用一个字符位置，因此字符串的长度等于其中字符的数量。例如，字符串"Hello"的长度为5。11.3字符串对象11.3.1字符串长度然而，对于包含非英文字符的字符串，如包含中文、日文或其他Unicode（全球字符编码标准）字符的字符串，一个字符可能会占用多个字符位置。这是因为这些字符可能由多个Unicode码点组成。在这种情况下，字符串的长度等于其中字符的数量，例如：vartxt='HelloWorld!';console.log(txt.length);//字符串长度为12vartxt2='中国，你好';console.log(txt2.length);//字符串长度为511.3字符串对象11.3.2查找字符串01OPTION使用字符串对象的indexOf()方法该方法接收一个参数，表示要查找的子字符串，如果子字符串存在，该方法返回子字符串在原字符串中首次出现的位置。如果子字符串不存在，则返回－1。代码如下所示。varstr="Helloworld,welcometotheuniverse.";varn=str.indexOf("welcome");console.log(n);//输出13，表示welcome从字符串中第13个位置开始出现11.3字符串对象11.3.2查找字符串02OPTION使用字符串对象的includes()方法。该方法接收一个参数，表示要查找的子字符串，该方法返回一个布尔值，表示原字符串中是否包含子字符串。例如在一个字符串中查找某子字符串是否出现，代码如下所示。varstr="Helloworld,welcometotheuniverse.";varn=str.includes("welcome");console.log(n);//输出true，表示原字符串中包含welcome11.3字符串对象11.3.2查找字符串03OPTION其他方法match()方法用来查找字符串中特定的字符，如果找到，则返回这个字符，代码如下所示。varstr="Helloworld!";console.log(str.match("world")+"<br>");//输出worldconsole.log(str.match("World")+"<br>");//输出nullreplace()方法用于替换字符串中的某些字符，第一个参数代表要替换的字符，第二个参数是用来替换的字符，代码如下所示。str="PleasevisitMicrosoft!"varn=str.replace("Microsoft","baidu");console.log(n);//输出'Pleasevisitbaidu'11.3字符串对象11.3.3大小写转换用于将字符串中的所有字符转换为大写形式，并返回转换后的新字符串。例如，对于字符串"Hello,World!"，使用toUpperCase()方法后，将得到"HELLO,WORLD!"。这两个方法都返回转换后的新字符串，而不会修改原字符串。因为JavaScript中的字符串是不可变的，所以在进行大小写转换时，会创建一个新的字符串对象。用于将字符串中的所有字符转换为小写形式，并返回转换后的新字符串。例如，对于字符串"Hello,World!"，使用toLowerCase()方法后，将得到"hello,world!"。toLowerCase()方法toUpperCase()方法11.3字符串对象11.3.4转为数组在JavaScript中，可以使用split()方法将字符串转换为数组。split()方法是字符串对象的一个方法，它接收一个参数，用于指定拆分字符串的分隔符，该方法将字符串分割成多个子字符串，并返回一个新的数组。例如，对于字符串"Hello,World!"，可以使用split()方法将其按逗号和空格分割为两个子字符串，代码如下所示。conststr="Hello,World!";constarr=str.split(",");console.log(arr);//["Hello","World!"]11.3字符串对象11.3.5特殊字符JavaScript中常见的特殊字符代码输出\'单引号\"双引号\\斜杆\n换行\r回车\ttab\b空格\f换页11.4日期对象11.4.1创建日期可以使用Date()构造函数来创建日期对象的实例，可以通过new关键字来定义日期对象。构造函数支持传入参数，如果不传入参数，则创建当前日期（精确到毫秒）；可以传入一个数字，表示从1970年1月1日以来的毫秒数；如果传入一个时间格式的字符串，则创建与该时间对应的日期；也可以分别传入年、月、日，创建与该年、月、日对应的日期。用不同方法创建日期，代码如下所示。newDate()//当前日期和时间newDate(1703143800000)//返回从1970年1月1日至今的毫秒数转换成日后（1日=86400000毫秒）对应的日期newDate('2023-12-21')newDate(year,month,day,hours,minutes,seconds,milliseconds)//newDate(2023,11,21,15,29,30,20)11.4日期对象11.4.2获取日期在JavaScript中，可以使用日期对象的get方法来获取日期的不同部分，例如年、月、日、小时、分钟和秒。日期对象的常用get方法方法描述getFullYear()获取日期对象的年份。getMonth()获取日期对象的月份（0-11，其中0表示一月）。getDate()获取日期对象的日期（1-31）。getDay()获取日期对象的星期几（0-6，其中0表示星期日）。getHours()获取日期对象的小时数（0-23）getMinutes()获取日期对象的分钟数（0-59）getSeconds()获取日期对象的秒数（0-59）11.4日期对象11.4.2获取日期通过使用这些get方法，我们可以获取日期对象的不同部分。例如获取当前时间的年和月，代码如下所示。constnow=newDate();constyear=now.getFullYear();constmonth=now.getMonth();console.log("Year:",year);//输出年份console.log("Month:",month);//输出月份11.4日期对象11.4.3设置日期在JavaScript中，使用日期对象的set方法来设置日期的不同部分，例如年份、月份、日期、小时、分钟和秒。日期对象的常用set方法方法描述setFullYear()设置日期对象的年份。接受一个参数，表示要设置的年份。setMonth()设置日期对象的月份。接受一个参数，表示要设置的月份（0-11，其中0表示一月）。setDate()设置日期对象的日期。接受一个参数，表示要设置的日期（1-31）。setHours()设置日期对象的小时。接受一个参数，表示要设置的小时数（0-23）。setMinutes()设置日期对象的分钟。接受一个参数，表示要设置的分钟数（0-59）。11.4日期对象11.4.3设置日期这些set方法可以单独使用，也可以组合使用，以设置日期对象的不同部分。例如，要设置日期对象的年份和月份，可以使用setFullYear()和setMonth()方法来完成。例如获取当前时间并修改时间为2022年1月1日12点30分，代码如下所示。constnow=newDate();now.setFullYear(2022);now.setMonth(0);now.setDate(1);now.setHours(12);now.setMinutes(30);now.setSeconds(0);console.log(now);//输出SatJan01202212:30:00GMT+0800(中国标准时间)11.4日期对象11.4.4日期比较01OPTION使用比较操作符进行日期比较JavaScript会将日期对象转换为对应的时间戳，然后进行比较。时间戳是表示从1970年1月1日午夜（UTC时间）到指定日期的毫秒数。因此，比较操作符通过比较日期对象的时间戳大小来判断日期的先后顺序。例如分别创建两个日期，并使用比较操作符比较其大小，代码如下所示。11.4日期对象11.4.4日期比较02OPTION使用日期对象的方法来进行日期的比较最常用的是getTime()方法，它返回日期对象的时间戳。可以通过比较两个日期对象的时间戳来判断它们的先后顺序。例如分别创建两个日期，使用getTime()方法将其转换成时间戳并比较其大小，代码如下所示。11.5数组对象11.5.1创建数组1．字面量表示法可以使用方括号来创建数组，方括号中包含多个值，值之间以逗号分隔。例如创建一个包含数字、字符串和布尔值的数组，代码如下。constarr=[1,2,3,"four",true];2．构造函数法可以使用Array()构造函数来创建数组对象，代码如下。constarr=newArray(1,2,3,"four",true);11.5数组对象11.5.2访问数组可以通过索引访问数组的元素，索引从0开始。可以使用方括号和索引来获取和修改数组的元素。例如，arr[0]表示获取数组的第一个元素，arr[2]=5表示将数组的第三个元素修改为5。例如有一个汽车数组，分别访问和修改数组中的第一个元素，代码如下所示。varmyCars=['Benz','Audi','Buick'];console.log(myCars[0]);//输出BenzmyCars[0]='奔驰';console.log(myCars[0]);//输出奔驰11.5数组对象11.5.3数组属性和方法数组常用的属性属性描述constructor返回对创建此对象的数组函数的引用。length设置或返回数组中元素的数目。prototype使您有能力向对象添加属性和方法。11.5数组对象11.