• 如何理解JavaScript中的基本包装类型


        为了便于操作基本类型值,ECMAScript提供额3个特殊的引用类型:Boolean、Number和String。

    一、基本包装类型概述

    var box = "Mr.Lee";  //定义一个字符串
    var box2= box.substring(2);  //截掉字符串前两位
    alert(box2);//输出新字符串;=>.Lee;

        变量box是一个字符串类型,而box.subString(2)又说明它是一个对象(只有对象才可以调用方法),然后把处理结果赋值给box2。"Mr.Lee"是一个字符串类型的值,按说它不应该是对象,不能调用方法的。这是因为后台自动完成了一系列的处理:每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而能够调用一些方法来操作这些数据

        在读取模式中访问字符串时,后台自动完成下列处理:

        (1)创建String类型的一个实例(使用new运算符);

        (2)在实例上调用指定的方法;

        (3)销毁这个实例。

        可以将以上三步想象成是执行了下列ECMAScript代码:

    var box = new String("Mr.Lee");
    var box2 = box.substring(2);
    box = null;

        经过此番处理,基本的字符串就变得跟对象一样了。而且这三个步骤也使用于Boolean和Number类型对应的布尔值和数字值。

    二、基本包装类型和引用类型的主要区别

        两者主要区别在于对象的生存期不同。现通过两个例子展示其区别。

    1、字面量声明

    var box = "Mr.Lee";//字面量
    box.name ="Lee";//无效属性     代码1
    box.age = function(){//无效方法
    return 100;
    };
    alert(box);//Mr.Lee
    alert(box.substring(2));//.Lee 
    alert( typeof box);//String
    alert(box.name);//undefined  代码2
    alert(box.age());//错误

    2、运算符声明

    var box = new String("Mr.Lee");//new运算符
    box.name = "Lee";//有效属性    
    box.age = function(){有效方法
    return 100;
    };
    alert(box);//Mr.Lee
    alert(box.substring(2));//.Lee
    alert(typeof box);//object
    alert(box.name);//Lee
    alert(box.age());//100

        使用new操作符创建的引用类型的实例,在执行流离开当前的作用域之前一直都保存在内存中。

        而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后被立即销毁。所以在字面量申明中,用代码1为box添加name属性后,当代码2再次访问box时,其name属性已经不见了。原因就在于代码1创建的name属性在再代码2次访问时已经被销毁了。代码2又创建了自己的String对象,而该对象没有name属性。

        总结:不管是基本类型值还是引用类型值,都可以访问它的内置方法。基本类型可以调用方法的原因就在于当读取基本类型值时,后台会自动创建对应的基本包装类型的对象,而对象时有方法的。但是不能在运行时为基本类型添加属性和方法。

    三、Boolean类型

        Boolean类型没有特定的属性或方法。

    四、Number类型

        Number类型有一些静态属性(直接通过Number调用的属性,无须new运算符)和方法。

    Number静态属性
    属性描述
    MAX_VALUE 表示最大值
    MIN_VALUE 表示最小值
    NaN 非数值
    NEGATIVE_INFINITY 负无穷大,溢出返回该值
    POSITIVE_INFINITY 无穷大,溢出返回该值
    prototype 原型,用于增加新属性和方法
    Number对象的方法
    方法描述
    toString 将数值转化为字符串,并且可以转换进制
    toLocaleString 根据本地数字格式转换为字符串
    toFixed 将数字保留小数点后指定位数并转化为字符串
    toExponential 将数字以指数形式表示,保留小数点后指定位数并转化为字符串
    toPrecision 指数形式或点形式表述数,保留小数点后面指定位数并转化为字符串
    1 var box=1000.789;
    2 alert(box.toString());//转换为字符串,传参可以转换进制
    3 alert(box.toLocaleString());//本地形式,1,000.789
    4 alert(box.toFixed(2));//小数点保留,1000.78
    5 alert(box.toExponential());//指数形式,传参会保留小数点
    6 alert(box.toPrecision(3));//指数或点形式,传参保留小数点
    Number对象的方法

    五、String类型

        String类型包含了三个属性和大量的可用内置方法。

    String对象属性:

    属性描述
    length 返回字符串的字符长度
    constructor 返回创建String对象的函数
    prototype 通过添加属性和方法扩展字符串定义

        String也包含对象的通用方法,比如valueof()、toLocaleString()和toString()方法,但这些方法都返回字符串的基本值。

    字符方法: 

    方法描述
    charAt(n) 返回指定索引位置的字符
    charCodeAt(n) 以Unicode编码形式返回指定索引位置的字符
    var box="Mr.Lee";
    alert(box.charAt(1));//r
    alert(box.charCodeAt(1));//114
    alert(box[1]);//r,通过数组方式截取

        PS:box[1]在IE浏览器中会显示undefined,所以要慎重使用。

    字符串操作方法:

    方法描述
    concat(str1…str2) 将字符串参数串联到调用该方法的字符串
    slice(n,m) 返回字符串n到m之间位置的字符串,不包括m位置。不指定m相当于,截掉字符串n位置前的所有字符。
    substring(n,m) 同上
    substr(n,m) 返回字符串n开始的m个字符串
    1 var box="hello world";
    2 alert(box.concat("你","好","世界","!"));//hello world 你好世界!
    3 alert(box.slice(3));//"lo world"
    4 alert(box.slice(3,7));//"lo w"
    5 alert(box.substring(3));//"lo world"
    6 alert(box.substring(3,7));//"lo w"
    7 alert(box.substr(3));//"lo world"
    8 alert(box.substr(3,7));//"lo worl"
    字符串操作方法—传入正值

    总结:1、slice()、substring()、substr()三个方法都返回被操作字符串的一个子字符串,也都接受一或两个参数; 

            2、第一个参数指定子字符串开始的位置;第二个参数(若指定)表示子字符串到哪里结束;

            3、silce()、substring()第二个参数指定子字符串最后一个字符后面的位置(即子字符串不包括该位置的字符);sunstr()第二个参数指定的是返回的字符个数。

    1 var box="hello world";
    2 alert(box.slice(-3));//"rld",相当于调用了slice(8)
    3 alert(box.substring(-3));//"hello world",相当于调用了substring(0)
    4 alert(box.substr(-3));//"rld"
    5 alert(box.slice(3,-4));//"lo wo"
    6 alert(box.substring(3,-4));//"hel"
    7 alert(box.substr(3,-4));//""(空字符串)
    字符串操作方法—传入负值

    总结:1、silce()方法将传入的负值与字符串长度相加;

             2、substr()方法将负的第一个参数加上字符串长度,将负的第二个参数转换为0;

             3、在给slice()和substr()方法传递一个负值参数时,它们的行为相同; 

             4、substring()方法会把所有负值参数都转换为0,同时会把较小的参数提前;

             5、在给substring()传递一个负值参数时,方法会返回原字符串。

    字符串位置方法:

    方法描述
    indexOf(str,n) 从n开始向后搜索的第一个str,并将搜索的索引值返回
    lastIndexOf(str,n) 从n开始向前搜索的第一个str,并将搜索的索引值返回

    注意:位置方法返回要查找的项在数组中的位置,或在没找到的情况下返回-1.

    1 var box="hello world";
    2 alert(box.indexOf("o"));//4
    3 alert(box.lastIndexOf("o"));//7
    4 alert(box.indexOf("o",6));//7
    5 alert(box.lastIndexOf("o",6));//4
    字符串位置方法

     示例:找出全部的e

    1 var box="Lorem ipsum dolor sit amet ,consectetur adipisicing elit";//包含5个"e"的字符串
    2 var positions=new Array();//定义一个数组,用来存放"e"的位置
    3 var pos=box.indexOf("e");//先获取第一个"e"的位置
    4 while (pos>-1){//如果位置大于-1,说明还存在"e"
    5       positions.push(pos);//将位置添加到数组
    6       pos=box.indexOf("e",pos+1);//从找到的“e”的位置向前继续搜索,下一个"e"的位置
    7 }
    8 alert(positions);//输出存储“e”位置的数组
    字符串位置方法-查找某个字符的全部索引

     大小写转换方法:

    方法属性
    toLowerCase(str) 将字符串全部转换为小写
    toUpperCase(str) 将字符串全部转换为大写
    toLocaleLowerCase(str) 将字符串全部转换为小写,并且本地化
    toLocaleUpperCase(str) 将字符串全部转换为大写,并且本地化

    字符串的模式匹配方法: 

    方法描述
    match(pattern) 返回pattern中的子串或null
    replace(pattern,replacement) 用replacement替换pattern
    search(pattern) 返回字符串中pattern开始位置
    split(pattern) 返回字符串按指定pattern拆分的数组
    1 var box="Mr.Lee is Lee";
    2 alert(box.match("L"));//找到L,返回L,否则返回null
    3 alert(box.search("L"));//找到L的位置,同indexOf类型
    4 alert(box.replace("L","Q"));//把"L"替换成"Q"
    5 alert(box.split(""));//以空格分割成字符串
    字符串的模式匹配方法

     其他方法:

    方法描述
    fromCharCode(ascii) 静态方法,输出Ascii码对应值
    localeCompare(str1,str2) 比较两个字符串,并返回相应的值
    alert(String.fromCharCode(76));//L,输出Ascii码对应值

    localeCompare(str1,str2)方法详解:比较两个字符串并返回以下值中的一个;

    1、如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(多数是-1);

    2、如果字符串等于字符串参数,则返回0;

    3、如果字符串在字母表中应该排在字符串参数之后,则返回一个正数(多数是1)。

    var box="yellow";
    alert(box.localeCompare("brick"));//1
    alert(box.localeCompare("yellow"));//0
    alert(box.localeCompare("zoo"));//-1
  • 相关阅读:
    浏览器渲染
    微信h5页面制作总结
    chrome开发工具指南之综述
    零碎记录
    docker 容器已经启动,但是无法访问
    Docker的安装及使用
    python目录选择
    centos7 设置进程开机自启动
    语句中传入变量
    kafka -> structuredStreaming读取kafka日志 ->自定义输出到mysql
  • 原文地址:https://www.cnblogs.com/haidaojiege/p/6744291.html
Copyright © 2020-2023  润新知