【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day06

日期对象
JavaScript给我们提供了Data日期对象，下面介绍一下Data对象的简单使用。

[JavaScript] 纯文本查看 复制代码

        /*
         *@author 传智播客
         */
        var date = new Date();//创建日期对象
    console.log(date.toDateString());//把 Date 对象的日期部分转换为字符串。
    console.log(date.toTimeString());//把 Date 对象的时间部分转换为字符串。
    console.log(date.toLocaleDateString());//根据本地时间格式，把 Date 对象的日期部分转换为字符串。
    console.log(date.toLocaleTimeString());//本地时间格式，把 Date 对象的时间部分转换为字符串。
        console.log(typeof date);//Object类型
    console.log(date.toString());//可以把日期对象转换成字符串的形式
    console.log(date.valueOf());//可以把日期对象转换成数值的形式 13位的数字
    //从 1970-1-1 00:00:00:000 到现在所过去的毫秒数
        
        
        var date1 = new Date(2015,10,1,10,10,10); //根据指定的日期创建一个时间对象
        var date2 = Date.parse("2015-10-1");//返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
    console.log(date1);
        
    var date2 = Date.now();//旧版浏览器不支持
    console.log(date2);
    var date3 = +new Date();//所有浏览器都支持
    console.log(date3);

学习完Date对象的基本用法，我们利用所学知识，做一个电子表的小案例。

[JavaScript] 纯文本查看 复制代码

        /*
         *@author 传智播客
         */
    //需求：设置demo的内部文本 显示当前时间
    var demo = document.getElementById("demo");
    //获取当前时间的函数
    function clock() {
        var d = new Date();//创建日期对象
        var hour = d.getHours();//小时
        hour = hour < 10 ? "0" + hour : hour;//改善一下格式
        var minute = d.getMinutes();//分钟
        minute = minute < 10 ? "0" + minute : minute;//改善一下格式
        var second = d.getSeconds();//秒钟
        second = second < 10 ? "0" + second : second;//改善一下格式
        var str = hour + ":" + minute + ":" + second;
        demo.innerHTML = str;
    }
    //clock();
    setInterval(clock, 1000);

String对象
我们之前学过基本数据类型中的字符串类型， 今天我们学习基本包装类String对象。

[JavaScript] 纯文本查看 复制代码

        /*
         *@author 传智播客
         */
    var str = "abc";
    console.log(str.length);

    var temp = new String(str);//1.创建临时的包装对象
    console.log(temp.length);//2.调用临时的包装对象的属性
    temp = null;//3.使用完成后对临时对象进行销毁
    var bool = false;
    var temp = new Boolean(bool);
    console.log(!!temp);
    console.log(temp);

下面我们学习一下String对象的一些常用方法。

[JavaScript] 纯文本查看 复制代码

        /*
         *@author 传智播客
         */
    //截取字符串：截取字符串"我爱中华人民共和国"，中的"中华"
    var str1 = "我爱中华人民共和国";
    console.log(str1.slice(2, 4)); //从start位置开始，截取到end位置，end取不到
    console.log(str1.substring(2, 4));//从start位置开始，截取到end位置，end取不到
    console.log(str1.substr(2, 2));//从start位置开始，截取length个字符
    
        //查找元素出现的位置：查找字符串中所有o出现的位置
    var str2 = "abcoefoxyozzopp";
    /*console.log(str2.indexOf("o", 0));
     console.log(str2.indexOf("o", 3 + 1));
     console.log(str2.indexOf("o", 6 + 1));
     console.log(str2.indexOf("o", 9 + 1));
     console.log(str2.indexOf("o", 12 + 1));*/
    var index = -1;
    do {
        index = str2.indexOf("o", index + 1);
        console.log(index);
    } while (index !== -1);
  
        //字符串替换：把字符串中所有的o替换成!
    var str3 = "abcoefoxyozzopp";
    console.log(str);
    //str3 = str3.replace("o", "!");
    //str3 = str3.replace(/o/, "!");
    //str3 = str3.replace(/o/g, "!");
    do {
        str = str3.replace("o", "!");
    } while (str3.indexOf("o") !== -1);
