《JavaScript高级程序设计 (第3版)》学习笔记15:chapter_5 - 6 基本包装类型

让学习“上瘾”,成为更好的自己!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本包装类型</title>
    <script>
        /*
        1,3个特殊的引用类型:Boolean、Number、String【基本包装类型】
        2,当“读取”一个基本类型值的时候,后台会创建一个对应的基本包装类型的对象,从而我们可以调用一些方法来操作这些数据
        3,引用类型和基本包装类型的主要区别:对象的生存期
            a, 使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前一直保存在内存中
            b, 自动创建的基本包装类型的对象,只存在一行代码的执行瞬间,然后“立即”销毁
        4,不建议显式调用Boolean,Number和String来创建基本包装类型的对象,必要时可以这么做!!

        5,Object构造函数可以像工厂函数那样,根据传入值的类型返回相应的基本包装类型的实例
        6,使用new调用基本包装类型的构造函数,和直接调用同名的转型函数是不一样的!

        一,Boolean类型
            1,创建Boolean对象
                var falseObject = new Boolean(false);
            2, 重写了valueOf(),toString() and toLocaleString()
            3,布尔表达式里边的所有的对象都会被转换成true
            4,基本类型的布尔值和Boolean对象的区别:(见下)
                


            【注意】 建议不用显式地使用Boolean对象


        二,Number类型
             1, 创建Number对象
                  var numberObject = new Number(10);
             2, 重写了valueOf(),toString() and toLocaleString()
             3, 数值转换成字符串的方法:
                    toFixed() : 按指定小数位返回数值的字符串表示
                    toEXponential():按指定小数位返回以指数表示法(e表示法)表示的数值的字符串形式
                    toPrecision(): 接收一个表示数值所有数字位数(不包括指数部分)
                                   可能返回固定大小格式,也可能返回指数格式,具体看哪种格式最合适
                【共性】这3个方法都可以通过“向上或者向下舍入”,做到以最准确的形式来表示带有正确小数位的值

            【注意】 建议不用显式地使用Number对象


        三,String类型
            1, 创建String对象
                  var stringObject = new String('hello world');
            2, 重写了valueOf(),toString() and toLocaleString()
            3, length属性(见下)
            4,方法(见下)

            // 在正则表达式中使用捕获组时在不同浏览器会有差异,因此,使用时多做测试工作


        
        
        */
        // 当“读取”一个基本类型值的时候,后台会创建一个对应的基本包装类型的对象,从而我们可以调用一些方法来操作这些数据

        var s1 = 'some text';
        var s2 = s1.substring(2);  //  截取字符串中的子串
        // 当第二行代码访问s1时,访问过程处于一种“读取模式”,此时,后台会“自动”完成下列处理:
        // (1) 创建Stirng类型的实例
        // (2) 在实例上调用指定方法
        // (3)  销毁这个实例
        // =====理解为如下========
        // var s1 = new String('some text'); // (1)
        // var s2 = s1.substring(2);  // (2)
        // s1 = null;  // (3)

        // var s11 = 'some text';
        // s11.color = 'blue';
        // console.log(s11.color);  // undefined --> why? 第二行代码创建的String对象在执行第三行代码时已经被销毁了
    
        // Object构造函数可以像工厂函数那样,根据传入值的类型返回相应的基本包装类型的实例
        // var obj1 = new Object('23');
        // var obj2 = new Object(23);
        // console.log(obj1 instanceof String);
        // console.log(obj2 instanceof Number);

        // 使用new调用基本包装类型的构造函数,和直接调用同名的转型函数是不一样的!
        // var num = '25';
        // var number = Number(num);
        // console.log(typeof number);  // number

        // var obj = new Number(num);
        // console.log(typeof obj);  // object
    
        // Boolean类型
        var falseObject = new Boolean(false);
        var falseValue = false;
        // console.log(falseObject && true);
        // console.log(falseValue && true);

        // 基本类型的布尔值和Boolean对象的区别
            // console.log(typeof falseObject);  // object
            // console.log(typeof falseValue);   // boolean

            // Boolean对象是Boolean类型的实例,所以以下是true
            // console.log(falseObject instanceof Boolean);

            // console.log(falseValue instanceof Boolean);  // false


        // Number类型
            // toFixed():‘不足补0,多则舍入’
            // var num = 10.005;
            // console.log(num.toFixed(2));  // "10.01"

            // var num1 = 10;
            // console.log(num1.toFixed(2));  // "10.00"

            //  // toExponential():‘不足补0,多则舍入’
            // console.log(num.toExponential(2));  // "1.00e+1"
            // console.log(typeof (num.toExponential(2)));
            //  // toPrecision(): 
            // var num3 = 99;
            // console.log(num3.toPrecision(1));  // '1e+2'
            // console.log(num3.toPrecision(2));  // '99'
            // console.log(num3.toPrecision(3));  // '99.0'

        // String类型
            // length属性
            var str1 = 'h\nello world';
            // console.log(str1.length);  // 转移字符算一个字符

            // 1,字符方法:charAt(), charCodeAt(), 方括号
                // var stringValue = 'hello world';
                // console.log(stringValue.charAt(1));  // 'e' 
                // console.log(stringValue.charCodeAt(1));  // '101' 
                // console.log(stringValue[1]);
                

            // 2,字符串操作方法:
            //    a,concat(): 拼接字符串,不会修改字符串本身的值  更多使用加号操作符
                var str1 = 'hello ';
                // console.log(str1.concat('world','23','  90'));
                // console.log(str1+'world'+'23'+'  90');  


            //    b,基于子字符串创建字符串的方法:二个参数,第一个为子字符串开始的位置,第二个为结束位置
            //       不会修改字符串本身的值!!!
                // var stringValue = 'hello world';
                // console.log(stringValue.slice(3));
                // console.log(stringValue.substring(3));
                // console.log(stringValue.substr(3));

                // console.log(stringValue.slice(3,7)); // 'lo w'
                // console.log(stringValue.substring(3,7));  // 'lo w'
                // slice, substring(): 第二个参数为结束位置
                // console.log(stringValue.substr(3,7));  // 'lo worl'
                // substr(): 第二个参数是返回字符的个数

            // 传入的参数是负数时,
            //    slice(): 将传入负值与字符串长度相加
            //    substring(): 把所有的负值都转换成0
            //    substr(): 第一个参数加上字符串长度,第二个转换为0
                // var stringValue = 'hello world';
                // console.log(stringValue.slice(-3));  // 'rld'
                // console.log(stringValue.substring(-3));  // 'hello world'
                // console.log(stringValue.substr(-3));  // 'rld'

                // console.log(stringValue.slice(3,-4));  // 'lo w'
                // console.log(stringValue.substring(3,-4));  // 'hel'
                // stringValue.substring(3,0) 等价于 stringValue.substring(0, 3)
                // console.log(stringValue.substr(3,-4));  // ''

            // 3,字符串位置方法:
                // 第一个参数:要查找的字符
                // 第二个参数(可选):起始查找位置
                // indexOf(): 从前到后,第一个
                // lastIndexOf(): 从后到前,第一个
                // 没有找到返回-1

                var stringValue = 'hello world';
                // console.log(stringValue.indexOf('o',5));  // 7
                // console.log(stringValue.lastIndexOf('o',8));  // 7

                // 循环得到出现的所有位置
                // var strText = 'rere jfkdjk ejebnl ekkeejdfakd adf';
                // var arr = new Array();
                // var pos = strText.indexOf('e');
                // while(pos != -1){
                //     arr.push(pos);
                //     pos = strText.indexOf('e', pos + 1);
                // }
                // console.log(arr);


            // 4,trim()方法:创建一个字符串副本,删除前置和后缀的所有空格,然后返回结果
                // var str2 = '   hello world   ';
                // console.log(str2.trim());
                // console.log(str2.trimLeft());  // support this 
                // console.log(str2);  // 原始字符串不会发生变化

            //   有些浏览器支持trimLeft() and trimRight()



            // 5,字符串大小写转换
            // toLowerCase() and toUpperCase()
            // toLocaleLowerCase() and toLocaleUpperCase()   【建议写这种!!!】
                // var str3 = 'hello world';
                // console.log(str3.toLocaleUpperCase());
                // console.log(str3.toUpperCase());



            // 6, 字符串模式匹配方法
                // match():  一个参数,正则表达式或者RegExp对象 
                            // 本质上与调用RegExp()方法相同
                var text = 'cat,bat,sat,fat';
                var pattern = /.cat/;
                // console.log(text.match(pattern));  // 返回一个数组

                // search(): 没有匹配到返回-1;始终从字符串开头向后查找
                // console.log(text.search(pattern));  // 返回1,即在字符串第一次出现的位置



                // replace():
                // 第一个参数是字符串,第二个参数是字符串或函数,【只替换第一个匹配到的】
                var text = 'cat,bat,sat,fat';
                // console.log(text.replace('at','one'));  // cone,bat,sat,fat

                // 第一个参数是RegExp对象,第二个参数是字符串或函数, 且指定为全局(g)标志 【替换所有匹配到的】
                // console.log(text.replace(/at/g, 'one'));  // cone,bone,sone,fone


                // 第二个参数是函数
                // 函数有3个参数:模式的匹配项,模式匹配项在字符串中的位置,原始字符串
                    // function htmlEscape(text){
                    //     return text.replace(/[<>"&]/g, function(match, pos, originalText){
                    //         switch(match){
                    //             case '<':
                    //                 return '&lt;';
                    //             case '>':
                    //                 return '&gt;';
                    //             case '&':
                    //                 return '&amp;';
                    //             case '\"':
                    //                 return '&quot;';
                    //         }
                    //     });

                    // }   
                    // htmlText = '<p class=\"greeting\">Hello world!</p>';
                    // console.log(htmlEscape(htmlText));
                    // &lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;


                //split():基于指定的分隔符将一个字符串分割成多个子字符串,返回一个数组
                //        第一个参数可以是字符串或者RegExp对象
                //        第二个参数指定数组的大小(可选)
                    var colorText = 'red,blue,green,yellow';
                    console.log(colorText.split(','));  // ["red", "blue", "green", "yellow"]
                    console.log(colorText.split(',',3));  // ["red", "blue", "green"]

                    console.log(colorText.split(/[^\,]+/));  // ["", ",", ",", ",", ""]


            // 7,localeCompare()方法:字母表顺序(字符串第一个的字符)

                var stringValue = 'yellow';
                // console.log(stringValue.localeCompare('brick'));  // 1
                // console.log(stringValue.localeCompare('yellow')); // 0
                // console.log(stringValue.localeCompare('zoo'));   // -1


            // 8,fromCharCode()方法:接收一个或多个字符编码,然后转换成一个字符串
                // console.log(String.fromCharCode(104, 101, 108, 111));  // 'hello'




            // 9,HTML方法(尽量不要使用!!)


    
    </script>
</head>
<body>
    
</body>
</html>```

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值