数组使用方法集合（建议收藏）

我就是我 2023-10-03 15:58 10阅读 0赞

## 数组 ##

### 建立数组 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>数组</title>
        <script>
            // 1.数组(Array) ：就是一组数据的集合 存储在单个变量下的优雅方式 
            // 2. 利用new 创建数组
            var arr = new Array(); // 创建了一个空的数组
            // 3. 利用数组字面量创建数组 []
            var arr = []; // 创建了一个空的数组
            var arr1 = [1, 2, 'pink老师', true];
            // 4. 我们数组里面的数据一定用逗号分隔
            // 5. 数组里面的数据 比如1,2， 我们称为数组元素
            // 6. 获取数组元素  格式 数组名[索引号]  索引号从 0开始 
            console.log(arr1);
            console.log(arr1[2]); // pink老师
            console.log(arr1[3]); // true
            var arr2 = ['迪丽热巴', '古丽扎娜', '佟丽丫丫'];
            console.log(arr2[0]);
            console.log(arr2[1]);
            console.log(arr2[2]);
            console.log(arr2[3]); // 因为没有这个数组元素 所以输出的结果是 undefined
        </script>
    </head>
    
    <body>
    
    </body>
    
    </html>

### 数组存放1-10 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>数组存放1-10</title>
        <script>
            // 新建一个数组，里面存放10个整数（ 1~10）
            // 核心原理：使用循环来追加数组。
            // 1、声明一个空数组 arr。
            // 2、循环中的计数器 i  可以作为数组元素存入。
            // 3、由于数组的索引号是从0开始的， 因此计数器从 0 开始更合适，存入的数组元素要+1。
            var arr = [];
            for (var i = 0; i < 100; i++) {
          
    
                // arr = i; 不要直接给数组名赋值 否则以前的元素都没了
    
                arr[i] = i + 1;
            }
            console.log(arr);
        </script>
    </head>
    
    <body>
    
    </body>
    
    </html>

### 数组去重 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>数组去重</title>
        <script>
            // 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
    
            // 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
    
            // 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否
    
            // 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有重元素
    
            // 封装一个 去重的函数 unique 独一无二的 
            function unique(arr) {
          
                var newArr = [];
                for (var i = 0; i < arr.length; i++) {
          
                    if (newArr.indexOf(arr[i]) === -1) {
           // 它只返回第一个满足条件的索引号 
    
                        newArr.push(arr[i]);
                    }
                }
                return newArr;
            }
    
            // var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
            var demo = unique(['blue', 'green', 'blue'])
            console.log(demo);
        </script>
    </head>
    
    <body>
    
    </body>
    
    </html>

### 数组长度 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>数组长度</title>
        <script>
            // 数组长度 数组名.length
            var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', 'pink'];
            for (var i = 0; i < 7; i++) {
          
                console.log(arr[i]);
            }
            console.log(arr.length);
            for (var i = 0; i < arr.length; i++) {
          
                console.log(arr[i]);
            }
            // 1. 数组的长度是元素个数  不要跟索引号混淆
            // 2. arr.length 动态监测数组元素的个数
        </script>
    </head>
    
    <body>
    
    </body>
    
    </html>

### 数组转换为字符串 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>数组转换为字符串</title>
        <script>
            // 将数组 ['red', 'green', 'blue', 'pink'] 转换为字符串，并且用 | 或其他符号分割
            // 1.需要一个新变量用于存放转换完的字符串 str。
            // 2.遍历原来的数组，分别把里面数据取出来，加到字符串里面。
            // 3.同时在后面多加一个分隔符
            var arr = ['red', 'green', 'blue', 'pink'];
            var str = '';
            var sep = '*';
            for (var i = 0; i < arr.length; i++) {
          
                str += arr[i] + sep;
            }
            console.log(str);
        </script>
    </head>
    
    <body>
    
    </body>
    
    </html>