JavaScript -- 总结 4 （小白）

最新推荐文章于 2024-11-13 15:29:17 发布

柿子来了

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量300

点赞数 7

文章标签： javascript 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/140735416

版权

数组的创建

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        // 数组的创建
        // 数组的创建1 依然需要使用var关键字 来创建
        var arr = ['a', 'b', 'c', 'd', 'e'];
        console.log(arr);


        // 创建一个学生信息的数组
        // 对于数组来说，可以添加任意的数据类型
        var students = ["张三", 28, true, "男", 175];
        console.log(students);


        var arr1 = [];
        // 空数组
        console.log(typeof students);
        // object  复杂数据类型


        // 数组的创建2
        // 通过 new Array()  来创建数组  通过构造函数来创建
        // console.dir(Array);
        var arr2 = new Array();
        console.log(arr2);

        var students2 = new Array("张三", 28, true, "男", 175);
        console.log(students2);


        // 直接量创建的数组可以在中间添加空值
        var arr3 = [1, 2, , , 5, 6];
        // 构造函数创建的数组不可以添加空值  会直接报语法错误
        // var arr4 = new Array(1, 2, , , 5, 6);

        console.log(arr3);
        console.log(arr4);
    </script>
</body>

</html>

数组包含的属性

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 数组的索引下标 从0开始
        var arr = [1, 2, 3, 'a', 'b'];
        //         0  1  2   3    4
        console.log(arr);

        // 2.长度 数组的值的个数
        console.log(arr.length);

        // 长度 和 下标    长度-1 = 下标的最大值

        // // 只要是数组 就一定会有长度 
        var arr1 = [1, 2, , , 5, 6];
        console.log(arr1);
        console.log(arr1.length);

        var arr2 = [];
        console.log(arr2);
        console.log(arr2.length);


        // 数组长度 可以修改的  
        // 如果改后大于原本长度 会增加相对应的空 
        // 如果小于原本长度 会删除多余的值
        var arr = [1, 2, 3, 'a', 'b'];
        console.log(arr);
        console.log(arr.length);
        arr.length = 10;
        console.log(arr);
        console.log(arr.length);
        arr.length = 2;
        console.log(arr);
        console.log(arr.length);
    </script>
</body>

</html>

数组的访问和修改

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var arr1 = [1, 2, 3];
        console.log(arr1);
        // 数组的访问 
        // 通过索引下标 来访问数组中的元素
        // 数组名称[索引下标]
        var arr = ['liubang', 'wangwu', 'zhaoliu'];
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2 - 1]);
        console.log(arr[2 + 1]); // undefined
        console.log(arr[-1]); //undefined

        // 数组的修改
        // 通过索引下标 来修改数组中的元素
        // 数组名称[索引下标] = 新值
        arr[2] = "liubang";
        // arr[6] = "张飞";
        arr[-3] = "张小";
        arr[-1] = "张小飞";
        arr[-2] = "张小飞飞";

        console.log(arr);

        // 数组长度 只计算正整数
        var arr3 = [];
        arr3[-1] = "o((>ω< ))o";
        arr3[2.5] = "(￢︿̫̿￢☆)";

        console.log(arr3);
        console.log(arr3[-1]);
        console.log(arr3[2.5]);
    </script>
</body>

</html>

数组遍历

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = ['刘邦', '张良', '韩信', '萧何', '刘备', '韩信', '萧何'];
        // 使用 for 循环遍历数组
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
    </script>
</body>

</html>

多维数组

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        // 当访二维数组时，先访问第一个，再访问第二个
        var arr = [[1, 2, 3],["a", "b", "c"]
        ];
        console.log(arr[0][0]); //1
        console.log(arr[0][1]); //2
        console.log(arr[0][2]); //3
        console.log(arr[1][0]); //a
        console.log(arr[1][1]); //b
        console.log(arr[1][2]); //c

        // 二维数组遍历
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr[i].length; j++) {
                console.log(arr[i][j]);
            }
        }
        
        // 多维数组
        var arr = [[1, [9, 5, 4], 3],["a", "b", "c"]];
        console.log(arr[0][1][0]); //9
    </script>
</body>

</html>

最大值和最小值

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [11, 52, 73, 44, 15];
        // 求最值的方法
        var max = arr[0];
        var min = arr[0];
        for (var i = 0; i < arr.length; i++) {
            if (max < arr[i]) { // 当前元素比最大值max大，则修改最大值
                max = arr[i];
            }

            if (min > arr[i]) { // 当前元素比最小值min小，则修改最小值
                min = arr[i];
            }
        }
        console.log(max); // 73
        console.log(min); // 11
    </script>
</body>

</html>

栈方法和队列方法

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5];
        // 1. 方法的参数   2.方法的返回值  3.  是否改变原本的数组
        // push
        // 添加元素  在元素的末尾的位置添加  
        // 需要几个就可以添加几个
        // 参数 需要添加的元素  可以写多个 
        // 之间使用逗号分隔
        // 返回值  会返回一个添加完之后的数组的长度
        // 会改变原本的数组
        arr.push('溜溜溜', '叭叭叭');
        // console.log(arr.push('溜溜溜', '叭叭叭'));
        console.log(arr);

        // pop
        // 删除元素  删除末尾位置的一个元素
        // 参数  不需要参数
        // 返回值 返回删除的元素
        // 会改变原本的数组
        arr.pop();
        // console.log(arr.pop());
        console.log(arr);

        // unshift
        // 添加元素  在元素的头部的位置添加  
        // 需要几个就可以添加几个
        // 参数 需要添加的元素  可以写多个 
        // 之间使用逗号分隔
        // 返回值  会返回一个添加完之后的数组的长度
        // 会改变原本的数组
        arr.unshift('咯咯咯');
        // console.log(arr.unshift('咯咯咯'));
        console.log(arr);

        // shift
        // 删除元素  删除头部的位置的一个元素
        // 参数  不需要参数
        // 返回值 返回删除的元素
        // 会改变原本的数组
        arr.shift();
        // console.log(arr.shift());
        console.log(arr);


        // 栈方法  先进后出
        // 队列方法 先进先出
    </script>
