JavaScript day3

Follow_浩弟

已于 2023-08-14 17:52:38 修改

阅读量61

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-08-14 17:52:11 首次发布

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132280323

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.数组的语法

数组构成：数组由一个或多个数组元素组成的，各元素之间使用逗号“,”分割。
数组元素：每个数组元素由“索引下标”和“值”构成。
索引下标：简称下标，以数字表示，默认从0开始依次递增，用于识别元素。
值：元素的内容，可以是任意类型的数据，如数值型、字符型、数组、对象等。

2.创建数组

两种方式创建数组：直接使用“[]”的方式和实例化Array对象的方式

使用数组直接量是创建数组最简单、最直观的方法，在方括号中将数组元素用逗号隔开即可

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>


        // 数组构成：数组由一个或多个数组元素组成的，各元素之间使用逗号“,”分割。
        // 数组元素：每个数组元素由“索引下标”和“值”构成。

        // Array创建数组 1.字面量
        var arr = [1, "今日起儿童乘火车须带本人身份证件", true, null, undefined];

        console.log(arr)

        // 2.使用new 实例化数组
        var arr2 = new Array(1, 2, 3, 4, 5, 5, 6);
        console.log(arr2);
    </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>
        var arr = [1,2,3,4,5,6,7];

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

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

        // 删除数组元素,通过 delete 关键字进行删除，删除之后该位置变为 empty，数组长度不变
        delete arr[6];
        console.log(arr);
    </script>
</body>
</html>

3.1数组的下标

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>


        // 1.创建数组
        var arr = [5, 6, 7, 7, 8, 8, 9];
        console.log(arr);

        // 使用下标访问数组当中的某个元素
        // 使用下标可以访问到 某个对应的元素
        console.log(arr[0])
        console.log(arr[6])
        console.log(arr[7])//undefined
        // 如果访问的下标 大于数组里面的下标 那么就会是undefined
        console.log(arr[-1]);//undefined

        // 下标可以使用运算符
        console.log(arr[1 + 2])
        console.log(arr[2 - 1])
    </script>
</body>

</html>

3.2访问并且修改

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>


        var arr = [1, 2, 3, 4, 5, 5, 6, 6, 7];
        arr[3] = "kangkang";
        console.log(arr[3]);
        console.log(arr);

        // 如果访问数组当中的最后一个元素
        // arr.length代表数组的长度
        console.log(arr.length);

        console.log(arr[arr.length - 1]);

        var arr2 = [2, 3, 5, 56, 6,];
        console.log(arr2[arr2.length - 1]);

        // 扩展 注意
        // 数组也是复杂数据类型
        // 只要是引用数据类型（复杂）
        // 都可以通过 . 来访问下面的属性和方法
    </script>
</body>

</html>

4.数组的长度

每个数组都有一个 length 属性，length 属性值代表数组中元素的个数。

<!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];
        console.log(arr);

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

        // 清空数组
        arr.length = 0;
        console.log(arr);

        // [,,,,]
        var arr1 = [];
        arr1.length = 6;
        console.log(arr1);
    </script>
</body>
</html>

5.遍历数组

在创建完数组后，如何遍历数组中的元素，对其进行操作呢？

5.1如何遍历数组

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

<head>
    <meta charset="UTF-8">
    <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];

        // 使用for循环对数组进行遍历操作
        // 因为数组的下标是从0开始递增
        // arr.length 代表数组当中元素的个数
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);

            console.log(arr[i] * 10);

            // 如果想要让数组的元素改变 必须要赋值
            // arr[i] = arr[i] * 10
        }
        console.log(arr);

    </script>
</body>

</html>

5.2二维数组

数组还可以根据维数划分为一维数组、二维数组、三维数组等多维数组。

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

