js基础学习——引用类型中的基本包装类型

1.基本包装类型的概念

• ECMAscript提供了三个基本包装类型：Boolean、Number、String；
• 每当读取一个基本数据类型时，后台就会自动生成一个对应的基本包装类型的对象，方便我们能够调用一些方法来操作这些基本数据类型。
• 基本数据类型不是对象，按道理来说是不该有方法的，但是通过后台的以下操作，基本数据类型对应生成了基本包装类型：

/*1.创建对应基本数据类型的一个实例
	2.在实例上调用指定的方法
	3.销毁该实例，释放内存*/
var str = new String('test text!');
var newStr = str.substring(2);
str = null;

上述的步骤也是Boolean、Number生成对应的基本包装类型的方法。

• 基本包装类型和引用类型最大的区别就在于对象的生存期：
• 基本包装类型：只存在于所在代码行执行的那一瞬间；
  引用类型：执行流离开作用域前会一直保留；
• 对基本包装类型的实例调用typeof，返回的是object，而且所有基本包装类型的对象都会被转换成布尔值true。

// 基本包装类型的实例调用typeof，返回object
// 所有基本包装类型的对象都会转换为布尔值true
var str = new String('test');
console.log(typeof(str));//object
console.log(str instanceof String);//true

• Object构造函数能根据传入值的类型对应的生成基本包装类型的实例：

// Object构造函数能根据传入的数据类型生成对应的基本包装类型的实例
var str = new Object('test');
var num = new Number(99);
var bol = new Boolean(true);
console.log(str instanceof String);//true,生成了对应的实例
console.log(num instanceof Number);//true,生成了对应的实例
console.log(bol instanceof Boolean);//true,生成了对应的实例

• 注意：使用new调用基本包装类型的构造函数与直接调用同名的转型函数是不一样的：

// new调用基本包装类型的构造函数：保存基本包装类型
// 直接调用同名转型函数:保存基本数据类型
// 两者保存的数据类型是不一样的
// 1.调用同名转型函数
var value = '66';
var number = Number(value);
console.log(typeof number);//Number
        
// 2.new调用基本包装类型构造函数
var obj = new Number(value);
console.log(typeof obj);//object

2.基本包装类型——Boolean类型

Boolean类型就是与布尔值对应的基本包装类型。

2.1 创建Boolean类型

• new Boolean（）

var booleanObj = new Boolean(true);

• Boolean类型重写了valueOf（）和toString（），返回值分别为基本类型值true、false和字符串型的true、false；
• 基本类型和引用类型的布尔值的区别：
  typeof对基本类型返回“boolean”，对引用类型返回“object”；
  instanceof Object测试基本类型返回false，引用类型返回true；

3.基本包装类型——Number类型

3.1 创建一个Number类型

• Number构造函数

var numberObj = new Number(66);

3.2 Number重写后的方法

valueOf（）：返回对象表示的基本类型的数值
toString（）：返回字符串形式的数值
toLocaleString（）：返回字符串形式的数值

3.3 数值格式化为字符串方法

• toFixed（）：按照指定的小数位数返回数值的字符串表示；如果数值本身包含的小数位比指定的位数多，那么接近最大小数位的值就会四舍五入；根据这一特性，该方法适合处理货币值。

//语法：number.toFixed(小数位数);
// toFixed方法返回按照规定小数位数的字符串形式
var num = 10;
console.log(num.toFixed(5));//10.00000

• toExponential（）：返回指数表示法（e表示法）表示的数值的字符串形式。

//语法格式：number.toExponential(小数位数);
// toExponential方法返回指数法表示的数值字符串
var number = 100000;
console.log(number.toExponential(2));//1.00e+5

• toPrecision（）：自动选择合适的表示方法，接收一个表示数值的所有数字位数的参数（不包括指数部分）；

//语法格式：number.toPrecision(小数位数);
// toPrecision方法会自动选择适合的格式化方式
var number1 = 1000000000000000;
console.log(number1.toPrecision(2));//1.0e+15
var number2 = 12.1215;
console.log(number2.toPrecision(4));//12.12

4.基本包装类型——String类型

• 创建String（）包装类型：

//语法格式：var str = new String('hello world!');

• valueOf()、toLocaleString（）、toString（）返回值都是对象所表示的基本字符串值。
• 每个String类型都有一个length属性，表示字符串所包含的字符个数。

4.1 string方法中的字符方法：

• 访问字符串特定位置：
  charAt（）：返回该位置的字符；
  charCodeAt（）：返回特定位置字符的编码；
  string[索引]：访问特定字符，返回该位置的字符；
  两个方法都接受一个参数，参数是基于0的字符位置。

// charAt返回对应位置的字符
var str = new String('test');
console.log(str.charAt(0));//t
// charCodeAt返回对应位置字符编码
console.log(str.charCodeAt(0));//116

4.2 字符串操作方法

• concat（）：拼接字符串，返回一个拼接后的新字符串；接受多个参数，也就是说可以拼接多个字符串；

// 2.concat方法=============
var str1 = 'text';
var result = str1.concat('test','newtext')
console.log(result);//texttestnewtext

三个基于子字符串创建新字符串的方法：

• slice（）：返回被操作字符串的一个子字符串，接受两个参数，第一个参数指定子字符串开始的位置，第二个参数指定结束的位置；
• substr（）：返回被操作字符串的一个子字符串，接受两个参数，第一个参数指定子字符串开始的位置，第二个参数指定返回字符的个数；
• substring（）：返回被操作字符串的一个子字符串，接受两个参数，第一个参数指定子字符串开始的位置，第二个参数指定结束的位置；

