JS09-数组

最新推荐文章于 2024-11-14 10:56:19 发布

咩有猫腻.

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量344

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/DcTbnk/article/details/104979792

版权

js 专栏收录该内容

110 篇文章 2 订阅

订阅专栏

一.数组

所谓的数组,就是数据的集合
基本数据类型 : 在变量中只能存储一个单元的数据;
数组,是数据的集合,可以存储多个单元的数据

数组的创建方式

1,字面量方式
var 变量 = [ 数据1 , 数据2 , 数据3 , … ];
在 [] 中,定义多个数据单元,中间使用逗号间隔

创建一个变量存储数组,数组中有n个数据单元
数组中的数据单元,可以是任意形式的数据内容(基本数据类型和复杂数据类型)
数组中的数据单元,可以是一个数组,对象,函数

 var arr = [1,2,3,4,5,'北京','上海',true,false,undefined,null,[6,7,8,9,10],{name:'张三'},function fun(){console.log}];

    console.log(arr);

在这里插入图片描述
2, 构造函数方式 -- 创造一个空数组
然后再向这个数组中添加单元
这是JavaScript的固定语法,必须这么写
一般不用这种方式来定义数组

调用构造函数 Array() 通过 new 关键词,来生成数组的实例化对象,存储在变量中
new 是JavaScript的关键词
Array() 是JavaScript定义好的构造函数,可以直接使用

var arr2 = new Array();

console.log(arr2);

数组是JavaScript中,一个非常重要的数据类型
后端接口返回给我们的数据行是,往往都是数组的形式

二.数组的简单操作

数组的简单操作

1, 定义数组

字面量方式
    var arr = [1,2,3,4,5];
    console.log(arr);

内置构造函数方式
    var arr2 = new Array();

2, 调用数据的数据
(1) 索引下标
JavaScript程序给数组中的每一个单元都定义了一个编号,是从0开始的整数
通过索引下标,就可以获取到对应的具体某一个数据

console.log( arr[0] );    // 调用索引下标是0的第一个单元的数据  
console.log( arr[1] );    // 调用索引下标是1的第二个单元的数据  
console.log( arr[2] );    // 调用索引下标是2的第三个单元的数据  
console.log( arr[3] );    // 调用索引下标是3的第四个单元的数据  
console.log( arr[4] );    // 调用索引下标是4的第五个单元的数据  
console.log( arr[400] );  // 调用不存在的索引下标,执行结果是undefined
console.log( arr[0,1] );  // []中写两个索引,不会同时调取两个数据,后面的会覆盖前面的
                            // 因此,一般只在[]中写一个索引下标
                            // 数组单元,只能一个一个获取

(2)这是一个嵌套数组
第一层的数组,我们称为一维数组
第二层的数组,我们称为二维数组
一维数组中,数据的调用,是,正常的调用方法,数组变量[索引]

var arr2 = [ '北京' , '上海' , '广州' , ['a' , 'b' , 'c' , 'd'] ];

console.log(arr2);

console.log(arr2[0])     // 北京
console.log(arr2[1])     // 上海
console.log(arr2[2])     // 广州
console.log(arr2[3])     // 二维数组['a' , 'b' , 'c' , 'd']
console.log(arr2[3][0])  // 二维数组中,索引下标是0的第一个单元 a
console.log(arr2[3][1])  // 二维数组中,索引下标是1的第二个单元 b
console.log(arr2[3][2])  // 二维数组中,索引下标是2的第三个单元 c
console.log(arr2[3][3])  // 二维数组中,索引下标是3的第四个单元 d

数组的length属性
是数组特有的属性,表示数组的长度,也就是单元的个数
数组中最大的索引下标是 length-1
获取length属性值 : 数组变量.length
在这里插入图片描述

三.数组的应用

demo1

