Webcourse/03-JavaScript基础/20-内置对象(其他).md
2019-02-04 13:51:46 +08:00

9.9 KiB
Raw Blame History

内置对象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/charCodeAt1.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

打印结果: