Webcourse/12-内置对象.md at e588fd2b905cd3f677c2c60e30f2b22b0bbea4e4

webcourse/Webcourse

Fork 0

qianguyihao e588fd2b90 update:数据类型

2018-12-20 21:08:55 +08:00

15 KiB

Raw Blame History

内置对象

内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。

JavaScript的内置对象：

内置对象	对象说明
Arguments	函数参数集合
Array	数组
Boolean	布尔对象
Date	日期时间
Error	异常对象
Function	函数构造器
Math	数学对象
Number	数值对象
Object	基础对象
RegExp	正则表达式对象
String	字符串对象

内置对象：Date

Date对象的声明

写法一：

    var date1 = new Date();
    console.log(date1);

写法二：（兼容性最强）

    var date2 = new Date("2017/09/06 09:00:00");
    console.log(date2);

写法三和写法四：（不常用）

    var date3 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)');  //写法三

    var date4 = new Date(2017, 1, 27);    //写法四

以上四种写法的打印结果是：

Date对象的方法：获取日期和时间

Date对象有如下方法：

getDate() 获取日 1-31
getDay() 获取星期 0-6（0代表周日）
getMonth() 获取月 0-11（1月从0开始）
getFullYear() 获取完整年份（浏览器都支持）
getHours() 获取小时 0-23
getMinutes() 获取分钟 0-59
getSeconds() 获取秒 0-59
getMilliseconds() 获取毫秒（1s = 1000ms）
getTime () 返回累计毫秒数(从1970/1/1午夜)

为何累计毫秒数是从1970/1/1开始算起呢？

打印结果举例：

返回距离1970/01/01毫秒数

也就是返回：此刻时间减去 1970/01/01 的毫秒数。

代码实现：

    var date1 = Date.now();
    var date2 = +new Date();
    var date3 = new Date().getTime();
    var date4 = new Date().valueOf();

打印结果：

举例：模拟日历

要求每天打开这个页面都能定时显示当前的日期。

代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 800px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        //模拟日历
        //需求：每天打开这个页面都能定时显示年月日和星期几

        //1.创建一个当前日期的日期对象
        var date = new Date();
        //2.然后获取其中的年、月、日和星期
        var year = date.getFullYear();
        var month = date.getMonth();
        var hao = date.getDate();
        var week = date.getDay();
//        console.log(year+" "+month+" "+hao+" "+week);
        //3.赋值给div
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var div = document.getElementsByTagName("div")[0];
        div.innerText = "今天是："+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];

    </script>

</body>
</html>

实现效果：

举例：发布会倒计时

实现思路：

设置一个定时器，每间隔1毫秒就自动刷新一次div的内容。

代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 1210px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
<div></div>

<script>
    var div = document.getElementsByTagName("div")[0];
    var timer = setInterval(fn, 1);

    function fn() {
        var nowtime = new Date();
        var future = new Date("2019/02/03 11:20:00");
        var timeSum = future.getTime() - nowtime.getTime();  //获取时间差：发布会时间减去此刻的毫秒值
        var day = parseInt(timeSum / 1000 / 60 / 60 / 24);
        var hour = parseInt(timeSum / 1000 / 60 / 60 % 24);
        var minu = parseInt(timeSum / 1000 / 60 % 60);
        var sec = parseInt(timeSum / 1000 % 60);
        var millsec = parseInt(timeSum % 1000);

        //问题处理：所有的时间小于10的时候，在前面自动补0，毫秒值要补双0（比如如，把 8 秒改成 08 秒）
        day = day < 10 ? "0" + day : day;  //day小于10吗？如果小于，就补0；如果不小于，就是day本身
        hour = hour < 10 ? "0" + hour : hour;
        minu = minu < 10 ? "0" + minu : minu;
        sec = sec < 10 ? "0" + sec : sec;
        if (millsec < 10) {
            millsec = "00" + millsec;
        } else if (millsec < 100) {
            millsec = "0" + millsec;
        }
//        console.log(day);
//        console.log(parseInt(timeSum/1000/60/60/24));
        if (timeSum < 0) {
            div.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
            clearInterval(timer);
            return;
        }
        div.innerHTML = "距离苹果发布会还有" + day + "天" + hour + "小时" + minu + "分" + sec + "秒" + millsec + "毫秒";
    }
</script>
</body>

</html>

实现效果：

内置对象String