// 3.slice、substr、substring方法
// slice：第二个参数表示的是结束位置
var str = '精通各种语言的hello world！';
console.log(str.slice(5));//言的hello world！
console.log(str.slice(7,12));//hello
        
// substr：第二个参数指定的是返回的字符个数
console.log(str.substr(0));//精通各种语言的hello world！
console.log(str.substr(7,5));//hello
        
// substring：第二个参数表示结束位置
console.log(str.substring(0,5));//精通各种语
console.log(str.substring(0));//精通各种语言的hello world！

4.3 字符串位置方法

• indexOf（）：在给定字符串中查找，查找到就返回位置，未查找到就返回-1；
• lastIndexOf（）：在给定字符串中查找，查找到就返回位置，未查找到就返回-1；
• 可以通过该方法查找字符串中所有符合查找条件的字符：

// 4.====字符串位置方法=====
// indexOf和lastIndexOf方法
// 查找所有符合条件的字符
var test = 'we are lenged,l love hardwell!';
var arr = [];
var pos = test.indexOf('e');
while(pos > -1){
    arr.push(pos);
    pos = test.indexOf('e',pos + 1);
}
console.log(arr);//[1, 5, 8, 11, 19, 26]

4.4 trim（）方法

• trim（）：创建一个字符串的副本，并删除副本字符串的前置、后缀的空格，返回该副本；
  trimLeft（）：删除左边空格；
  trinRight（）：删除右边空格；

// 5.trim()方法=========
var test = '   老八秘制  小汉堡    ';
console.log(test);//   老八秘制  小汉堡    ;
console.log(test.trim());//老八秘制  小汉堡;
console.log(test.trimLeft());//老八秘制  小汉堡    ;
console.log(test.trimRight());//   老八秘制  小汉堡;

4.5 大小写转换

• toLowerCase（）：转换为小写
• toUpperCase（）：转换为大写
• toLocaleLowerCase（）：针对特定地区的小写实现；
• toLocaleUpperCase（）针对特定地区的大写实现；

// ====大小写转换方法====
var text = 'china no1!';
console.log(text.toLowerCase());//china no1!
console.log(text.toUpperCase());//CHINA NO1!

4.6 模式匹配方法

• match（）：保存与正则表达式的捕获组匹配的字符串，接受一个参数，该参数可以是正则表达式，也可以是一个RegExp对象；该方法放回一个数组；

// 模式匹配方法
// 1.match()：保存与正则表达式捕获组匹配的字符串，返回一个数组
// 类似于RegExp对象的exec方法
var text = 'cat,bat,fat';
console.log(text.match(/.at/));//["cat", index: 0, input: "cat,bat,fat", groups: undefined]

• search（）：返回字符串第一个匹配项的索引，接受的参数和match方法一样；

console.log(text.search(/.at/));//0，返回第一个匹配项索引
console.log(text.search(/.ct/));//-1,返回-1表示没有匹配项

• replace（）：替换字符，接受两个参数：第一个参数可以是一个RegExp对象或字符串，第二个参数可以是一个字符串或函数；

// 第二个参数还可以是函数
// 作为参数的函数接受三个参数：捕获组的匹配项、匹配项在字符串中的位置
// 、原始字符串
var text = '<p class = \"testing\">俺是拿来测试的！</p>'
function replaceTest(text){
    // 不管是有多少个匹配项，最后两个参数都是表示位置和原始字符串
    return text.replace(/[<>"&>]/g,function(match,pos,originalText){
        switch(match){
            case '<':
                return '&lt';
                break;
                case '>' :
                    return '&gt';
                    break;
                    case '&' :
                        return '&amp';
                        break;
                        case '\"' :
                            return '&quot;';
                            break;
        }
    })
}
console.log(replaceTest(text));
// &ltp class = &quot;testing&quot;&

默认是替换第一个匹配的字符，如果要全部替换，需要加g修饰符；

• split（）:基于指定的分隔符将一个字符串分割为多个子字符串，将结果保存在一个数组中。

//split(分隔符，数组大小（可选）);
// split()：从第一个参数指定的位置分隔字符，类似于基础数据类型的字符串中的join（）
var test = '盖伦,亚索,杰斯';
console.log(test.split(","));//["盖伦,亚索,杰斯"]
console.log(test.split(",",2));//["盖伦", "亚索"]
console.log(test.split(/盖伦/));//["", ",亚索,杰斯"]
console.log(test.split('盖'));//["", "伦,亚索,杰斯"]

4.7 localeCompare（）方法

• localeCompare（）：比较两个字符串的位置先后，返回对应的值：

// localeCompare（）
// -1:字符串在字母表中在字符串参数之前
// 0：字符串等于字符串参数
// 1：字符串在字母表中的位置在字符串参数之后
var text ='ghost';
console.log(text.localeCompare('b'));//1
console.log(text.localeCompare('h'));//-1
console.log(text.localeCompare('ghost'));//0

4.8 fromCharCode（）和charCodeAt（）方法

• fromCharCode（）：静态方法，将多个字符编码转换为字符串；
• charCodeAt（）：与fromCharCode（）相反，将字符串转换为字符编码；

// fromCharCode和charCodeAt
var test = 'h';
console.log(String.fromCharCode(104,101,108,108,111));//hello
console.log(test.charCodeAt());//104