JS 数组的简单操作，生成table表格

// 斐波那切数列
        // 1 1 2 3 5 8 13 21 34 55 ..... 
        // 除了第一项,第二项,之后,每一个数值是前两个数值的和

        // 什么计算第n项的斐波那切数是多少
        // 第一项是1, 第二项是1,
        // 之后其他的  第n项  (n-1) + (n-2) 

        function f(n){
            if(n == 1 || n == 2){
                return 1;
            }
            return f(n-1) + f(n-2);
        }

        console.log( f(50) );

        // 如果执行计算次数过多,需要生成的函数就会很多,那么执行效率就会很低
        // 实际项目中,能不用,就不用
        // 但是原理必须清楚
// 作业1  阶乘函数

        // 实现方法1 是 递归函数实现

        function factorial(num){
            if(num == 1){
                return 1;
            }
            return factorial(num-1) * num;
        }

        console.log( factorial(10) );

        // 实现方法2 是 循环实现

        function factorial2(num){
            var res = 1;
            for(var i = 1 ; i <= num ; i++){
                res *= i;
            }
            return res;
        }

        console.log( factorial2(10) );


        // 作业2  金字塔
        
        function setPyramid(line){
            if( typeof(line) != 'number' ){
                return document.write('您输入的参数有误');
            }

            for(var i = 1 ; i <= line ; i++){
                for(var j = 1 ; j <= line - i ; j++){
                    document.write('&nbsp');
                }

                for(var k = 1 ; k <= i ; k++){
                    document.write('* ');
                }
                document.write('<br>');
            }
        }

        setPyramid(5);

        console.log( setPyramid(5) );
// 函数的总结
        // 1,当你不熟悉函数的定义时,一定要按照我的步骤写函数
        //     先写代码,实现效果
        //     封装,将程序,写入函数{}中
        //     定义参数
        //     定义返回值
        //     容错
        //     默认值
        //     函数说明

        // 2,不是所有的函数都有参数和返回值
        //   如果需要再定义,如果不需要,就不要定义
        //   一般如果是直接输出内容,不需要定义 return 返回值

        // 3,如何定义 return 
        //   return 作用 : 定义返回值
        //                 定义终止函数程序的执行
        //   定义终止函数程序的执行 --- 一般是处理容错时使用
        //                            return一般都是定义在if判断中
        //                            返回值是报错信息
        //   定义返回值 --- 是函数执行运算等aw的结果
        //                 return 的是存储结果的变量或者数据
        //                 此时一般都是写在程序的最后 

        // 4,如果没有定义 return 的函数,函数的执行结果,是undefined

        /*  
            // 这个函数的执行结果,返回值,是123,调用这个函数,会获得123的结果
            function fun1(){
                return 123;
            }
            
            var a = fun1();   变量a中存储的是fun1()的执行结果,是123
            console.log( fun1() )  输出的也是fun1()的执行结果,是123


            // 这个函数的功能是向页面输出123--不是返回值也不是执行结果
            // 函数的执行结果,必须要使用return来定义
            // 这个函数的执行结果,返回值,是没有定义的,是undefined
            function fun2(){
                console.log(123);
            }

            var b = fun2()  // fun2()向控制台输出123,但是执行结果是undefined
                            // 变量b 存储的结果是 undefined

            console.log( fun2() )  // 输出fun2()的执行,也是undefined
        */
        
         // 5,函数的封装,没有固定的形式
         //   console.log() document.write()  return
         //   所有的函数程序内容,都要根据功能需求来定义 
         //   让你干什么,你就干什么,需要什么功能,你就写什么程序  
// 数组
        // 所谓的数组,就是数据的集合
        // 基本数据类型 : 在变量中只能存储一个单元的数据;
        // 数组,是数据的集合,可以存储多个单元的数据

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

        // 创建一个变量 存储数组,数组中有5个数据单元
        // 数组中的数据单元,可以是任意形式的数据内容
        // 数组中的数据单元,可以是一个数组,对象,函数
        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] );  // []中写两个索引,不会同时调取两个数据,后面的会覆盖前面的
                                  // 因此,一般只在[]中写一个索引下标
                                  // 数组单元,只能一个一个获取

        // 这是一个嵌套数组
        // 第一层的数组,我们称为 一维数组
        // 第二层的数组,我们称为 二维数组
        // 一维数组中,数据的调用,是,正常的调用方法,数组变量[索引]
        //
        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
<style>
        table{
            border-collapse: collapse;
        }
        table td{
            border:1px solid #000000;
        }
    </style>
</head>
<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 = 内容
        //             向指定的标签中,写入内容



 <style>
        table{
            border-collapse: collapse;
        }
        table td{
            border:1px solid #000000;
            width: 100px;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>
<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单元个
                // 可以生成对应的单元格
                // 每一个单元的内容,就是当前二维数组单元的数据内容
                // 获取二维border-collapse: collapse;
数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j
                // arr[i][j]
                str += `<td>${arr[i][j]}</td>`;
            }

            str += '</tr>';
        }

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