Web前端开发（JavaScript+jQuery）课件 项目 2数组与对象

Web前端技术

数组与对象目录2.1数组对象2.2☞点击查看本小节知识架构☞点击查看本小节知识架构

数组2.1.1初始数组数组（array）是存储一系列变量的组合，它有一个或多个元素组成，各个元素之间用逗号分割。vararr=['a','b','c'];2.1.2创建数组实例化Array对象的方式创建数组是通过new关键字实现的。1.使用Array对象创建数组varname=newArray('Lucy','Jack','Limin');//元素值类型为字符型varage=newArray(18,38,62,44);//元素值类型为数值型varmix=newArray(112,'abc',null,true,undefined);//元素值类型为混合型vararrl=newArray（）；//或vararr2=newArray：//空数组2.1.2创建数组使用“[]”创建数组的方式与Array()对象的使用方式类似，只需将newArray()替换为[]即可。2.使用“[]”创建数组varweather=['wind'，'fine'，]；//相当于：newArray（'wind'，'fine'，）varempty=[];//相当于：newArrayvarmood=["sad"，empty×3，"hAppy"];//控制台输出mood：（5）varmood=['sad',,'hAppy'];控制台输出mood：（3）2.1.3数组的基本操作Array对象提供的length属性可以获取数组的长度，其值为数组元素最大下标加1。1.获取数组长度vararrl=[78,88,98];vararr2=['a',,,'b','c'];console.log（arrl.length）；//输出结果为：3console.log（arr2.length）；//输出结果为：52.1.3数组的基本操作访问数组元素：数组创建完成后，若想要查看数组中某个具体的元素，可以通过“数组名[下标]”的方式获取指定下标的值。2.数组的访问与遍历vararr=['Limin','JavaScript',1156,true];console.log(arr[0]);2.1.3数组的基本操作遍历数组元素：依次访问数组中所有元素的操作，可以使用for或for...in语句。2.数组的访问与遍历vararray=[1,2,3,4,5];//定义一个数组//使用for...in语句遍历数组for(varindexinarray){varelement=array[index];console.log(element);}2.1.3数组的基本操作数组创建后，可以根据实际需求，通过自定义数组元素下标的方式添加元素。3.添加数组元素vararr=['Honghong',‘Jim’];arr[2]='Tom';arr[3]='Jack';console.log(arr);//输出结果:（4）["Honghong"，"Jim"，"Tom"，"Jack"]2.1.3数组的基本操作修改元素与添加元素的使用方式相同，不同的是修改元素是为已含有值的元素重新赋值。4.修改元素vararr=['a','b','c','d'];arr[2]=123;arr[3]=456;console.log(arr);//输出结果：（4）["a"，"b"，123，456]2.1.3数组的基本操作可以利用delete关键字删除该数组元素的值。5.元素的删除varstu=['Tom','Jimmy','Lucy'];console.log（stu）；//输出结果：（3）["Tom"，"Jimmy"，"Lucy"]deletestu[1]；

