03-JavaScript数组

最新推荐文章于 2024-07-18 11:48:33 发布

yfp020907

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量17

点赞数

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/yfp020907/article/details/132238521

版权

1.while语句

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // while语句    当....的时候
        // while(条件表达式){
        //     循环体;
        // }

        var num = prompt('请输入一个数字');
        while (num <= 5) {
            console.log('我是while循环体');
            break;
        }
        // 温馨提示：千万不要写死循环
    </script>
</body>

</html>

2.do...while语句

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // do...while语句
        // do{
        //     要做的事情
        //     循环体
        // }while(条件表达式)

        var i = 0;
        do {
            console.log(i);
            i++;
        } while (i < 0);


        // while和do...while的区别
        // 当条件表达式不满足时，while语句不会执行，而do...while语句会执行一次
    </script>
</body>

</html>

3.创建数组

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.字面量
        var arr = ['张三', '里斯', '赵六'];
        console.log(arr);
        var arr1 = [1, 2, 3, 6, 5, 6];
        console.log(arr1);
        var arr3 = ['嬴政', '李斯', 03, 60];
        console.log(arr3);
        // 空数组
        var arr4 = [];
        console.log(arr4);
        // 长度为5的空数组
        var arr5 = [, , , , ,];
        console.log(arr5);

        // 创建有空存储单位的数组
        var arr6 = [1, 2, , 3, , 6];
        console.log(arr6);

        // 2.使用构造函数Array()创建数组
        var num = new Array(1, 2, 3, 5, 3);
        console.log(num);

        // 空数组
        var num1 = new Array();
        console.log(num1);
        // 指定长度的数组
        var num2 = new Array(6);
        console.log(num2);


        // Array()方法创建不了有空存储单位的数组，会报错！
        // var num3 = new Array(1, 2, 3,, 6);
        // console.log(num3);
    </script>
</body>

</html>

4.访问和修改数组元素

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 3, 6, 6, 5, 8, 10];

        // 访问数组元素,通过索引下标访问数组元素。  注意：索引下标从0开始
        console.log(arr[1]);

        // 修复数组元素 ，对应索引重新进行赋值
        arr[0] = 10;
        console.log(arr);

        // 删除数组元素，使用delete 关键字进行删除，删除之后该位置变为empty空属性，
        // 数组长度不变
        delete arr[2];
        console.log(arr);
    </script>
</body>

</html>

5.数组长度

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 3, 6, 6, 5, 8, 10];
        console.log(arr);

        // 访问数组长度
        console.log(arr.length);

        // 修改数组长度
        arr.length = 5;
        console.log(arr);

        // 用length创建一个指定长度的空数组
        var arr1 = [];
        arr1.length = 6;
        console.log(arr1);
    </script>
</body>

</html>

6.遍历数组

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 6, 5, 8, 9, 4, 2];
        // 遍历数组
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
    </script>
</body>

</html>

7.二维数组

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 二维数组
        var arr = [[1, 2, 3, 4], [5, 6, 7], [8, 9, 10]];
        // 遍历二维数组
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
            for (var j = 0; j < arr[i].length; j++) {
                console.log(arr[i][j]);
            }
        }
    </script>
</body>

</html>

8.数组的最大值和最小值

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 数组的最大值和最小值
        var arr = [1, 5, 3, 6, 99, 8, 2, 4];

        // 最小值
        var max = arr[0];
        for (var i = 0; i < arr.length; i++) {
            if (max > arr[i]) {
                max = arr[i]
            }
        }
        console.log(max);

        // 最大值
        var mix = arr[0];
        for (var k = 0; k < arr.length; k++) {
            if (mix < arr[k]) {
                mix = arr[k];
            }
        }
        console.log(mix);
    </script>
</body>

</html>

9.冒泡排序

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [2, 3, 6, 8, 84, 1, 78, 99, 50];
         // 外层for循环控制比较的轮数
        for (var k = 0; k < arr.length; k++) {
            for (var i = 0; i < arr.length - 1 - k; i++) {
                if (arr[i] > arr[i + 1]) {
                    [arr[i + 1], arr[i]] = [arr[i], arr[i + 1]];
                }
            }
        }
        console.log(arr);
    </script>
</body>

</html>