<head>
    <meta charset="UTF-8">
    <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]
        ];
        console.log(arr);

        // 如何遍历二维数组
        // 第一层循环所有的数组
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
            // 第二层循环里面的数组
            for (var k = 0; k < arr[i].length; k++) {
                console.log(arr[i][k]);
            }
        }
    </script>
</body>

</html>

5.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>
        var arr = [11, 23, 99, 4, 51, 33, 28, 1];

        // 第三者
        var temp;

        // 外层for循环控制比较几趟
        for (var j = 0; j < arr.length; j++) {
            // 每一趟都会把最大(最小)的数放在最后面;每放一个之后,下一趟就会少比较一个(length-j)
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] < arr[i + 1]) {
                    // 两者进行交换
                    // temp = arr[i];
                    // arr[i] = arr[i + 1];
                    // arr[i + 1] = temp;

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

        console.log(arr);


        // 冒泡排序
        // 实现原理：在冒泡排序的过程中，按照要求从小到大排序或从大到
        // 小排序，不断比较数组中相邻两个元素的值，将值大的元素
        // 或最小的元素交换至右端。
        // 对以上步骤进行循环

        // 从小到大

        // 外层for循环规定比较轮数
        for (var i = 0; i < arr.length - 1; i++) {

            // 内层for循环控制比较次数
            for (var k = 0; k < arr.length - 1 - i; k++) {
                if (arr[k] > arr[k + 1]) {
                    [arr[k], arr[k + 1]] = [arr[k + 1], arr[k]]
                }
            }

        }
        console.log(arr);
    </script>
</body>

</html>

6.数组的操作方法

学习数组的方法要关注以下3个重点:

方法参数
返回值
改变不改变原数组

6.1数组的操作方法-尾部的添加和删除

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

<head>
    <meta charset="UTF-8">
    <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];
        console.log(arr);

        // 学习数组的操作方法需要注意：
        // - 方法参数
        // - 返回值
        // - 改变不改变原数组

        // 1. arr.push()
        //    -将一个或多个元素添加到数组的尾部
        //    -参数是一个或多个元素
        //    -返回值是数组的新长度
        //    -改变原数组
        console.log(arr.push(8, "123"))
        console.log(arr);


        // 2. arr.pop()
        //    -从数组的末尾删除一个元素
        //    -没有参数
        //    -返回值是被删除的元素
        //    -改变原数组
        console.log(arr.pop());
        console.log(arr);
    </script>
</body>

</html>

6.2数组的操作方法-头部的添加和删除

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

<head>
    <meta charset="UTF-8">
    <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];
        console.log(arr);

        // 1. arr.unshift()
        //      -从数组的头部添加一个或多个元素
        //      -参数是一个或多个元素
        //      -返回值是数组的新长度
        //      -改变原数组
        console.log(arr.unshift("abc","def"));
        console.log(arr);

        // 2. arr.shift();
        //     -从数组的头部删除一个元素
        //     -没有参数
        //     -返回值是被删除的元素
        //     -改变原数组
        console.log(arr.shift());
        console.log(arr);
    </script>
</body>

</html>

6.3数组的检索方法

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

<head>
    <meta charset="UTF-8">
    <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];
        console.log(arr);

        // 1. arr.unshift()
        //      -从数组的头部添加一个或多个元素
        //      -参数是一个或多个元素
        //      -返回值是数组的新长度
        //      -改变原数组
        console.log(arr.unshift("abc","def"));
        console.log(arr);

        // 2. arr.shift();
        //     -从数组的头部删除一个元素
        //     -没有参数
        //     -返回值是被删除的元素
        //     -改变原数组
        console.log(arr.shift());
        console.log(arr);
    </script>
</body>

</html>