简单数据类型、复杂数据类型

1、简单数据类型：

注意，之前学习的简单数据类型string是无法绑定属性和方法的。比如说：

    var str = "smyhvae";

    str.aaa = 12;
    console.log(typeof str);  //打印结果为：string
    console.log(str.aaa);     //打印结果为：undefined

上方代码中，当我们尝试打印str.aaa的时候，会发现打印结果为：undefined。

当然，我们可以打印str.length、srt.indexOf("m")等等。因为这两个方法的底层做了数据类型转换。

2、复杂数据类型：

复杂数据类型String是可以绑定属性和方法的。如下：

    var strObj = new String("smyhvae");
    strObj.aaa = 123;
    console.log(strObj);
    console.log(typeof strObj);  //打印结果：Object
    console.log(strObj.aaa);

打印结果：

同理，内置对象Number也有一些自带的方法，比如：

Number.MAX_VALUE;
Number.MIN_VALUE;

内置对象Boolean也有一些自带的方法，但是用的不多。

下面讲一下内置对象String的常见方法。

charAt/charCodeAt：1.2.1 给索引查字符

    字符 = Str.charAt(索引值);

解释：获取相应位置的字符。

字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

    字符编码 = Str.charCodeAt(索引值);

解释：获取相应位置的Unicode字符编码。

举例1：

   var str = new String("smyhvae");

    for (var i = 0; i < str.length; i++) {
        console.log(str.charAt(i));
    }

打印结果：

上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。

举例2：打印字符串的占位长度

提示：一个英文占一个位置，一个中文占两个位置。

思路：判断该字符是否在0-127之间（在的话是英文，不在是非英文）。

代码实现：

<script>
    //    sort();   底层用到了charCodeAt();

    var str = "I love my country!我你爱中国！";

    //需求：求一个字符串占有几个字符位。
    //思路；如果是英文，站一个字符位，如果不是英文占两个字符位。
    //技术点：判断该字符是否在0-127之间。（在的话是英文，不在是非英文）
    alert(getZFWlength(str));
    alert(str.length);

    //定义方法：字符位
    function getZFWlength(string) {
        //定义一个计数器
        var count = 0;
        for (var i = 0; i < string.length; i++) {
            //对每一位字符串进行判断，如果Unicode编码在0-127，计数器+1；否则+2
            if (string.charCodeAt(i) < 128 && string.charCodeAt(i) >= 0) {
                count++;
            } else {
                count += 2;
            }
        }
        return count;
    }
</script>

打印结果：

    30
    24

从打印结果可以看出：字符串的长度是24，但是却占了30个字符位（一个中文占两个字符位）。

另外，sort()方法其实底层也是用到了charCodeAt()，因为用到了Unicode编码。

indexOf/lastIndexOf：给字符查索引

索引值 = str.indexOf/(想要查询的字符);

解释：从前向后索引字符串的位置。

因此可以得出一个技巧：如果获取的索引值为0，说明字符串是以查询的参数为开头的。

同理，lastIndexOf()是从后向前寻找。

    var str = "abcdea";

    //给字符查索引(索引值为0,说明字符串以查询的参数为开头)
    console.log(str.indexOf("c"));
    console.log(str.lastIndexOf("c"));

    console.log(str.indexOf("a"));
    console.log(str.lastIndexOf("a"));

打印结果：

concat：字符串的链接

    新字符串 = str1.concat(str2)； 链接两个字符串

这种方法基本不用，直接两个字符串相加就好。

字符串的截取（重要）

字符串的截取有好几个方法，下面分别讲解。

1、 slice()方法：

格式：

    字符串 = str.slice(索引1，索引2); //两个参数都是索引值。

上面的参数，包左不包右。如下：

(2,5) 表示正常，包左不包右。
(2) 表示从指定的索引位置开始，剪到最后。
(-3) 表示从倒数第几个开始，剪到最后.
(5,2) 表示前面的大，后面的小，返回值为空。

2、substr()方法：

格式：

   字符串 = srt.substr(索引值, 长度);

参数解释：

(2,4)：从索引值为2的字符开始，截取4个字符。
(1)：从指定位置开始，截取到最后。
(-3)：从倒数第几个开始，剪到最后.
不包括前大后小的情况。

一些特殊方法

1、trim()：去除字符串前后的空白。

