回顾

<script>
    /*
    Object : 数据类型
        - 语法 : {key1 : value1 , key2 : value2}
        - 值是什么数据类型 : 任意类型
        - 键是一个字符串
        - 怎么获取属性 : 
            - obj.attr (attr:不能是一个数字)
            - obj["attr"] 
        - for(var i in obj){
            //i是obj的key
            //obj[i] val
        }
        - 属性 : 属性是obj的变量
        - 方法 : 方法是obj的函数
    */
   
    /*
    函数 : 
    function funcName(形参1....){
        //程序
    }
    funcName(实参1...);

    匿名函数 : 
        - 直接看没有名称
        - var fn = function (){}
        - fn();
    */
    
    /* var obj = new Object(); //new一个obj
    obj.name = "张三";
    obj.sex = "男";
    obj.age = "18";
    //obj没有length的属性;
    obj.length = function (){
        var n = 0;
        for(var i in obj){
            n++;  
        }
        // return 返回 或 抛出最终结果,然后终止函数代码
        return n;
    }
    console.log(obj.length());
    // 输出结果为4  */
    
    /* var obj1 = {name:"A"};
    var obj2 = {name:"A"};
    obj2.name = "B";
    console.log(obj1.name); 
    // 输出结果为A */
   
    
</script>

作业

<script>
    
    /* // 罗马文
    function num2str(x){
        var select_dict = {
            "0":"Q","1":"I","2":"II","3":"III","4":"IV",
            "5":"V","6":"VI","7":"VII","8":"VIII","9":"IX",};
        var res = "";
        for(var i=0;i<x.length;i++){
            //x[i] 字符x[0]=1
            //select_dict[1] = "I"
            res += select_dict[x[i]] + " ";
        }
        console.log(res);
    } 
    num2str("13912346500"); */
    

    /* 
    // 兔子   : 0  1   2   3   4    5    6     7     8    
    // cub    : 1  0   1   1   2    3    5     8    13
    // bunny  : 0  1   0   1   1    2    3     5     8
    // rabbit : 0  0   1   1   2    3    5     8    13
    
    var month = 8;
    var cub = 1;
    var bunny = 0;
    var rabbit = 0;
    for(var i=1;i<=month;i++){
            //记录之前的数量的
            var before_cub    = cub;
            var before_bunny  = bunny;
            var before_rabbit = rabbit;
            //变化
            cub = before_bunny + before_rabbit;
            bunny = before_cub;
            rabbit = before_bunny + before_rabbit;
    }
    console.log(cub,bunny,rabbit);
     */


    /* 
    // A:15  B:3  C:2  = 200
    // 排列组合
    var A_price = 15;
    var B_price = 3;
    var C_price = 2;

    var n = 0;
    for(var i=1;i<(200/A_price);i++){//A
        for(var j=1;j<(200/B_price);j++){//B
            for(var k=1;k<(200/C_price);k++){//C
                if((A_price*i)+(B_price*j)+(C_price*k) === 200){
                    n++;
                }
            }
        }
    }
    console.log(n);
     */

     
    /* 
    // 100 回弹原来的一半  第10次高度和路程
    var s = 100;
    var n = 10;
    var r = 0;
    for(var i=0;i<n;i++){
        r += s/2;
        s /=2 ;
    }
    console.log(r);
     */

</script>

一、debug

<script>
    // debug ：解决  - 语法出错  - 逻辑出错
   
    console.log({}.length);
    var a = 1; //var a; a = 1;
    c = 2; //var c;
    function b(){
        console.log(2);
    }
    console.log(a);
</script>

二、全局变量和局部变量

<script>
    /*
    全局变量 : 
        - var
        - 在整个html中都能找到
        - 函数可以找到全局变量的值吗?可以

    局部变量 :
        - let
        - 局部变量声明在函数内部
        - 函数外可以找到吗?不能
    */
   
    var a = 2;
    function func1(){
        var a = 1; //能够获取全局变量并且给a修改值
    }
    func1();
    console.log(a);
</script>

三、作用域

<script>
    /*
    作用域链:
        - 作用域当中有一个就近原则
        - 如果当前作用域当中存在需要的变量,那么会在当前作用域中查找
        - 如果当前作用域中没有需要的变量,则向上一级进行查找
        
    最大的作用域 : 
        - window(浏览器窗口)(父子关系)
            - 一层函数
                - 二层函数....

    作用域 : 
        - 函数的作用域在调用的时候产生,调用结束以后自动销毁;(GC 垃圾回收)
        - 在JS中默认的作用域叫做 词法作用域 
            - 而函数的作用域比较特殊
            - 函数默认提升到最顶端(函数提升)
    */
    
    /* var a = 1;
    function fo(){
        console.log(a);  //输出undefined
        var a = 2;
        function foo(){
            console.log(a);  //输出2
            a = 3;
        }
        foo();
    }
    fo(); */
    
    /* function func(){
        return function (){
            console.log(a);
        }
    }
    var a = 1;
    func()();//输出1
    a = 2;
    func()();//输出2  */