console.log(str);

//大小写转换
var str4 = "aBcDeF";
console.log(str4.toUpperCase());
console.log(str4.toLowerCase());
console.log(str4.toLocaleUpperCase());
console.log(str4.toLocaleLowerCase());

学完String对象的基本用法之后我们做两个案例进行巩固一下。

[JavaScript] 纯文本查看 复制代码

        /*
         *@author 传智播客
         */
    //统计一个字符串中每个字符出现的次数
    var str = "abcoefoxyozzopp";
    var o = {};
    for (var i = 0; i < str.length; i++) {
        //var item = str[i];//每个字符[/i]
        var item = str.charAt(i);//所有浏览器都支持
        if (o[item]) {
            //o[item] = o[item] + 1;
            o[item]++;//之前出现过 就让出现次数加一
        } else {
            o[item] = 1;//之前没有出现过 现在出现了 出现次数就是1
        }
    }
    //console.log(o);
    for (var k in o) {
        console.log(k + "出现了" + o[k] + "次");
    }

去掉字符串中的空格

[JavaScript] 纯文本查看 复制代码

        /*
         *@author 传智播客
         */
    //把一个字符串中所有的空格全部去掉" aaa df sdd sds sd "
    var str = " aaa df sdd sds sd ";
    console.log(str);
    //console.log(str.trim());//只能去掉两端的空白符
    var arr = str.split(" ");//按照指定字符 对字符串进行切割 返回一个数组
    console.log(arr);
    console.log(arr.join(""));

函数的两种定义方式

[JavaScript] 纯文本查看 复制代码

        /*
         *@author 传智播客
         */
    //var fn2 = undefined;
    //预解析 声明提升 变量声明提升 函数声明提升
    //console.log(fn1(1, 2));//函数声明提升
    console.log(fn2);
    console.log(fn2(1, 2));//变量声明提升 只提升声明不提升赋值
    //函数声明
    function fn1(a, b) {
        return a + b;
    }
    //函数表达式
    var fn2 = function (a, b) {
        return a + b;
    };

变量的作用域
变量分为全局变量和局部变量，局部变量只能在当前函数内部使用，全局变量在哪儿都能用。

[JavaScript] 纯文本查看 复制代码

    /*
         *@author 传智播客
         */
    //在最外层声明的变量就是全局变量
    var a = "a";//全局变量在哪儿都能用
    console.log(a);
    function fn() {
        console.log(a);
    }
    fn();
    function fn1() {
        var b = "b";//在函数内部声明的变量是局部变量
        //局部变量只能在当前函数内部使用
        console.log(b);
        c = "c";//在函数内部 没有加var声明的变量是全局变量
        console.log(c);
    }
    fn1();
    //console.log(b);//报错
    console.log(c);

作用域链

[JavaScript] 纯文本查看 复制代码

    /*
         *@author 传智播客
         */
    //作用域链
    //1全局变量 解析器先在函数内部作用域寻找name1的声明，如果找不到，就会向上级作用域中寻找变量name1
    /*var name1 = "zs";
    function f1() {
        name1 = "ls";
    }
    f1();
    console.log(name1);//ls*/
    //2局部变量 解析器先在函数内部的作用域寻找name2的声明，如果找到就使用局部变量
    /*var name2 = "zs";
    function f2() {
        var name2 = "ls";
    }
    f2();
    console.log(name2);//zs*/
    //3作用域链
    /*var color = "red";
    function outer() {
        var anotherColor = "blue";

        function inner() {
            var tmpColor = color;
            color = anotherColor;
            anotherColor = tmpColor;
            console.log(anotherColor);//red
        }

        inner();
    }
    outer();
    console.log(color);//blue*/
    //4作用域链 所谓的不加var就是全局变量其实并不准确
    var name3 = "zs";
    function f3() {
        var name3 = "ls";

        function f4() {
            name3 = "ww";
        }

        f4();
        console.log(name3);//ww
    }
    f3();
    console.log(name3);//zs

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-55696830

太详细了，js初学者的福音