【JavaScript】数组 ⑤ ( 数组案例 | 创建数组存放 1 - 10 元素 | 数组筛选 | 删除数组元素 | 翻转数组元素 | 数组元素冒泡排序 )

韩曙亮

发布于 2024-04-02 09:55:36

820

发布于 2024-04-02 09:55:36

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、JavaScript 数组案例

1、创建数组存放 1 - 10 元素

首先 , 声明一个空数组 ;

然后 , 通过 for 循环 , 通过 " 追加 " 的方式 , 将 1 ~ 10 整数存储到数组中 ;

追加方法 : 向数组中追加元素时 , 直接向 arr 数组的 arr.length 索引位置设置数组元素即可 ;
循环控制 : 循环控制变量 i 的初始值设置为 1 , 每次累加 1 , 直到大于 10 以后停止循环 ;

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建数组存放 1 - 10 元素

        // 声明空数组
        var arr = [];

        // 通过 for 循环设置数组元素
        for (var i = 1; i <= 10; i++) {
            // 向数组中追加元素时 
            // 直接向 arr 数组的 arr.length 索引位置设置数组元素即可
            arr[arr.length] = i;
        }

        // 打印数组
        console.log(arr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、数组筛选

将给定数组中大于 5 的元素筛选出来 , 放入新数组中 ;

首先 , 创建一个新数组 , 用于存放筛选出来的大于 5 的元素 ;

然后 , 遍历整个数组 , 将符合条件的元素放入新数组中 ;

这里注意 , 向新数组中追加元素时 , 直接向 newArr 数组的 newArr.length 索引位置设置数组元素即可 ;
也可以定义一个数值变量 , 存储新数组的索引值 , 每次赋值后 , 新索引值累加 ;

代码示例 1 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组筛选

        // 声明空数组
        var arr = [9, 5, 2, 7];

        // 存放筛选后的元素的数组
        var newArr = [];

        // 通过 for 循环设置数组元素
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] > 5) {
                // 向数组中追加元素时 
                // 直接向 arr 数组的 arr.length 索引位置设置数组元素即可
                newArr[newArr.length] = arr[i];
            }
        }

        // 打印数组
        console.log(newArr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

3、数组筛选 2

本示例是上面数组筛选的第二种方法 , 定义一个数值变量 , 存储新数组的索引值 , 每次赋值后 , 新索引值累加 ;

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组筛选

        // 声明空数组
        var arr = [9, 5, 2, 7];

        // 存放筛选后的元素的数组
        var newArr = [];

        // 新数组的插入索引
        // 定义一个数值变量 , 存储 新数组 的索引值 
        // 每次赋值后 , 新索引值累加
        var index = 0;

        // 通过 for 循环设置数组元素
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] > 5) {
                // 向数组中追加元素时 
                // 直接向 index 索引位置设置元素值 
                // index 索引值每次设置完毕后都会自增
                newArr[index] = arr[i];
                index++;
            }
        }

        // 打印数组
        console.log(newArr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

4、删除数组元素

将数组 [9, 5, 2, 7, 2, 2] 中的元素 2 删除 ;

分析 : 原来的数组中包含 3 个 2 元素 , 如果直接将 2 删除 , 还需要移动数组元素 , 这里直接将符合要求的数组放在新数组即可 ;

实现方案 :

首先 , 创建一个新数组 ;
然后 , 遍历数组 , 将符合要求的元素放入新数组 ;
- 在新数组中追加元素时 , 直接向 newArr.length 索引位置追加元素值 ;

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组筛选

        // 声明空数组
        var arr = [9, 5, 2, 7, 2, 2];

        // 存放筛选后的元素的数组
        var newArr = [];

        // 通过 for 循环设置数组元素
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 2) {
                // 向数组中追加元素时 
                // 直接向 arr 数组的 arr.length 索引位置设置数组元素即可
                newArr[newArr.length] = arr[i];
            }
        }

        // 打印数组
        console.log(newArr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

5、翻转数组元素

将数组 [9, 5, 2, 7] 中的元素进行翻转操作 , 变为 [7, 2, 5, 9] ;

实现思路 :

首先 , 创建一个新数组 , 存储翻转后的元素 ;
然后 , 倒序遍历原数组 , 然后追加到新数组中 ;
- 在新数组中追加元素时 , 直接向 newArr.length 索引位置追加元素值 ;

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组筛选

        // 声明空数组
        var arr = [9, 5, 2, 7];

        // 存放筛选后的元素的数组
        var newArr = [];

        // 通过 for 循环设置数组元素
        for (var i = arr.length - 1; i >= 0; i--) {
            // 向数组中追加元素时 
            // 直接向 arr 数组的 arr.length 索引位置设置数组元素即可
            newArr[newArr.length] = arr[i];
        }

        // 打印数组
        console.log(newArr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

6、数组元素冒泡排序

将数组 [9, 5, 2, 7] 中的元素进行冒泡排序 ;

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组筛选

        // 声明空数组
        var arr = [9, 5, 2, 7];

        // 外层循环负责 控制 趟数
        for (var i = 0; i < arr.length; i++) {
            // 内层循环 负责 0 到 arr.length - i - 1 的元素中 , 
            // 确保最大值赋值给 arr.length - i - 1 元素
            for (var j = 0; j < arr.length - i; j++) {
                // 每次 i 循环 , 循环 arr.length - i 次
                // 保证
                if (arr[j] > arr[j + 1]) {
                    // 交换 j 和 j + 1 的元素值
                    // 保证 j + 1 位置的元素大于 j 位置的元素
                    var t = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = t;
                }
            }
        }

        // 打印数组
        console.log(arr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :