• JavaScript数组


    1.数组的概念

      之前的变量 只能存储一个值。如果我们想存储班级中所有学生的姓名,该如何存储呢?

      可以使用数组(array)。数组可以把一组相关的数据一起存放,并提供方便的访问方式。

      数组就是一组数据的集合,其中每个数据被称为元素,在数组中可以存放仍以类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

       //普通变量一次只能存储一个值

       var num = 10;

       //数组一次可以存储多个值

       var arr = [1,2,3,4,5]

    2.数组创建

    2.1创建数组的方式

    JS中创建数组有两种方式:


       利用new 创建数组

       利用数组字面量创建数组(常用)

        数组的字面量是方括号[]

        声明数组并赋值成为数组的初始化

        这种字面方式也是我们以后最多使用的方式

        <script>
            // 1.数组(array): 就是一组数据的集合,存储在单个变量下的优雅方式 
            // 2.利用new 创建数组
            var arr = new Array(); //创建了一个空的数组。
            // 3.利用数组字面量来创建数组[]
            var arr = [];//创建了一个空的数组
            var arr1 = [1,2,'pink老师',true];
            // 4.我们数组里面的数据一定用 , 分隔
            // 5.数组里面的数据 比如1,2 我们称为数组元素
            
        </script>
    
    

    2.4数组元素的类型

      数组中可以存放 任意类型的数据,例如字符串,数字,布尔值等。

      var arrStus = ['小白',12,true,28.9];

     3.获取数组元素

    3.1数组的索引

        索引(下标):用来访问数组元素的序号(数组下标从0开始)

         var arr = ['小白', '小黑' , '大黄' , '瑞奇'];

         索引号    0         1           2         3   

        数组是通过 索引 来访问,设置 修改对应的数组元素,我们可以通过 "数组名[索引]"的形式来获取数组中的元素

        这里访问就是获取,得到的意思

    4.遍历数组

      (1)数组每一项怎么取出来?

        可以通过“数组名[索引号]”的方式一项一项的取出来

       (2)怎么把数组元素全部取出来呢?

         循环

         遍历,把数组每个元素从头到尾都访问一次(类似于我i们的点名)

            // 遍历数组:就是把数组元素从头到尾访问一遍
            var arr = ['red' , 'green' , 'blue']
            for (var i = 0; i < 3; i++)
            {
                console.log(arr[i]);
            }
            // 1.因为我们的数组索引号从0开始,所以i必须从0开始 i<3;
            // 2.输出的是有arr[i] i 计数器当索引号来用

    4.1数组的长度

    使用"数组名.length",可以访问数组元素的质量(数组长度)。

        <script>
            //数组长度   "数组名.length"
            var arr = ['关羽' , '张飞' , '马超' ,'赵云', '黄忠', '刘备', '姜维']
            for (var i =0 ; arr.length<7; i++)
            {
                console.log(arr[i]);
    
            }
            console.log(arr.length);     
            //1.数组长度是元素个数 不要跟索引混淆。
            //2. arr.length 动态监测数组元素的个数。 
        </script>

    5数组中的新增元素

    可以通过修改length长度以及索引号增加数组元素

    5.1通过修改length长度新增数组元素

         修改length长度实现扩容

         length 是可读写的

    5.2通过修改数组索引新增数组元素

       <script>
            // 1.新增数组元素 修改length长度
            var arr = ['red','green'];
            arr.length = 5;
            console.log(arr);
            console.log(arr[3]);
            // 2.新增数组元素,修改索引号 追加数组元素
            var arr1 = ['red','green'];
            arr1[2] = 'pink';
            // 3,这是替换原来的数组元素
            arr1[0] = 'yellow';
            console.log(arr1);
            //不要直接给数组元素赋值 否贼免得数组元素都没有了
            arr1 = '有点意思';
            console.log(arr1);
        </script>

    6.循环添加数组元素

        <script>
            var arr = [] ;
            for(var i = 0 ; i<10 ; i++)
            {
                arr[i]=i+1;
            }
            console.log(arr);  
        </script>

    7.数组中只保留大于10的元素

        <script>
            var arr = [2,0,6,1,77,0,52,0,25,7];
            var data = 10;
            var arrNew = [];
            for(var i=0,j=0 ; i < arr.length ; i++)
            {
                if(arr[i] >= data)
                {
                    arrNew[j]=arr[i];
                    j++;
                }
            }
            console.log(arrNew);
        </script>

    8.把数组元素的特定值去掉(这里去掉的是0)

        <script>
            var arr = [2,0,6,1,77,0,52,0,25,7];
            var arr1 = [];
            for(var i=0 ;i<arr.length; i++)
            {
                if(arr[i] != 0)
                {
                    arr1[arr1.length] = arr[i];
                }     
            }
            console.log(arr1);
        </script>

    9.把数组元素反转

        <script>
            //将['red','green','blue','pink','purple']内容反转过来
            var arr = ['red','green','blue','pink','purple','hotpink'];
            var arr1 = [];
            for(var i=(arr.length-1);i>=0;i--)
            {
                arr1[arr1.length] = arr[i];
            }
            console.log(arr1);     
        </script>
    
    
  • 相关阅读:
    新增更改app.Config的值
    repeater DropDownList 事件
    ASP.NET 状态服务 及 session丢失问题解决方案总结
    js动态添加table的行
    各大社交网络首页黄金区输入框提示(facebook,人人网,开心网)
    Color theme installation for Emacs in Windows 7
    乐观锁和悲观锁
    google的落寞
    印象深刻的网络实验课
    未知和恐惧
  • 原文地址:https://www.cnblogs.com/qiujie-prion/p/12980291.html
Copyright © 2020-2023  润新知