Day6:数组常用方法、二维数组
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> /** 数组是引用类型,故此例子函数直接可以将外层arr改变 **/ function bubbleSort(arr){ for(var n=1;n<=arr.length-1;n++){ for(var i=0;i<arr.length-n;i++){ var curr=arr[i]; var next=arr[i+1]; if(curr>next){ var box=arr[i]; arr[i]=arr[i+1]; arr[i+1]=box; } } } //return arr不用返回 } var arr=[5,3,2,6,4,9,8,7]; document.write(arr+'<br/>'); bubbleSort(arr); document.write(arr); </script> </body> </html>
一、数组的常用方法
1、arr.sort():默认按字符串升序排列
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var arr=[5,43,2,57,16,69,8,4]; arr.sort(); document.write(arr); </script> </body> </html>
2、自定义排序
(1)定义比较器函数:定义两值比较策略的方法
比如:num1-num2>0------->num1>num2
num1-num2<0------->num1<num2
function compare(a,b){return a-b;}//可以定义在使用前后的任意位置,var和function声明(只是声明提前,值不会提前)自动提前
相当于:
var compare=new Function("a","b","return a-b");//必须定义在使用之前,因为仅声明提前,赋值不能提前
使用:arr.sort(compare);注:将方法作为对象传递时,仅使用方法名,后不加圆括号
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var arr=[5,43,2,57,16,69,8,4]; arr.sort(); document.write(arr+'<br/>'); //任意两数比较 function compare(a,b){ return a-b; } var a=13; var b=2; var r=compare(a,b); if(r>0){ document.write(a+"大于"+b); }else if(r<0){ document.write(a+"小于"+b); }else{ document.write(a+"等于"+b); } </script> </body> </html>
(2)将比较器函数传递给sort方法
如何将方法作为参数传递?
js中方法也是一个对象,方法名就是指向方法对象的变量名
arr.sort(compare);
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var arr=[5,43,2,57,16,69,8,4]; arr.sort(compare); document.write(arr+'<br/>'); //任意两数比较 function compare(a,b){ return a-b; } </script> </body> </html>
3、降序:颠倒比较结果的正负,可以导致升序变降序
升序比较器:function compare(a,b){return a-b;}
颠倒为降序比较器:function compare(a,b){return -(a-b);}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var arr=[5,43,2,57,16,69,8,4]; arr.sort(compare); document.write(arr+'<br/>'); //任意两数比较 function compare(a,b){ return -(a-b); } </script> </body> </html>
例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> //排序例子 var arr=[44,90,78,33,56,87] function compareASC(a,b){return a-b} function compareDESC(a,b){return -(a-b)} function sortASC(){ arr.sort(compareASC); console.log(arr.toString()); } function sortDESC(){ arr.sort(compareDESC); console.log(arr.toString()); } </script> <button onclick="sortASC()">升序</button> <button onclick="sortDESC()">降序</button> </body> </html>
二、栈和队列
1、栈:先进的后出,它其实就是数组,只不过用一对儿方法模拟了栈的操作,只能从数组一端出栈、入栈,另一端封闭
栈操作:结尾入栈出栈,元素下标始终不变
(1)arr.push():入栈
(2)var last=arr.pop:出栈
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var bus=[]; /**上车**/ for(var i=1;i<=5;i++){ bus.push('乘客'+i); } document.write(bus+'<br/>'); while(bus.length>0){ var customer=bus.pop(); document.write(customer+'下车'+'<br/>'); } document.write(bus+'<br/>'); </script> </body> </html>
2、开头入栈出栈:所有元素下标随入栈出栈操作而变化
(1)arr.unshift(值1,值2,....):入栈
(2)var first=arr.shift():出栈
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var bus=[]; /**上车**/ for(var i=1;i<=5;i++){ bus.unshift('乘客'+i); } document.write(bus+'<br/>'); while(bus.length>0){ var customer=bus.shift(); document.write(customer+'下车'+'<br/>'); } document.write(bus+'<br/>'); </script> </body> </html>
3、队列:FIFO
(1)入队列:arr.push 结尾入栈
(2)出队列:var first=arr.shift() 开头出栈
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var count=5;//共5部手机 var queue=[];//保存排队人数 for(var i=1;i<=5;i++){//先后来了5个顾客 queue.push('顾客'+i); } queue.push('你');//你最后来排队 document.write('当前排队顾客:'+queue+'<br/>'); while(count>0){//每出队列一个人,买走一部手机 var customer=queue.shift(); document.write(customer+'抢购成功'+'<br/>'); count--; } document.write(queue+"没抢上");//手机卖完,队列里剩的人就是没有抢上的 </script> </body> </html>
三、二维数组
定义:数组的元素又是另一个数组对象
1、创建:和创建普通数组完全一样,只是将普通元素换为一个数组对象而已
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var arr2=[]; arr2[0]=[101]; arr2[1]=[201,202]; arr2[2]=[301,302,303]; var arr=arr2[1]; arr2=null; arr=null; //垃圾回收之后,剩几个? </script> </body> </html>
2、如何访问二维数组中的任意元素:
arr[父数组中的下标][子数组中的下标]
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var arr2=[]; arr2[0]=[101]; arr2[1]=[201,202]; arr2[2]=[301,302,303]; document.write(arr2[1][0]); </script> </body> </html>
3、何时使用二维数组:数据包含明显上下级关系
例子:按照省份查找下面的城市
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var provs=['北京市','天津市','河北省']; var cities=[ /*[0]*/['朝阳区','海淀区','东城区'], /*[1]*/['南开区','和平区','河东区'], /*[2]*/['石家庄市','保定市','廊坊市'], ]; function getCitiesByProv(prov){ //如何确定prov在provs中的下标? var index; for(var i=0;i<provs.length;i++){ if(prov==provs[i]){ index=i; break; } } if(index!=undefined){ console.log(cities[index].toString()); } } </script> <button onclick="getCitiesByProv('北京市')">北京市</button> </body> </html>
优化后:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var cities=[ '北京市':['朝阳区','海淀区','东城区'], '天津市':['南开区','和平区','河东区'], '河北省':['石家庄市','保定市','廊坊市'], ]; function getCitiesByProv(prov){ console.log(cities[prov].toString()); } </script> <button onclick="getCitiesByProv('北京市')">北京市</button> </body> </html>
4、遍历二维数组
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var cities=[ ['朝阳区','海淀区','东城区'], ['南开区','和平区','河东区'], ['石家庄市','保定市','廊坊市'] ]; for(var n=0;n<cities.length;n++){ for(var i=0;i<cities[n].length;i++){ console.log(cities[n][i]); } } </script> </body> </html>
四、String:一旦创建无法改变
1、内置对象
2、String包装类型
(1)str.length:返回str字符串中的字符个数
var str="Hello奥巴马"; console.log(str.length);
(2)var str=str.toLowerCase():转小写
(3)var str=str.toUpperCase():转大写
注:希望大小写一视同仁时,需要先转换,再处理,就要用大小写转换
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var emails=[]; var input=prompt('请输入邮箱');//Licy@qq.com emails.push(input.toLowerCase());//licy@qq.com input=prompt('请输入第二个邮箱');//Licy@qq.com for(var i=0;i<emails.length;i++){ if(input.toLowerCase()==emails[i].toLowerCase()){ alert('已被使用'); break; } } if(i==emails.length){ emails.push(input.toLowerCase()); alert('注册成功'); } </script> </body> </html>