demo1
<body>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>性别</td>
            </tr>
        </thead>
        <!-- 给标签定义id属性和属性值,通过属性值来操作标签 -->
        <tbody id="tb"></tbody>
    </table>

    <script>
        // 根据数组的内容,生成页面中的table表格

        // 我们从数据库或者接口获取到的数据信息,往往都是数组形式
        // 而且基本都是二维数组形式
        // 我们现在本地建立数组,模拟数据信息

        // 建立数组,模拟本地数据信息
        var arr = [
            ['张123',18,'北京','男'],
            ['李四',19,'上海','女'],
            ['王五',20,'广州','男'],
            ['赵六',21,'重庆','女'],
        ];

        // 定义变量,存储生成的字符串内容,使用 += 拼接字符串形式
        var str = '';

        // 外层循环,生成tr
        for(var i = 0 ; i <= arr.length-1 ; i++){
            // 定义tr标签
            str += '<tr>';
            // 第一个单元格,内容是一维索引+1
            str += `<td>${i+1}</td>`;
            // 内层循环,生成其他td标签,内容是二维数组内容
            for(var j = 0 ; j <= arr[i].length-1 ; j++){
                str += `<td>${arr[i][j]}</td>`; 
            }
            str += '</tr>';
        }
        // 将循环生成的字符串,写入到tbody标签中
        tb.innerHTML = str;

        // 总结
        // 利用获取到的数据 (当前自定义数组模拟)
        // 来渲染生成页面
        // 页面的内容完全是由获取到的数据,来决定的,不再是一阶段时,固定的内容了

        // 准备知识1 : 通过 id属性值,可以直接操作标签,只能是id属性值
        // 准备知识2 : 标签id属性值.innerHTML = 内容
        //             向指定的标签中,写入内容

        
    </script>
</body>

demo1的图释
在这里插入图片描述
demo1的语言详解

<body>
    <table>
        <!-- 固定的页面内容 -->
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>性别</td>
            </tr>
        </thead>
        <!-- 根据数据库信息的渲染生成的页面内容 
             给要要操作的tbody标签,添加id属性属性值,通过id属性值,来操作标签
        -->
        <tbody id="tb"></tbody>
    </table>

    <script>  
        // 定义的数组,根据数组,渲染生成页面内容  
        var arr = [
            ['张123',18,'北京','男'],
            ['李四',19,'上海','女'],
            ['王五',20,'广州','男'],
            ['赵六',21,'重庆','女'],
        ];
        console.log(arr)
        // 定义变量,存储要写入的内容
        var str = '';

        // 外层循环,生成tr标签,有一维单元,就循环生成几个tr标签
        // 从第一个索引 0 开始,最终数值是索引下标的最大值 --- 数组.length-1
        // 生成所有索引下标的数值
        // 根据数组的结构,定义循环次数,起始数值一定是0,结束数值是索引下标的最大值
        for(var i = 0 ; i <= arr.length-1 ; i++){
            console.log(arr[i]);
            
            // 外层循环生成tr标签,循环几次,就生成几个tr标签
            // 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
            str += '<tr>';
            // 定义tr标签的内容,也就是td单元格标签
            // 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1
            str += `<td>${i+1}</td>`;

            // 其他单元格,是内层循环生成的,循环的对象是二维数组
            // arr[i] 拿到的就是 每次循环,当前行,对应的二维数组 
            // 循环的对象是 arr[i] , 生成 arr[i] 的所有的 索引下标
            // 通过索引下标,获取对应的数据
            // 起始数值是0 终止数值是 arr[i]的最大索引下标,arr[i]的length-1  arr[i].length-1
            for(var j = 0 ; j <= arr[i].length-1 ; j++ ){
                // 二维数组有几个单元,就循环几次,生成几个td单元个
                // 可以生成对应的单元格
                // 每一个单元的内容,就是当前二维数组单元的数据内容
                // 获取二维数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j
                // arr[i][j]
                str += `<td>${arr[i][j]}</td>`;
            }

            str += '</tr>';
        }


        // 将定义好的内容,写入到taody标签中
        tb.innerHTML = str;
    
    </script>
</body>

demo2
在这里插入图片描述