JavaScript第五讲：JavaScript的数组的声明与应用

本节主要讲解JavaScript数组的声明与应用，并且用实例来进一步加深印象。

 

一、数组的作用：只要是批量的数据都需要使用数组声明

二、如何声明数组

1.快速声明数组的方法

 var 数组名=[元素1，元素2，，]；

例1.

声明数组方法一

<script>

var names=["zhangsan","lisi","wangwu"];

var tems=["abc",10,24];//元素可以类型不同

var arrs=[

               ["111","222"],

               ["aaa","bbb"],

               ["333","cccc"]

              ];  //二维数组

alert( arrs[1][1]);//结果为bbb

</script>

 

 

2.声明数组方式二

步骤：

使用Array对象

var  arr=new Array("成员"，“成员n”);

 

 原理

<script>

function MyArray(num){

  this.length=num;

  for(var i=0;i<this.length;i++){

   this[i]='';

   }

}

 var arr=new MyArray(10);

</script>

 

实际用法

<script>

  var arr=new Array(10);//创建数组有十个元素

</script>

 

 

原理：

<script>

function MyArray(){

   this.length=arguments.length;

  for (var i=0;i<arguments.length;i++){

  this[i]=arguments[i];

}

   this.sort=function(){

}

  this.pop=function(){

}

 this.push=function(){

 }

}

var arr=new MyArray("aaa","bbb","cccc","ddd");

//数组的长度 arr.length

alert(arr.length);

arr[1]="xxxxx";

alert(arr[1]);

</script>

 

实际用法

<script>

var arr=new Array("aaa","bbb","ccc");

alert(arr.length);

arr[1]="xxxxx";

alert(arr[1]);

</script>

 

 

 

三、遍历数组

四、数组的处理（内置处理方法）

例1

<script>

var arr=[1,3,2,5,2,8,4,6];

for (var i=0;i<arr.length;i++){

 document.write(arr[i]+"<br>")

}

arr.sort( function(a,b){

  if(a>b){

     return -1;

}if(a==b){

    return 0;

}else{

   return 1;

 }

}

           

);//sort是默认排序，我们可以在里面写上自己的方法，以上是倒叙排列

</script>

 

例2

按字符串的长度来排序

<script>

var arr=["aaa","b","ddddd"];

arr.sort(function(a,b){

 if(a.length<b.length)

    return 1;

elseif(a.length==b.length)

    return 0;

else

    return -1

})

document.write(arr);

</script>

 

 

例3

<script>

var arr=["aaa","bbb","cccc"];

arr.push("www","yyy");//入栈

arr.pop();//出栈

arr.unshif("hello");// 入队

arr.shift();  //出队

</script>

 

例4

随即背景图

<script>

var colors=["red","blue","yellow","green","#ff00ff"];

document.bgColor=colors[Math.floor(Math.random()*colors.length)];

</script>

 

 

例5

输出20*20的盒子

<script>

var rows=20;   //行数   

var cols=20;   //列数

var w=15;   //宽

var h=15;   //高

for(var i=0;i<rows;i++){

  for (var j=0;j<cols;j++){

document.write('<div  style="position:absolute;top:'+(100+h*i)+'px;left:'(100+w*j)'px;width:'+w+'px;height:'+h+'px; overflow:hidden;background:yellow; border:1px  solid white;"></div>');

}

}

<script>

例6

用数组来实现

<script>

var rows=20;

var cols=20;

var w=25;

var h=25;

 var map=new Array();//声明一个数组

 for(var i=0;i<rows;i++){

  //数组map中分别声明数组

    map[i]=new Array();

 for (var j=0;j<cols;j++){

    map[i][j]=0；//二维数组中的每一个元素为0

 

  }

}

 

map[Math.floor(Math.random()*rows)][Math.floor(Math.random()*cols)]=1;

map[Math.floor(Math.random()*rows)][Math.floor(Math.random()*cols)]=2;

for( var i=0;i<rows;i++){

  for(var j=0;j<cols;j++){

   if(map[i][j]==1)

        var bg="red";

  else if(map[i][j]==2)

        var bg="blue";

  else

         var bg="yellow";

document.write('<div  style="position:absolute;top:'+(100+h*i)+'px;left:'(100+w*j)'px;width:'+w+'px;height:'+h+'px; overflow:hidden;background:'+bg+'; border:1px  solid white;"></div>');

  }

}

</script>

 

 

 

小知识。

1.快速声明对象

<script>

var p=new Object();

p.name="zhangsan";

p.age=10;

p.sex="man";

/*

json

{属性1：值，属性2：值2，，，，}

*/

var p={name:"zhansan",age:10,sex:"man"}

alert(p.name);

alert(p["name"]);

alert(p.sex);

</script>

2.栈就像是一个弹夹后进先出。push是入栈  pop是出栈

3.队列是先进先出。unshift是入队  shift是出队