</body>

</html>

检索方法

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 1];
        // includes
        // 用于 查找 是否包含某个元素 返回 布尔值  采用的是全等于
        // 参数  1.需要查找的元素   2.从哪个位置开始查找 索引下标 
        // 如果超过最大的索引下标那么不会在检索了  -1 表示 为最后一个元素
        // 如果 arr.length + 查询的开始位置的数字   为 负数 那么就会从头开始检索
        // 返回值 布尔值 是否找到的结果
        // 不会改变原本的数组
        console.log(arr.includes(9)); // false 没有找到 
        console.log(arr.includes(1, -99)); // true 找到了
        console.log(arr.includes('1')); //false 没有找到

        // indexOf
        // 用于 查找 是否包含某个元素 返回 索引下标  第一次出现的位置 采用的是全等于
        // 参数  需要查找的元素  2从哪个位置开始查找 索引下标 
        // 如果超过最大的索引下标那么不会在检索了  -1 表示 为最后一个元素
        // 返回值 索引下标  没有找到返回 -1
        // 不会改变原本的数组
        console.log(arr.indexOf(99)); // -1 没有找到
        console.log(arr.indexOf(1, 1)); // 4
    </script>
</body>

</html>

数组转字符串

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = ['a', 'b', 'c'];
        // join 数组转字符串  将数组里面的每一个元素分别拿出来 拼接到一个字符串中
        // 参数 每一个元素的分隔符
        // 返回值  返回由内容组成的字符串
        // 不会改变原数组
        arr.join('+');
        var str = arr.join('+');
        console.log(str); //a+b+c
        console.log(arr.join('*')); //a*b*c

        // toString 
        // 参数 没有参数 
        // 返回值  返回由内容组成的字符串 中间使用逗号分隔
        // 不改变原数组
        console.log(arr.toString('*')); //a,b,c
    </script>
</body>

</html>

数组其他方法

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        // isArray
        // 判断传入的是否是一个数组  和isNaN 一样
        // 参数 就是需要检测的变量
        // 返回值  布尔值 是否是一个数组
        // 不改变原数组
        console.log(Array.isArray(arr1));


        // splice  增  删  改
        // 参数 参数1 需要增加 删除 修改的起始位置（必须的） 会到哪个地方
        // 参数2 需要删除的个数（可选）  
        // 参数3 增加的元素（可选）
        // 返回值  被修改的内容
        // 改变原数组

        // 增
        arr.splice(2, 0, "你好");
        console.log(arr);

        // 删
        arr.splice(1, 2);
        console.log(arr);

        // 改
        arr.splice(2, 3, "三", "四", "五");
        console.log(arr.splice(2, 3, "三", "四", "五"));
        console.log(arr);


        // slice  截取数组
        // 参数1 起始位置  参数2 结束位置 (不包含结束位置)
        // 如果参数只有开始 没有结束 那么会从开始一直到最后
        // 如果参数只有一个0  那么会原封不动的把数组打印一遍
        // 返回值  截取出来的数组
        // 不会改变原数组
        var arr2 = [1, 2, 3, 4, 5];
        console.log(arr2.slice(1, 3));
        console.log(arr2.slice(1));
        console.log(arr2.slice(0));
        console.log(arr2.slice(1, -2));
        arr2.slice(1, 4);
        console.log(arr2);


        // reverse  颠倒数组 
        // 参数  不需要
        // 返回值 颠倒之后的数组
        // 改变原数组
        var arr3 = [1, 2, 3, 4, 5];
        arr3.reverse();
        console.log(arr3.reverse());
        console.log(arr3);


        // concat 合并多个数组 
        //  将参数里面的数组合并到当前数组中
        // 返回合并之后的数组
        // 不会改变原数组
        var arr6 = ['a', 'b'];
        var arr7 = [1, 2, 3];
        console.log(arr7.concat(arr6));
        console.log(arr7);
        console.log(arr6);
    </script>
</body>

</html>

冒泡排序

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        // 冒泡排序  相邻的两两比较大小  
        // 比较完之后 直接交换位置
        var arr = [99, 5, 12, 6, 10, 100, 87, 34, 10, 2, 5, 27, 98, 31, 23];
        for (var j = 0; j < arr.length - 1; j++) {// 控制需要比较的大轮次
            for (var i = 0; i < arr.length - j - 1; i++) {// 控制每一次参与比较的元素
                if (arr[i] > arr[i + 1]) {// 比较 之后交换位置

                    // 解构交换
                    var temp = arr[i];
                    arr[i] = arr[i + 1];
                    arr[i + 1] = temp;
                    
                }
            }
        }

        console.log(arr); // 从小到大排序 [2, 5, 5, 6, 10, 10, 12, 23, 27, 31, 34, 87, 98, 99, 100]
    </script>
</body>

</html>