//删除数组中第2个元素console.log（stu）；//输出结果：（3）["Tom"，empty，"Lucy"]2.1.4数组的排序重复走访过要排序的数列，一次比较两个数，如果顺序错误就进行交换，直到没有再需要交换。1.冒泡排序2.1.4数组的排序在未排序的数组中找到最小或者最大的元素，存放在排序数组的起始位置。然后再从未排序的数列中去找到这个数组中第二大或这第二小的数放在已排序的数之后，以此类推，不断重复直到所有元素排列完毕。2.选择排序2.1.4数组的排序将一个未排序的元素插入到已经排序好的数组中，从而使得已排序的数组增加一个元素，通过插入不断完善已排序数组。3.插入排序2.1.4数组的排序三种排序方式优劣比较：名称优点缺点冒泡排序稳定性好；慢，每次只能移动相邻两个数据。选择排序移动数据的次数已知（n-1次）比较次数多，是一种不稳定的排序方法。插入排序稳定性好，速度快；比较次数不一定，比较次数越少，插入点后的数据移动越多，特别是当数据总量庞大的时候，但用链表可以解决这个问题。2.1.5常见数组方法JavaScript中可以利用Array对象提供的方法，实现在数组的末尾或开头添加数组的新元素，或在数组的末尾或开头移出数组元素。利用这些方法可以模拟栈和队列的操作。1.栈和队列方法方法名称功能描述push()将一个或多个元素添加到数组的末尾，并返回数组的新长度unshift()将一个或多个元素添加到数组的开头，并返回数组的新长度pop()从数组的末尾移出并返回一个元素，若是空数组则返回undefinedshift()从数组的开头移出并返回一个元素，若是空数组则返回undefined2.1.5常见数组方法在开发中，若要检测给定的值是否是数组，或是查找指定的元素在数组中的位置，则可以利用Array对象提供的检索方法。2.检索方法方法名称功能描述includes()用于确定数组中是否含有某个元素，含有返回true，否则返回falseArray.isArray()用于确定传递的值是否是一个Array，是返回true，不是返回falseindexOf()返回在数组中可以找到给定值的第1个索引，如果不存在，则返回-1lastIndexOf()返回指定元素在数组中的最后一个的素引，如果不存在则返回-12.1.5常见数组方法在项目开发中,若需要将数组转换为字符串,则可以利用JavaScript提供的join()和toString()方法实现。3.数组转字符串方法名称功能描述join()将数组的所有元素连接到一个字符串中。toString()返回一个字符串，表示指定的数组及其元素。2.1.5常见数组方法JavaScript还提供了很多其他常用的数组方法。例如，合并数组、数组浅拷贝、颠倒数组元素的顺序等。4.其他方法方法名称功能描述sort()对数组的元素进行排序，并返回数组。fill()用一个固定值填充数组中指定下标范围内的全部元素reverse()颠倒数组中元素的位置splice()对一个数组在指定下标范围内删除或添加元素slice()从一个数组的指定下标范围内拷贝数组元素到一个新数组中concat()返回一个合并两个或多个数组后的新数组2.1.5常见数组方法一群猴子排成一圈，按“1，2，......，n”依次编号。然后从第1只开始数，数到第m只，把它踢出圈，其后的猴子再从1开始数，数到第m只，再把它踢出去·....·.如此不停地进行下去，直到最后只剩下一只猴子为止，那只猴子就是我们要找的大王。5.案例--猴子选大王2.1.5常见数组方法模拟游戏：假设n（猴子总数）：8、m（踢出圈的）：3；第一圈：踢出的猴子编号为3、6，位置编号为3、6。第二圈：踢出的猴子编号为1、5，位置编号为9、12。第三圈：踢出的猴子编号为2、8，位置编号为15、18。第四圈：无。第五圈：踢出的猴子编号为4，位置编号为21。得出猴王编号：75.案例--猴子选大王实现思路：通过prompt()接收用户传递的猴子总数n和踢出的第m只猴子；利用数组保存所有猴子的编号（1~n）；设置一个变量i，记录每次参与游戏（报数）的猴子位置；通过while循环，只要猴子数组内元素个数大于1，就继续循环；在循环中判断当前猴子的位置i与m求余是否为0，若为零，删除该数组元素。提示：通过出栈的方式取出猴子，如判断不为0，再将该元素入栈。5.案例2.1.5常见数组方法通常使用3个下拉菜单分别表示省份、城市和区域，为了使代码更好维护，可以利用数组存储数据，再创建函数来控制二三级下拉菜单。1.动态生成下拉菜单动手实践：三级联动菜单的实现functioncreateOption(obj，data){for(variindata){varop=newOption(data[i]，i);obj.options.add(op);}}varprovince=document.getElementById(provincecreateOption(province，provinceArr);用户选择完省份后，其后下拉列表中自动获取该省份的所有城市，并依次类推，选择完城市后，其后的下拉列表中自动获取该城市中的所有区域。2.实现下拉菜单三级联动动手实践：三级联动菜单的实现//获取城市下拉菜单的元素对象varcity=document.getElementById('city’);//为省份下拉列表添加事件province.onchange=function(){optioncity.options.length=0；createOption(city，cityArr[province.value]);}编写代码修改省份province的onchange事件，使得区域的下拉菜单内容随省份修改进行变动。2.实现下拉菜单三级联动动手实践：三级联动菜单的实现province.onchange=function(){city.options.length=0;createOption(city，cityArr[province.value]);if(province.value>=0){city.onchange();//自动添加城市对应区域下拉菜单}else{ country.options.length=0;}};

