JS-数组

124 阅读3分钟

数组是具有相同数据类型的一个或多个值的合集,构建数组有两种方式:
1、利用构造函数array构建数组,索引从0开始

        var 数组名 = new Array(数值);
        数组名[0] = 'a'
        数组名[1] = 'b'
        数组名[2] = 'c'
        数组名[3] = 'd'
        数组名[4] = 'e'

2、使用字面量的方式创建数组

        var 数组名 = ['a','b','c','d','e'];

如何给数组添加新的值?

        数组名.push('新值');

小练习,写一个球类名称的数组,里面有四个值,新增一个羽毛球,并将数组的值都打印出来

    <script>
        var boll = ['篮球','排球','足球','兵乓球','网球'];
        boll.push('羽毛球');
        document.write(boll);
    </script>

使用for循环遍历数组的两个方法:

    var arr = ['1','2','3','4','5'];
    for(var i = 0;i<arr.length;i++){
        document.write(arr[i]+'<br>');
    }
    for(var i in arr){
        document.write(arr[i]+'<br>');
    }
    </script>

代码分析:计数器i作为索引号使用,因为索引是从0开始,所以i初始值必须等于0 ,且小于数组长度length(不能等于);i是计数器,arr[i]是数组元素
小练习:写一个球类名称的数组,里面有四个值,篮球,足球,排球,网球,新增一个羽毛球,输出“篮球50元”,“足球30元”,“排球45元”,“网球35元”,“羽毛球20元”

    <script>
        let boll = ['篮球','足球','排球','网球'];
        boll.push('羽毛球');
        for(var i in boll){
            if(boll[i] == '篮球'){
                boll[i] = boll[i]+'50元';
            }
            else if(boll[i] == '足球'){
                boll[i] = boll[i]+'30元';
            }
            else if(boll[i] == '排球'){
                boll[i] = boll[i]+'45元';
            }
            else if(boll[i] == '网球'){
                boll[i] = boll[i]+'35元';
            }
            else if(boll[i] == '羽毛球'){
                boll[i] = boll[i]+'20元';
            }
        }
        document.write(boll);
    </script>

代码分析:使用数组中的值需要带着数组名,例如boll[i];if else和else if的区别。

数组的功能

  • length 表示数组的长度可以通过修改length来实现数组扩容(声明变量未给值,,默认值是undefined)
  • 索引 原数组arr索引0~4,有五个元素,可以通过arr[5]=值,来新增元素;可以通过arr[3]=值,来替换索引3对应的元素值。
  • join() 可以将数组转成字符串,默认以逗号分隔,join()可以决定以()内的作为分隔符 小练习:对数组练习使用不同的分隔符
    <script>
        var arr = ["飞机","火车","大炮","高铁","飞船","邮轮"];
        document.write(arr.join("**")+'<br>');
        document.write(arr.join("&&")+'<br>');
        document.write(arr.join("--")+'<br>');
        document.write(arr.join('')+'<br>');
    </script>
  • reverse() 可以将数组的成员做一个颠倒,生成一个新数组
  • sort() 对数组进行排序,生成一个新数组

小练习:对2, 1, 3, 4, 5, 7, 8, 6从大到小排序,再从小到大排序

    <script>
        var num = [2, 1, 3, 4, 5, 7, 8, 6];
        function showSmall(){
            num.sort();
            document.write(num);
        }
        function showBig(){
            num.sort().reverse();
            document.write(num+'<br>');
        }
        showBig();
        showSmall();
    </script>

代码分析:因为reverse和sort都是生成一个新数组,所以他们可以复合写法。

  • push() 功能:添加新的成员;返回值:修改后的数组长度。
  • concat() 功能:合并两个数组生成新数组,不会改变原数组。

小练习:将数组1和数组2合并。

    <script>
        let arr1 =[1,2,3];
        let arr2 = [4,5,6];
        let arr3 = arr1.concat(arr2) 
        console.log('arr1',arr1)
        console.log('arr2',arr2)
        console.log('arr3',arr3)
    </script>

代码分析:使用console.log可以在控制台查看到,数组1和数组2都没有发生变化,合并结果是数组3.

  • unshift() 功能:添加到开头;返回值:修改后的数组长度。
  • shift() 功能:删除第一项元素;返回值:删除的元素。
  • pop() 功能:删除最后一项元素;返回值:移除的元素。
  • indexOf(某元素) 功能:找到元素的位置;返回值:返回数组元素的索引(如果元素不存在,就返回-1)。

小练习:去掉数组[5,4,26,9,4,8,5,14]中重复的值

    <script>
        var arr=[5,4,26,9,4,8,5,14];
        let newarr = [];
        for(var i in arr){
            if(newarr.indexOf(arr[i]) == -1){
                newarr.push(arr[i]);
            }
        }
        document.write(newarr);
    </script>

代码分析:新建一个空数组;用indexOf查看老数组的值是否存在于新数组中;如果存在,就使用push添加至新数组。

  • splice(所在数组位置,需要删除的数量,需要添加的内容) 功能:在指定位置添加/删除,改变原数组;返回值:删除的元素。

小练习:输入字母,如果存在于数组中,则删除,如果不存在,就加进数组第二个字母的前面。

    <script>
        let arr = ['apple', 'tree', 'sun'];
        var a = prompt('请输入单词');
        if (arr.indexOf(a) == -1) {
            arr.splice(1, 0, a);
        } else {
            arr.splice(arr.indexOf(a), 1);   //哪个数组要使用indexof就要跟着哪个数组
        }
        document.write(arr);
    </script>

代码分析:使用indexOf查看数组中是否存在输入值,此时不需要使用for循环遍历,因为indexOf的功能就是查看数值是否存在;如果不存在,arr.splice(1[定位到位置2的索引]1, 0[不需要删除], a[a是需要添加的值]);如果存在,arr.splice(arr.indexOf(a)[定位到a的位置,indexOf的返回值就是找到的元素索引], 1[需要删除的数量]);