</script>

四、this指向

<script>
    // this : 指向  - 理解myself(我自己) 
   
    // console.log(this); // 默认window

    /* function a(){
        console.log(this); //没什么变化, 默认window.a()
    }
    a(); */

    
    /* var obj = new Object(); // 创建一个新对象
    obj.name = "ABC";
    obj.func = function (){
        console.log(this); //对象的this代表的是当前对象本身
    }
    // obj.func()
    console.log(obj.name);
    //调用的是obj它的方法 
    console.log(obj.func()); //{name: 'ABC', func: ƒ} */
    

    
    /* var obj1 = {
        name : "张三",
        sex : "男",
        age : "18",
        action1 : function(a){
            this.name = a;
        }
    }
    console.log(obj1.name); // 张三
    obj1.action1("王五"); // a="王五"
    console.log(obj1.name); // 王五 */
   
</script>

五、array类型

<script>
    /*
    Array : 数组
        - [1,null,function,Object]
        - new Array()
        - 组成 :
            - 下标(index) : 下标是唯一的(不重复的)
            - 值(value) : 任意数据
            - arr.length
        - arr中 this代表数组Array本身
    */

    /* var arr = new Array();
    //判断arr是对象还是数组 返回true
    console.log(arr instanceof Array);  */

    /* var a = 1;
    var arr = [1,2,3,4,5,6,a];
    console.log(arr);//打印数组：Array(7) */

    /* var arr = new Array();
    arr[0] = 1;
    arr[1] = 2;
    arr[2] = 3;
    arr[3] = 5;
    arr[4] = function(){
        console.log(this);  //(5) [1, 2, 3, 5, ƒ]
        console.log(this[4]); //f(){}
    }

    console.log(arr);//(5) [1, 2, 3, 5, ƒ]
    console.log(arr.length);
    for(var i in arr){
        console.log(i);
    }
    for(var i=0;i<arr.length;i++){
        console.log(i,arr[i]);//下标和内容
    }
    arr[4](); */
</script>

六、array的切片

<script>
    /*
    索引的两种方式 :
        - 枚举索引 : 下标(index)
        - 关联索引 : 键(key)
    */
    //区间 : 半闭区间  左闭([)右开())
    //闭区间 : 计算机不常用  左闭([)右闭(])
    //arr.slice : 切片
    var arr = [1,2,3,40,"A",6,7,8,9,10];
    
    console.log(arr.slice(0,5)); //[0 <= index < 5)  获取前5个数
    console.log(arr.slice(2,5)); //[2 <= index < 5)  获取前3个数
    console.log(arr.slice(3));   // 从下标3开始,一直到结束
    //带负号的下面是倒取
    console.log(arr.slice(3,-1)); // [3<= index < 9)
    console.log(arr.slice(-3));   // 从下标7开始
    console.log(arr.splice(-2));  //切片

</script>

七、array的插入和删除

<script>
    //插入
    /*
        堆栈结构 : 先进后出
        队列结构 : 先进先出
    */

    var arr = ["A",null,1,true,2];
    //从尾部插入
    arr.push(false);
    //从尾部删除
    arr.pop(); 
    //从头部删除
    arr.shift(); 
    //从头部插入
    arr.unshift(0);

    // 删除值,但是保留位置
    delete arr[3]; 
    console.log(arr[3]);
</script>

八、数组嵌套对象

<script>
    // 表格输出数组
    var data = [
        {"账号":0001,"姓名":"张三","性别":"男"},
        {"账号":0002,"姓名":"张一","性别":"男"},
        {"账号":0003,"姓名":"张二","性别":"男"},
        {"账号":0004,"姓名":"张四","性别":"男"},
        {"账号":0005,"姓名":"张六","性别":"男"},
    ]
    
    /* 
    1.循环array
    2.循环object
    3.一个obj是一行信息,一个属性是一个单元格 */

    var tab = "<table border=1>";
    
    //循环obj的key，做表格标题
    tab += "<tr>";
    for(var i in data[0]){
        tab += "<th>" + i + "</th>";//找出key做标题
    }
    tab += "</tr>";

    //循环arr
    for(var i=0;i<data.length;i++){//当前的i是数组的下标
        tab += "<tr>";
        for(var j in data[i]){//当前的j是对象的key
            tab += "<td>" + data[i][j] + "</td>";
        }
        tab += "</tr>";
    }
    tab += "</table>";
    document.write(tab);

    //非必写
    //乱序的数组,实现排序,封装成函数
    //乱序的数组(数组中包含重复值),实现数组去重
</script>