6.4数组的操作方法-转换字符串

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        var arr = [2, 3, 4, 5, 6, 7];
        console.log(arr);

        // arr.join();
        // 将数组转换成字符串
        // 参数是指定一个字符来连接 数组的元素
        // 不改变原数组
        console.log(arr.join());
        console.log(arr.join(''));
        console.log(arr.join('-'));
        console.log(arr.join('&'));
        console.log(arr.join('!@#$%^&*()'));
        console.log(arr.join(':'));


        // arr.toString();
        // 将数组转换成字符串
        console.log(arr.toString());
        console.log(arr.toString(10));
        console.log(arr.toString(2));
    </script>
</body>

</html>

6.5数组其他操作方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 使用new 创建数组
        var arr = new Array(1, 2, 3, 4, 54, 5, 6, 6);
        // 首字母大写的方法 - 构造函数 只要是构造函数就能使用new操作符 实例化
        // String() Boolean() Number()
        console.log(arr);

        // Array.isArray() 判断传入的参数是否是一个数组
        // 返回值：是一个布尔值
        console.log(Array.isArray(arr));
        console.log(Array.isArray(123));
        console.log(Array.isArray(678));
        console.log(Array.isArray("123456789"));
        console.log(Array.isArray([]));


        // 颠倒数组 arr.reverse 
        console.log(arr.reverse());
    </script>
</body>

</html>

6.6复制数组与合并数组

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

<head>
    <meta charset="UTF-8">
    <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];

        // // arr.slice();
        // // 复制原数组的部分内容。
        // // start, end
        // // 从start 开始 复制到 end结束 不包含end
        // // 不改变原数组
        // var arr2 = arr.slice(0, 5);
        // console.log(arr2);
        // console.log(arr.slice(1, 5));



        // arr.concat 合并多个数组
        // 参数：多个数组以逗号分割
        // 返回值是合并后的新数组
        // 不改变元素组
        var arr3 = [5, 6, 7]
        var arr4 = [8, 9, 10]
        var arr5 = [11, 12, 13]

        var arrConcat = arr4.concat(arr3, arr5);
        console.log(arrConcat);
        console.log(arr3);
    </script>
</body>

</html>

6.7数组的增删改操作方法

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

<head>
    <meta charset="UTF-8">
    <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];

        // arr.splice();
        // 数组的增删改
        // 改变**原数组

        // 增
        // arr.splice(index, 0, item)
        // - 从索引index开始， deleteCount(可选):0
        // - 把item或者更多的内容插入到索引index的前面
        // - 返回值:返回空数组
        console.log(arr.splice(0, 0, "a", "b", "c"))
            // console.log(arr.splice(0,0,"a","b","c"))
        arr.splice(4, 0, 'to', 'day', 'is', '有点热');
        console.log(arr);


        // 删 
        // arr.splice(index, 0)
        //   从索引 index开始 
        //   删除几个
        arr.splice(0, 3)
            // 如果只写一个参数 那就是从索引index开始 删除到数组末尾
            // arr.splice(0)
        console.log(arr);


        // 改
        // arr.splice(index,xx,'','','');
        // - 从索引index开始
        // 删除几个
        // 插入几个

        arr.splice(0, 3, '1', '2', '3')
        console.log(arr);


        // 清空数组
        var arr2 = [1, 2, 3, 5, 5, 6];
        console.log(arr2);
        // 1.length = 0
        // arr2.length = 0;
        // console.log(arr2);

        // 2. splice(0)
        arr2.splice(0);
        console.log(arr2);

        // 3. = [];
    </script>
</body>

</html>

Follow_浩弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript day3

方括号中是一个返回非负整数的任意表达式。使用该语法即可以访问数组中的元素，又可以修改数组中的元素。数组创建完成后，我们可以 [ ] 操作符访问数组中的元素，数组的引用位于方括号左边。每个数组都有一个 length 属性，length 属性值代表数组中元素的个数。两种方式创建数组：直接使用“[]”的方式和实例化Array对象的方式。数组还可以根据维数划分为一维数组、二维数组、三维数组等多维数组。在创建完数组后，如何遍历数组中的元素，对其进行操作呢？
复制链接

扫一扫

专栏目录