JS数组玩法说明

字号+ 编辑: Snake 修订: 呆头鹅甲 来源: 慕课网 2021-06-11 13:08 我要说两句(0)

数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值。

变量用来存储数据,一个变量只能存储一个内容。

假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,会变的更麻烦。

我们用数组解决问题,一个数组变量可以存放多个数据。

好比一个团,团里有很多人,如下我们使用数组存储5个学生成绩。

 图片13.png

数组的概念

数组是一个值的集合每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTDxhtml1-transitional.dtd"> 
<html xmln="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>什么是数组</title>
        <script type="text/javascript">
            var myarr = new Array();
            myarr[0] =80;
            myarr[1] =60;
            myarr[2] =99;
            document.write("第一个人的成绩是:"+myarr[0]+"<br />");
            document.write("第二个人的成绩是:"+myarr[1]+"<br />");
            document.write("第三个人的成绩是:"+myarr[2]);
        </script>
    </head>
    <body>
    </body>
</html>

 执行结果:

第一个人的成绩是:80
第二个人的成绩是:60
第三个人的成绩是:99

向数组追加新元素

现在我们使用myarray变量存储了5个人的成绩,那么多出一个人的成绩,如何存储呢?

 图片19.png

只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素。

myarray[5]=88; //使用一个新索引,为数组增加一个新元素
<script language="javascript">
    var myarray = Array();
    myarray[0] = 88;
    myarray[1] = 77;
    myarray2[] = 99;
    myarray[3] = 66;
    document.write("数组第一个值是:"+myarray[0]+"<br />");
    document.write("数组第一个值是:"+myarray[1]+"<br />");
    document.write("数组第一个值是:"+myarray[2]+"<br />");
    document.write("最新增加的第四个值是:"+myarray[3]);
</script>

使用数组中的某一个元素

数组中的每个值有一个索引号,从0开始,如下图, myarray变量存储6个人的成绩:

 图片19.png

要得到一个数组元素的值,只需用中括号 [ ] 来引用数组变量并提供一个索引,如:

第一个人的成绩表示方法:

myarray[0]

第三个人的成绩表示方法: 

myarray[2]
<script language="javascript"">
var myarray = Arry();
myarray[0] = 88;
myarray[1] = 77;
myarray[2] = 99;
myarray[3] = 66;
document.write("数组第一个值是:"+myarray[0]+"<br />");
document.write("数组第二个值是:"+myarray[1]+"<br />");
document.write("数组第三个值是:"+myarray[2]+"<br />");
document.write("最新增加的第四个值是:"+myarray[3]+"<br />");
</script>

数组的属性:length

如果想知道数组的大小,只需引用数组的一个属性length。Length属性表示数组的长度,即数组中元素的个数。

语法:

myarray.length; // 获得数组myarray的长度

注意:因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。如数组的长度是5,数组的上下限分别是0和4。

var arr=[55,32,5,90,60,98,76,54];// 包含8个数值的数组arr
document.write(arr.length); // 显示数组长度8
document.write(arr[7]); // 显示第8个元素的值54

同时,JavaScript数组的length属性是可变的,这一点需要特别注意。

arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10

数组随元素的增加,长度也会改变,如下:

var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34;  //增加元素,使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16

数组的维度

这里我们只讲述1维和2维数组。在实际开发中,我们会遇到N维,不过使用逻辑都大同小异,可以通过下述的基本常识推算。

一维数组,我们看成一组盒子,每个盒子只能放一个内容。

一维数组的表示:

myarray[ ]

二维数组,我们看成一组盒子,不过每个盒子里还可以放多个盒子。

二维数组的表示:

myarray[][]

注意: 二维数组的两个维度的索引值也是从0开始,两个维度的最后一个索引值为长度-1。

1. 二维数组的定义方法一

var myarr=new Array();  //先声明一维
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值,每个数组元素的值为i+j
   }
 }

注意: 关于for 循环语句,请看第四章4-5 。

将上面二维数组,用表格的方式表示:

012
0

myarr[]0[0]

值:0

myarr[0][1]

值:1

myarr[0][2]

值:2

1

myarr[1][0]

值:1

myarr[1][1]

值::2

myarr[1][2]

值:3

 2. 二维数组的定义方法二

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]

3. 赋值

myarr[0][1]=5; //将5的值传入到数组中,覆盖原有值。

说明: myarr[0][1] ,0 表示表的行,1表示表的列。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>二维数组</title>
        <script type="text/javascript">
            var myarr = new Array();
            for(var i=0;i<3;i++){
                myarr[i] = new Array();
                for(var j=0;j<6;j++){
                myarr[i][j] = i*j;
                }
            }
        document.write(myarr[2][5]);
        </script>
    </head>
    <body>
    </body>
</html>

执行结果:

10

实例:

<!DOcTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>数组</title>
        <script type="text/javascript">
            //创建数组
            var arr['*','##','***','&&','****','##*'];
            arr[7]='**';
            //显示数组长度
            alert(arr.length);
            //将数组内容输出,完成达到的效果。
            document.wirte(arr[0]+"<br />");
            document.wirte(arr[7]+"<br />");
            document.wirte(arr[2]+"<br />");
            document.wirte(arr[4]+"<br />");
        </script>
    </head>
    <body>
    </body>
</html>

执行结果:

*
**
***
****


阅完此文,您的感想如何?
  • 鼓掌

    0

  • 鄙视

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.交流群: PHP+JS聊天群

相关课文
  • 使用electron-forge和cnpm命令来写一个简单的electron桌面应用

  • UEditor百度编辑器中各种html标签被过滤掉的解决办法

  • ueditor在使用严格模式时报错Uncaught TypeError: 'caller', 'callee', and 'arguments'

  • JS的Timeout定时器怎么写成无限循环的?

我要说说
网上宾友点评
沙发已空
JS数组玩法说明