代码举例：

    //去除前后的空格，trim();
    var str1 = "   a   b   c   ";
    console.log(str1);
    console.log(str1.trim());

打印结果：

2、replace()：替换。

举例：

    //replace()方法：替换
    var str2 = "Today is fine day,today is fine day !!!"
    console.log(str2);
    console.log(str2.replace("today","tomorrow"));  //只能替换第一个today
    console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today

3、split()：字符串变数组。

    //split()方法：字符串变数组
    var str3 = "生命壹号|许嵩|smyhvae";

    console.log(str3);
    console.log(str3.split());   // 无参数，表示：把字符串作为一个元素添加到数组中。
    console.log(str3.split(""));  //参数为空字符串，则表示：分隔字符串中每一个字符，分别添加到数组中
    console.log(str3.split("|")); //参数为指定字符，表示：此字符将不会出现在数组的任意一个元素中
    console.log(str3.split("许")); //同理

打印结果：

大小写转换

举例：

    var str = "abcdEFG";

    //转换成小写
    console.log(str.toLowerCase());
    //转换成大写
    console.log(str.toUpperCase());

html方法

anchor() 创建a链接
big()
sub()
sup()
link()
bold()

注意，str.link() 返回值是字符串。

举例：

    var str = "你好";

    console.log(str.anchor())
    console.log(str.big())
    console.log(str.sub())
    console.log(str.sup())
    console.log(str.link("http://www.baidu.com"));
    console.log(str.bold())

字符串练习

练习1："smyhvaevaesmyh"查找字符串中所有m出现的位置。

代码实现：

    var str2 = "abcoefoxyozzopp";
    for(var i=0;i<str2.length;i++){
        //如果指定位置的符号=== "o"
        //str2[i]
        if( str2.charAt(i)==="o"){
            console.log(i);
        }
    }

**练习2：**判断一个字符串中出现次数最多的字符，统计这个次数

<script>
    var str2 = "smyhvaevaesmyhvae";

    //定义一个json，然后判断json中是够有该属性，如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
    var json = {};
    for (var i = 0; i < str2.length; i++) {
        //判断：如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
        var key = str2.charAt(i);
        if (json[key] === undefined) {
            json[key] = 1;
        } else {
            json[key] += 1;
        }
    }
    console.log(json);


    console.log("----------------");
    //获取json中属性值最大的选项
    var maxKey = "";
    var maxValue = 0;
    for (var k in json) {
        //        if(maxKey == ""){
        //            maxKey = k;
        //            maxValue = json[k];
        //        }else{
        if (json[k] > maxValue) {
            maxKey = k;
            maxValue = json[k];
        }
        //        }
    }
    console.log(maxKey);
    console.log(maxValue);


</script>

打印结果：

内置对象 Math

内置对象 Math的常见方法：

Math.abs(); 取绝对值
Math.floor(); 向下取整（向小取）
Math.ceil(); 向上取整（向大取）
Math.round(); 四舍五入取整（正数四舍五入，负数五舍六入）
Math.random(); 随机数0-1

举例：

    var num = -0.6;

    console.log(Math.abs(num));        //取绝对值
    console.log(Math.floor(num));      //向下取整，向小取
    console.log(Math.ceil(num));       //向上取整，向大取
    console.log(Math.round(num));      //四舍五入取整（正数四舍五入，负数五舍六入）
    console.log(Math.random());        //随机数 0-1

url 编码和解码

URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

    encodeURIComponent();   //把字符串作为 URI 组件进行编码
    decodeURIComponent();   //把字符串作为 URI 组件进行解码

举例：

    var url = "http://www.cnblogs.com/smyhvae/";

    var str = encodeURIComponent(url);
    console.log(str);                           //打印url的编码
    console.log(decodeURIComponent(str));       //对url进行编码后，再解码，还原为url

打印结果：

15 KiB Raw Blame History Unescape Escape

内置对象

内置对象：Date

Date对象的声明

Date对象的方法：获取日期和时间

返回距离1970/01/01毫秒数

举例：模拟日历

举例：发布会倒计时

内置对象String

简单数据类型、复杂数据类型

charAt/charCodeAt：1.2.1 给索引查字符

indexOf/lastIndexOf：给字符查索引

concat：字符串的链接

字符串的截取（重要）

一些特殊方法

大小写转换

html方法

字符串练习

内置对象 Math

url 编码和解码

15 KiB

Raw Blame History