美文网首页
3、引用类型(4)(《JS高级》笔记)

3、引用类型(4)(《JS高级》笔记)

作者: yjaal | 来源:发表于2017-04-20 23:25 被阅读27次

    六、基本包装类型(不推荐使用)

    JS中提供了三个特殊的引用类型:Boolean、Number、String。每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。

    var s1 = "some text";
    var s2 = s1.substring(2);
    

    说明:我们知道,基本类型不是对象,因而从逻辑上讲它们不应该有方法。起始,为了让我们实现这种直观的操作,后台已经自动完成了一系列的处理。基本处理过程为:

    • 1、创建String类型的实例
    • 2、在实例上调用指定的方法
    • 3、销毁这个实例

    也就是后台执行了下列步骤:

    var s1 = new String("some text");
    var s2 = s1.substring(2);
    s1 = null;
    

    说明:上面这三个步骤也分别适用于Boolean、Number类型对应的布尔值和数字值。

    引用类型与基本包装类型的主要区别就是对象的生存期。使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。这意味着我们不能在运行时为基本类型值添加属性和方法

    var s1 = "some text";
    s1.color = "red";
    alert(s1.color);//undefined
    

    说明:第二行代码中视图为字符串s1添加一个color属性。但是,当第三行代码再次访问s1时,其color属性不见了。问题的原因在第二行创建的String对象在执行第三行代码时已经被销毁了。第三行代码又创建了自己的String对象,而该对象没有color属性。

    对基本包装类型的实例调用typeof会返回"object",而且所有的基本包装类型的对象都会被转换为布尔值trueObject构造函数也会像工厂方法一样,根据传入值的类型返回相应基本包装类型的实例。如:

    var obj = new Object("some text");
    alert(obj instanceof String);//true
    

    把字符串传给Object构造函数就会创建String的实例;而传入数值参数就会得到Number实例,传入布尔值参数就会得到Boolean的实例。需要注意的是,使用new调用基本包装类型的构造函数,与直接调用同名的转型函数是不一样的。如:

    var value = "25";
    var number = Number(value);//转型函数
    alert(typeof number);//"number"
    
    var obj = new Number(value);//构造函数
    alert(typeof number);//"object"
    

    说明:变量number中保存的是基本类型的值25,而变量obj中保存的是Number的实例。

    6.1 Boolean类型

    Boolean对象在ECMAScript中的用处不大,因为它经常会造成人们的误解。其中最常见的问题就是在布尔表达式中使用Boolean对象。如:

    var falseObject = new Boolean(false);
    var result = falseObject && true;//对象会被转换成true
    alert(result);//true
    
    var falseValue = false;
    result = falseValue && true;
    alert(result);//false
    

    说明:这里要知道,布尔表达式中的所有对象都会被转换为true,因此falseObject对象在布尔表达式代表的是true

    基本类型与引用类型的布尔值还有两个区别。首先,typeof操作符对基本类型返回"boolean",而对引用类型返回"object"。其次,由于Boolean对象是Boolean类型的实例,所以使用instanceof操作符测试Boolean对象会返回true,而测试基本类型的布尔值则返回false

    alert(typeof falseObject);//object
    alert(typeof falseValue);//boolean
    alert(falseObject instanceof Boolean);//true
    alert(falseValue instanceof Boolean);//false
    

    说明:我们的建议是永远不要使用Boolean对象。

    6.2 Number类型

    Boolean类型一样,Number类型也重写了valueOf()、toLocaleString()、toString()方法。重写后的valueOf()方法返回对象表示的基本类型的值,另外两个方法返回字符串形式的数值。除了继承的方法之外,Number类型还提供了一些用于将数值格式化为字符串的方法。其中,toFixed()方法会按照指定的小数位返回数值的字符串表示:

    var num = 10;
    alert(num.toFixed(2));//10.00
    
    var num1 = 10.005;
    alert(num.toFixed(2));//10.01,这里进行了四舍五入
    

    另外可用于格式化数值的方法是toExponential(),该方法返回以指数表示法(也称e表示法)表示的数值的字符串形式。

    var num = 10;
    alert(num.toExponential(1));//"1.0e+1"
    

    说明:可以看到将数值用e表示法,但是这对于这么小的数有点不合适,如果想得到表示某个数值的最合适的格式,就应用使用toPrecision()方法。

    var num = 99;
    alert(num.toPrecision(1));//"1e+2"
    alert(num.toPrecision(2));//"99"
    alert(num.toPrecision(3));//"99.0"
    

    6.3 String类型

    String对象继承的valueOf()、toLocaleString()、toString()方法都返回对象所表示的基本字符串值。length属性返回字符串中的字符数量,但是要注意,即使字符串中包含双字节字符(不是占一个字节的ASCII字符),每个字符也仍然算一个字符。

    6.3.1 字符方法(charAt()、charCodeAt())

    这两个方法都接收一个参数,即基于零的字符位置。其中charAt()方法以单字符字符串的形式返回给定位置的那个字符。

    var stringValue = "hello world";
    alert(stringValue.charAt(1));//"e"
    

    如果想得到的不是字符而是字符编码,那么就要像下面这样使用charCodeAt()方法。

    var stringValue = "hello world";
    alert(stringValue.charCodeAt(1));//"101"
    

    还有一种不是所有浏览器都支持的方法:

    var stringValue = "hello world";
    alert(stringValue[1]);//"e"
    

    6.3.2 字符串操作方法(concat()、slice()、substr()、substring())

    concat()方法用于将一或多个字符串拼接起来,返回拼接得到的新字符串。

    var stringValue = "hello";
    var result = stringValue.concat("world", "!");
    alert(result);//"hello world!"
    alert(stringValue);//"hello"
    

    说明:在实际开发中,显示使用加好比此函数更为方便。

    后面三个方法都会返回被操作字符串的一个子字符串,而且也都接受一或两个参数。第一个参数指定字符串的开始位置,第二个参数(在指定的情况下)表示子字符串到哪里结束。

    var stringValue = "hello world";
    alert(stringValue.slice(3));        //"lo world",指定了一个参数,即从3开始
    alert(stringValue.substring(3));    //"lo world"
    alert(stringValue.substr(3));       //"lo world"
    alert(stringValue.slice(3, 7));     //"lo w",截取从3到7的子字符串
    alert(stringValue.substring(3,7));  //"lo w"
    alert(stringValue.substr(3, 7));    //"lo worl",从3开始截取,截取字符数为7
    

    说明:通过上面的代码可以明确知道各函数的功能。在传递给这些方法的参数是负数的情况下,它们的行为就不尽相同了。其中slice()方法会将传入的负值与字符串的长度相加,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为零。最后,substring()方法会把所有负值参数都转换为零。

    alert(stringValue.slice(-3));         //"rld"
    alert(stringValue.substring(-3));     //"hello world"
    alert(stringValue.substr(-3));        //"rld"
    alert(stringValue.slice(3, -4));      //"lo w"
    alert(stringValue.substring(3, -4));  //"hel"
    alert(stringValue.substr(3, -4));     //"" (empty string)
    

    6.3.3 字符串位置方法(indexOf()、lastIndexOf())

    这两个方法都是从一个字符串中搜索给定的子字符串,然后返回字符串的位置(如果没有找到该子字符串,则返回-1)。区别在于前一个方法从头向后开始搜索子字符串,而后一个方法从末尾向前搜索子字符串。

    var stringValue = "hello world";
    alert(stringValue.indexOf("o"));         //4
    alert(stringValue.lastIndexOf("o"));     //7
    alert(stringValue.indexOf("o", 6));         //7
    alert(stringValue.lastIndexOf("o", 6));     //4
    

    这两个方法都接收可选的第二个参数,表示从字符串中的哪个位置开始搜索。

    var stringValue = "hello world";
    alert(stringValue.indexOf("o", 6));         //4
    alert(stringValue.lastIndexOf("o", 6));     //7
    

    通过循环调用这两个方法可以找到所有匹配的子字符串:

    var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit";
    var positions = new Array();
    var pos = stringValue.indexOf("e");
    
    while(pos > -1){
        positions.push(pos);
        pos = stringValue.indexOf("e", pos + 1);
    }
    alert(positions);    //"3,24,32,35,52"
    

    6.3.4 trim()方法

    这个方法会创建一个字符串的副本,删除前置及后缀的所有空格,然后返回结果。

    var stringValue = "       hello world     ";
    var trimmedStringValue = stringValue.trim();
    alert(stringValue);//"       hello world     "
    alert(trimmedStringValue );//"hello world"
    

    6.3.5 字符串大小写转换方法

    toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()
    第一个和第三个方法是常用的方法,而另外两个方法则是针对特定地区的实现。

    var stringValue = "hello world";
    alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"
    alert(stringValue.toUpperCase());        //"HELLO WORLD"
    alert(stringValue.toLocaleLowerCase());  //"hello world"
    alert(stringValue.toLowerCase());        //"hello world"
    

    6.3.6 字符串的模式匹配方法

    match()、search()、replace()、split()
    第一个方法是match()方法,在字符串上调用这个方法,本质上与调用RegExpexec()方法相同。只接收一个参数,要么是一个正则表达式,要么是一个RegExp对象。

    var text = "cat, bat, sat, fat"; 
    var pattern = /.at/;
    
    var matches = text.match(pattern);  
    alert(matches.index);        //0
    alert(matches[0]);           //"cat"
    alert(pattern.lastIndex);    //0
    

    说明:可以看到,此方法和RegExp对象的exec()方法的返回都是数组,数组的第一项是与整个模式匹配的字符串,之后的每一项(如果有)保存着与正则表达式中的捕获组匹配的字符串。

    另一个用于查找模式的方法是search()方法。其参数也是字符串或RegExp对象指定的一个正则表达式。返回字符串中第一个匹配项的索引。如果没有找到匹配项,则返回-1。而且,此方法始终是从字符串开头向后查找。

    var text = "cat, bat, sat, fat"; 
    var pos = text.search(/at/);
    alert(pos);   //1
    

    为了简化替换子字符串的操作,这里提供了replace()方法,此方法接受两个参数:第一个参数可以是一个RegExp对象或者一个字符串(这个字符串不会被转换成正则表达式),第二个参数可以是一个字符串或者一个函数。入股第一个参数是字符串,那么只会替换第一个子字符串。要项替换所有子字符串,唯一的办法就是提供一个正则表达式,而且要指定全局标志。

    var text = "cat, bat, sat, fat";
    var result = text.replace("at", "ond");
    alert(result);    //"cond, bat, sat, fat"
    result = text.replace(/at/g, "ond");//替换所有匹配项
    alert(result);    //"cond, bond, sond, fond"
    

    如果第二个参数是字符串,那么还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入到结果字符串中。如下表:

    字符序列 替换文本
    $$ $
    $& 匹配整个模式的子字符串。与RegExp.lastMatch的值相同
    $'单引号 匹配子字符串之前的子字符串。与RegExp.lastMatch的值相同
    $` tab键上方的符号 匹配子字符串之前的子字符串。与RegExp.lastMatch的值相同
    $n 匹配第n个捕获组的字符串,其中n等于0~9。例如,$1是匹配第一个捕获组的子字符串,$2是匹配第二个捕获组的子字符串,以此类推。如果正则表达式中没有定义捕获组,则使用空字符串
    $nn 匹配第nn个捕获组的子字符串,其中nn等于01~99。例如,$01是匹配第一个捕获组的子字符串,$02是匹配第二个捕获组的子字符串,以此类推。如果正则表达式中没有定义捕获组,则使用空字符串

    通过这些特殊的字符序列,可以使用最近一次匹配结果中的内容:

    var text = "cat, bat, sat, fat"; 
    result = text.replace(/(.at)/g, "word ($1)");
    alert(result);    //word (cat), word (bat), word (sat), word (fat)
    

    说明:在此,每个以"at"结尾的单词都被替换了,替换结果是"word"后跟一对圆括号,而圆括号中是被字符序列$1所替换的单词。

    replace()方法的第二个参数可以是一个函数。在只有一个匹配项(即与模式匹配的字符串)的情况下,会向这个函数传递三个参数:模式的匹配项、模式匹配项在字符串中的位置和原始字符串。在正则表达式中定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项,......,但最后两个参数仍然分别是模式的匹配项在字符串中的位置和原始字符串。该函数应该返回一个字符串,表示应该被替换的匹配项使用函数作为replace()方法的第二个参数可以实现更加精准的替换操作。

    function htmlEscape(text){
        return text.replace(/[<>"&]/g, function(match, pos, originalText){
            switch(match){
                case "<":
                    return "<";
                case ">":
                    return ">";
                case "&":
                    return "&";
                case "\"":
                    return """;
            }             
        });
    }
    
    alert(htmlEscape("<p class=\"greeting\">Hello world!</p>")); //<p class="greeting">Hello world!</p>
    

    最后一个与模式匹配有关的方法是split()方法,此方法可以基于指定的分隔符将一个字符串分割成多个子字符串,并将结果放在一个数组中。分隔符可以是字符串,也可以是一个RegExp对象(这个方法不会将字符串看成正则表达式)。接收可选的第二个参数,用于指定数组的大小,以便确保返回的数组不会超过既定大小。

    var colorText = "red,blue,green,yellow";
    var colors1 = colorText.split(",");      //["red", "blue", "green", "yellow"]
    var colors2 = colorText.split(",", 2);   //["red", "blue"]
    var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]
    

    说明:在最后一次调用此方法返回的数组中,第一项和最后一项是两个空字符串,这是因为通过正则表达式指定的分隔符出现在了字符串的开头(即子字符串"red")和末尾(即子字符串"yellow"

    6.3.7 localeCompare()方法

    这个方法比较两个字符串,并返回下列值中的一个:

    • 如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(大多数情况下是-1,具体的值要视现实而定);
    • 如果字符串等于字符串参数,则返回0
    • 如果字符串在字母表中应该排在字符串参数之后,则返回一个正数(大多数情况下是1,具体的值同样要视实现而定)。
    var stringValue = "yellow";       
    alert(stringValue.localeCompare("brick"));  //1
    alert(stringValue.localeCompare("yellow")); //0
    alert(stringValue.localeCompare("zoo"));    //-1
    

    6.3.8 fromCharCode()方法

    这是String类型的一个静态方法,这个方法的任务是接收一或多个字符编码,然后将其转换成一个字符串。

    alert(String.fromCharCode(104, 101, 108, 108, 111));//"hello"
    

    相关文章

      网友评论

          本文标题:3、引用类型(4)(《JS高级》笔记)

          本文链接:https://www.haomeiwen.com/subject/evalzttx.html