对象2.2.1对象在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）1.什么是对象2.2.1对象在javascript中的对象表达结构更清晰，更强大，如Lucy的个人信息在对象中的表达结构如下：2.为什么需要对象Lucy.姓名=‘Lucy’；=‘Lucy’;Lucy.性别=‘女’；person.sex=‘女’;Lucy.年龄=‘12’；person.age=‘12’;Lucy.身高=‘156’；person.heigh=‘156’;2.2.2对象的创建对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。{}里面采取键值对的形式表示。键：相当于属性名；值：相当于属性值，可以是任意类型的值1.利用字面量创建对象varstudent={ name:‘李明’; age:18; sex:’男’;S sayHello:function(){ alert(‘Helloeveryone!’)}; };2.2.2对象的创建Object（）：第一个字母大写newObject（）：需要new关键字使用的格式：对象.属性=值；2.利用newObject创建对象varJim=newObect();J='pink';andy.age=18;Jim.sex='男'；Jim.sayHello=function(){alert（'Helloeveryone!'）；}2.2.2对象的创建构造函数用于创建某一类对象，其首字母要大写构造函数要和new一起使用才有意义3.利用构造函数创建对象functionPerson(name){=name;this.sayHi=function(){ alert（’我的名字叫：’+）； }}varbigboy=newPerson（'大男孩'）；console.log();2.2.3new关键字使用new关键字创建一个新的对象实例：创建一个空的普通JavaScript对象（{}）1将新创建的对象的原型（__proto__）连接到构造函数的原型对象中2将构造函数内部的this关键字指向新创建的对象3执行构造函数内部的代码，初始化新对象的属性和方法4如果构造函数没有显示返回一个对象，则返回新创建的对象52.2.3new关键字//构造函数functionPerson(name,age){=name;this.age=age;}//使用new关键字创建对象varperson1=newPerson("Alice",30);varperson2=newPerson("Bob",25);console.log(person1);//Person{name:'Alice',age:30}console.log(person2);//Person{name:'Bob',age:25}示例：2.2.4遍历对象对象是键值对的集合，通常可能需要遍历它的键（key）、值（value）或者两者。可用for...in语句对数组或者对象的属性进行循环操作。for(varkinobj){console.log(k);//这里的k是属性名console.log(obj[k]);//这里的obj[k]是属性值}for（变量in对象名字）{//在此执行代码}2.2.5内置对象JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象。内置对象：就是指JavaScript语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。优点：可帮助我们快速开发。1.概述2.2.5内置对象2.Math对象常用方法功能Math.abs(x)返回一个数的绝对值。Math.ceil(x)向上取整，返回大于等于给定数字的最小整数。Math.floor(x)向下取整，返回小于等于给定数字的最大整数。Math.round(x)四舍五入，返回最接近给定数字的整数。Math.PI圆周率π的近似值，约为3.141592653589793。Math.max(x1,x2,...xn)返回一组数中的最大值。Math.pow(x,y)返回x的y次幂。Math.random()返回一个介于0（包含）和1（不包含）之间的随机浮点数。Math.log(x)返回一个数的自然对数（以e为底）。2.2.5内置对象3.Date对象方法名说明代码getFullYear():获取年份（4位）dObj.getFullYear()getMonth():获取月份（0表示一月，11表示十二月）dObj.getMonth()getDate():获取日期（1-31）。dObj.getDate()getDay():获取星期几（0表示星期日，6表示星期六）dObj.getDay()getHours():获取小时（0-23）dObj.getHours()getMinutes():获取分钟（0-59）dObj.getMinutes()getSeconds():获取秒数（0-59）dObj.getseconds()getMilliseconds():获取毫秒数（0-999）dObj.getMilliseconds()2.2.5内置对象4.String对象方法作用length获取字符串的长度charAt(index)获取index位置