Day6：数组常用方法、二维数组
<!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()：默认按字符串升序排列
<!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);注：将方法作为对象传递时，仅使用方法名，后不加圆括号
<!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);
<!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);}
<!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>
例子：
<!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：出栈
<!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()：出栈
<!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() 开头出栈
<!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、创建：和创建普通数组完全一样，只是将普通元素换为一个数组对象而已
<!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[父数组中的下标][子数组中的下标]
<!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、何时使用二维数组：数据包含明显上下级关系
例子：按照省份查找下面的城市
<!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>
优化后：
<!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、遍历二维数组
<!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()：转大写
注：希望大小写一视同仁时，需要先转换，再处理，就要用大小写转换
<!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>
浙公网安备 33010602011771号