首页
包装对象
包装对象
版权声明:本文为原创内容,转载请声明出处。
原文地址:http://www.excelib.com/article/263/show

直接量所对应的对象叫做包装对象,stringnumberboolean所对应的包装对象分别是String对象、Number对象和Boolean对象,他们都是function类型的对象,我们这一节就来学习这三个对象。

一个对象最重要的就是他所包含的属性,而function对象的属性又包括两大类,一类是他自己的属性,另一类是他创建出来的object类型实例对象的属性,创建出来的实例对象的属性又分为实例自己的属性和functionprototype的属性。

学习function类型对象最重要的是学习三个方面的内容:function作为函数使用时的功能、作为对象使用时自身所包含的属性以及所创建实例对象的属性。对于包装类型的对象来说作为函数来使用时的功能都是将传入的参数转换为function所对应的直接量,比如String(“abc”)可以新建值为abc的字符串类型的直接量等,其实和不使用函数的效果是一样的,所以学习包装类型对象主要是学习他所对应的属性。包装对象的属性和普通对象也没有什么区别,也是一共包括三部分:function对象自己拥有的属性、创建出来的对象拥有的属性和functionprototype属性对象中的属性。下面学生就从这三个层面分别来给大家讲解这三个包装对象。

我们本节讲的内容以ECMAScript5.1为主,ECMAScript2015中新增的内容学生会在后面单独给大家进行补充。

String对象

String对象是function类型的对象,对应的是字符串类型,可以使用他来创建字符串类型的object对象,比如new String(“abc”)就可以创建一个值为abc的字符串对象。不过最重要的还是他所对应的三种属性。

String自己的属性

String类型自己只有两个属性,一个是prototype另外一个是fromCharCode方法属性,prototype我们就不再解释了,fromCharCode方法的作用是创建由Unicode值所对应的字符组成的字符串,需要一个或多个参数,比如下面的例子

1
2
var s = String.fromCharCode(97, 98, 99);
console.log(s);     //abc

因为979899所对应的Unicode值分为为abc,所以创建出来的字符串s就是abc

String.prototype中的属性

ECMAScript5.1标准中Stringprototype20个属性,这20个属性在使用String创建出来的object类型对象和字符串直接量中都可以直接使用,下面学生分别来给大家介绍一下

1、constructor,这个属性默认指向String对象本身。

2、toString,在String的prototype中重写了toString方法,所以字符串的toString不会返回[object, Object]或者[object, String]而是返回字符串本身的值。

3、valueOf,String的prototype也重写了valueOf方法,这里会返回字符串本身。

4、charAt,这个方法用来获取指定位置的字符,序号从0开始,比如下面的例子

1
2
var s = "hello";
console.log(s.charAt(1));     //e

这里获取的是s字符串中序号为1的字符,也就是第二个字符(从0开始计数),所以是e。

5、charCodeAt,这个方法和charAt类似,不过他是获取的Unicode值,比如

1
2
var s = "hello";
console.log(s.charCodeAt(1));     //101

因为eUnicode值为101,所以这里返回的值为101

6、  concat,这个方法可以将多个字符串连接在一起组成一个新字符串,比如

1
2
3
var s = "hello";
var s1 = s.concat(" ECMAScript""!");
console.log(s1);                              //hello ECMAScript!

这里就将字符串s” ECMAScript””!”连接在了一起,不过需要注意的是连接之后s并没有发生变化,只是将连接之后的值返回给了新的变量s1

7、    indexOf,这个方法用来查找指定的字符或者字符串,他有两个参数,第一个参数是要查找的字符串,第二个参数可选,代表要查找的字符串的起始位置,如果省略第二个参数默认会从第一个字符开始查找。indexOf方法如果可以查找到指定的字符(串)就会返回查找到的第一个字符在字符串中的序号(从0开始),如果找不到就会返回-1,我们来看下面的例子

1
2
3
4
5
var s="prototype";
 console.log(s.indexOf("o"));              //2
 console.log(s.indexOf("ot"));             //2
 console.log(s.indexOf("ot", 3));          //4
 console.log(s.indexOf("a"));              //-1

8、    lastIndexOf,这个方法和indexOf的用法一样,只是indexOf是从前往后找而lastIndexOf是从后往前找,并且lastIndexOf的第二个参数position的作用是指定要查找的字符串最后一个字符的位置,比如下面的例子

1
2
3
 var s="prototype";
 console.log(s.lastIndexOf("o"));            //4
 console.log(s.lastIndexOf("o", 3));         //2,在“prot”字符串中查找


9、localeCompare,这个方法的作用是使用本地化方式比较字符串,类似于><的作用,不过大于号小于号只可以依据Unicode编码来比较字符串的大小,而有些地区的字符顺序和Unicode编码并不一样,这时就需要使用localeCompare方法来比较了。localeCompare方法的返回值为:当当前对象比要比较的字符小的时候返回一个小于0的数,当当前对象比要比较的字符大的时候返回一个大于0的数,当当前对象与要比较的字符顺序相同时返回0,比如下面的例子

1
2
3
 console.log("a".localeCompare("b"));                    //-1
 console.log("b".localeCompare("a"));                    //1
 console.log("a".localeCompare("a"));                    //0

10、match,这个方法用于匹配指定的内容,如果传入的参数为字符串则会匹配字符串,如果传入的参数是正则表达式则会返回与正则表达式相匹配的内容,比如下面的例子

1
2
3
4
5
console.log("hello JavaScript".match("Script"));                       //["Script"]
 console.log("hello JavaScript".match("script"));                      //null
 console.log("hello JavaScript".match(/script/i));                     //["Script"]
 console.log("hello JavaScript".match(/a+/g));                         //["a", "a"]
 console.log("hello ECMAScript5.1 and ECMAScript2015".match(/\d+/g));  // ["5", "1", "2015"]

如果直接使用字符串匹配是区分大小写的,如果使用正则表达式可以使用iignore case)标示不区分大小写,还可以使用gglobal)标示查找全部符合条件的内容,比如最后一个例子中查找了所有的数字。

11、replace,这个方法用来将字符串中指定的内容替换为新内容,要替换的内容可以是字符串也可以是正则表达式,默认只会替换第一个符合条件的内容,不过使用正则表达式可以使用g来替换全部符合条件的内容,我们来看例子

1
2
3
4
5
6
 var s = "beneficial";
 console.log(s.replace("e""E"));                   //bEneficial
 console.log(s.replace(/e/, "E"));                   //bEneficial
 console.log(s.replace(/e/g, "E"));                  //bEnEficial
 console.log(s);                                     //beneficial
 console.log("pwd:12345".replace(/\d/g, "*"));       //pwd:*****

通过上面的例子大家就可以明白replace的使用方法了,需要注意的是replace并不会修改原来对象的值,而是返回新的对象,比如上面的例子中调用了s.replace("e", "E")之后s的值并没有发生变化,如果需要同时修改s的值可以将返回值再赋值给s,也就是s = s.replace("e", "E");这样就可以将替换后的值赋值给s了。

12、search,这个方法的功能类似indexOf方法,不过search使用的是正则表达式而不是字符串进行查找,而且不可以指定起始位置,正则表达式中也不可以使用g标示,返回值和indexOf方法相同,比如下面的例子

1
console.log("hello ECMAScript5.1 and ECMAScript2015".search(/\d/));    // 16

13、slice,这个方法用于截取字符串的一部分,他有两个参数,分别表示要截取的字符串的起始位置和结束位置,如果大于0从前面计数,如果小于0则会从后面计数,如果省略第二个参数则会截取到字符串的末尾,比如下面的例子

1
2
3
4
5
6
 var s = "hello ECMAScript5.1 and ECMAScript2015";
 console.log(s.slice(6,19));                   //ECMAScript5.1
 console.log(s.slice(6,-4));                   //ECMAScript5.1 and ECMAScript
 console.log(s.slice(-14,-4));                 //ECMAScript
 console.log(s.slice(0, -14));                 //hello ECMAScript5.1 and
 console.log(s.slice(-14));                    //ECMAScript2015

需要注意slice方法也不会改变原来的字符串,而是会返回一个新的字符串。

14、substring,这个方法和slice差不多,也是截取字符串中的一部分,他的两个参数也是字符串的起始位置和结束位置,所不同的是substring中如果结束位置大于起始位置则会自动将其调换之后再截取,而且当参数小于0时会按0处理,比如下面的例子

1
2
3
4
5
 console.log("www.excelib.com".substring(4, 11));                  //excelib
 console.log("www.excelib.com".substring(11, 4));                  //excelib
 console.log("www.excelib.com".substring(3, -4));                  //www
 console.log("www.excelib.com".substring(3, 0));                   //www
 console.log("www.excelib.com".substring(4));                      //excelib.com

从这里可以看出substring(4, 11)substring(11, 4)是一样的,substring(3, -4)substring(3, 0)也是一样的,如果省略第二个参数则会截取到字符串末尾。

substring类似的还有一个substr方法,不过substr并不是标准里的方法,substr方法也是两个参数,第一个参数也是起始位置,第二个参数表示要截取的长度,并且如果第一个参数是负数的话会从字符串的后面向前面计数(同slice方法),比如下面的例子

1
2
3
console.log("www.excelib.com".substr(4, 7));                           //excelib
console.log("www.excelib.com".substr(-11, 7));                         //excelib
console.log("www.excelib.com".substr(-11));                            //excelib.com

虽然现在的主流浏览器都对substr方法提供了支持,不过他不是标准里的方法,有被舍弃的可能,所以我们应该尽量少使用他。

15、split,这个方法用于按照指定分隔符将字符串转换为字符串数组,有两个参数,第一个是分隔符,如果不为空则使用他来分隔字符串,如果为空则会按字符分隔字符串,第二个参数可选,表示需要返回数组中元素的个数,如果省略会将分隔后的元素全部返回,比如下面的例子

1
2
3
4
5
6
7
8
9
10
11
12
var s = "hello ECMAScript5.1 and ECMAScript2015";
 console.log(s.split(" "));                          // ["hello", "ECMAScript5.1", "and", "ECMAScript2015"]
  
 s = "是诸法空相不生不灭不垢不净不增不减";
 console.log(s.split("不"));                         // ["是诸法空相", "生", "灭", "垢",  "净", "增", "减"]
  
 s = "hello张三丰hello老子hello王阳明";
 console.log(s.split("hello"));                        // ["", "张三丰", "老子", "王阳明"]
  
 console.log("www.excelib.com".split("."));            // ["www", "excelib", "com"]
 console.log("excelib".split(""));                     //  ["e", "x", "c", "e", "l", "i", "b"]
 console.log("excelib".split("", 5));                  //  ["e", "x", "c", "e", "l"]

从这里可以看出split的分隔符不仅可以是英文字符,而且还可以是字符串甚至汉字。另外,如果字符串起始位置就是分隔符,那么分隔后数组的第一个元素会是空字符串。

16、toLowerCase,这个方法的作用是将字符串转换为小写形式,比如下面的例子

1
console.log("Hello Mick".toLowerCase());           //hello mick

17、 toLocaleLowerCase,这个方法的作用是使用本地语言将字符串转换为小写,有些地区有自己的大小写字符对应规则,在那种环境下就会被用到,一般情况下他与toLowerCase的作用相同。

18、toUpperCase,这个方法的作用是将字符串转换为大写形式,比如

1
console.log("www.excelib.com".toUpperCase());    //www.excelib.com

19、toLocaleUpperCase,这个方法一般情况下与toUpperCase是相同的,只有在具有自己的大小写字符对应规则的地区才会被用到。

20、trim,这个方法的作用是去掉字符串中头部和尾部的空格,比如下面的例子

1
console.log(" hello 张三丰 ".trim());                      // "hello 张三丰"

注意,trim方法只能去掉头部和尾部的空格,而不能去掉字符串中间的空格,如果想去掉字符串中所有的空格可以使用replace和正则表达式来操作,比如下面的例子

1
console.log(" h e     l l o   ".replace(/\s+/g, ""));  //hello

String创建出对象实例的属性

String创建出来的实例对象一共有两个属性,一个是length属性,他代表字符串的长度,另外一个属性类似于数组,属性名为0length-1,属性值为序号所对应的字符,比如下面的例子

1
2
3
var s = "www.excelib.com";
console.log(s.length);                         //15
console.log(s[7]);                             //e

使用第二个属性我们就可以把字符串当做字符数组来使用了。

Number对象

Number对象是function类型的对象,对应的是数字类型,可以使用他来创建数字类型的object对象,比如new Number (123)就可以创建一个值为123的数字实例对象。不过最重要的依然是他所对应的三种属性。

Number自己的属性

Number自己共有6个属性,他们分别是

1、  prototype,这个属性我们就不再解释了。

2、  MAX_VALUE,用来表示最大的数,其值约为1.7976931348623157 × 10308。

3、  MIN_VALUE,用来表示最小的数,其值约为5 × 10-324。

4、  NaN,Not a Number的缩写,表示不是数字。

5、  NEGATIVE_INFINITY,表示负无穷大,一般使用- Infinity来表示。

6、  POSITIVE_INFINITY,表示正无穷大,一般使用Infinity来表示。

下面我们来看例子

1
2
3
4
5
6
 console.log(Number("abc"));                   // NaN
 console.log(Number.MAX_VALUE);                // 1.7976931348623157e+308
 console.log(Number.MIN_VALUE);                // 5e-324
 console.log(Number.MAX_VALUE*2);              // Infinity
 console.log(-Number.MAX_VALUE*2);             // -Infinity
 console.log(1/0);                             // Infinity

将字符串”abc”转换为数字就会出现NaN,最大数乘以2就会出现正无穷大,负最大数乘以2就会出现负无穷大,0做分母也会产生正无穷大。

Number.prototype的属性

Numberprototype一共有7个属性:constructortoStringtoLocaleStringvalueOftoFixedtoExponentialtoPrecision,我们分别来解释一下。

1、constructor,这个属性默认指向Number对象本身。

2、toString,Number的prototype重写了toString方法,重写后的toString方法会返回数字的字符串形式,而且还可以指定要转换为数字的基数,也就是我们所说的几进制,我们来看下面的例子

1
2
3
4
5
6
var n = 11;
console.log(n.toString());                 // 11
console.log(n.toString(2));                // 1011
console.log( (255).toString(16));          // ff
console.log( (0xff).toString());           // 255
console.log( (5).toString(2));             // 101

3、toLocaleString,这个方法会按照数字的本地表示法来输出,比如下面的例子

1
2
3
var n = 2739297;
console.log(n.toLocaleString());        //2,739,297
console.log(n.toLocaleString("zh-Hans-CN-u-nu-hanidec"));   //二,七三九,二九七

ECMAScript5.1标准中的toLocaleString方法并没有参数,不过在第六版(ECMAScript2015)中规定可以使用参数指定区域,而且现在除Safari外的主流浏览器也都支持。

4、  valueOf,返回数字直接量,我们看下面例子

1
2
3
var n = new Number(34290);
console.log(typeof n);                 //object
console.log(typeof n.valueOf());       //number

因为Number创建的实例对象有自动解包的功能,所以这个方法很少使用。

5、    toFixed,这个方法用来指定数字的精度,也就是保留几位小数。他的参数为要保留小数的位数,如果不指定会按0处理,也就是没有小数,而且他会按需要自动进行四舍五入,我们看下面的例子

1
2
3
4
5
console.log(837.346.toFixed(2));                          //837.35
console.log(837.346.toFixed());                           //837
console.log(837.346.toFixed(5));                          //837.34600
console.log(-837.346.toFixed(2));                          // -837.35
console.log( (3.17e7).toFixed(2));                         //31700000.00

6、    toExponential,此方法的作用是将数字转换为科学计数法来表示,有一个可选参数,表示保留小数的位数,如果省略参数将会输出尽可能多的数字,我们来看例子

1
2
3
console.log(24803.5.toExponential());                   //2.48035e+4
console.log(24803.5.toExponential(2));                  //2.48e+4
console.log(24803.5.toExponential(1));                  //2.5e+4

7、    toPrecision,这个方法用于将数字格式化为指定位数(包括整数和小数),如果指定的位数小于数字的整数部分,将使用科学计数法来表示,我们看下面的例子

1
2
3
console.log(49320.34702.toPrecision(7));              //49320.35
console.log(49320.34702.toPrecision(9));              //49320.3470
console.log(49320.34702.toPrecision(3));              //4.93e+4

Number创建出实例对象的属性

Number创建出来的实例对象没有自己的命名属性。

Boolean对象

Boolean对象是function类型的对象,对应的是布尔类型,可以使用他来创建布尔类型的object实例对象,比如new Boolean (true)就可以创建一个值为true的布尔类型实例对象了。Boolean对象非常简单。

Boolean自己的属性

Boolean作为对象时本身只有一个prototype属性,prototype我们已经非常熟悉了,这里就不再介绍了。

Boolean.prototype的属性

Booleanprototype一共有三个属性:constructortoStringvalueOfconstructor指向Boolean本身,toStringvalueOf都返回实例对象的值,不过他们的类型不一样,toString返回string类型而valueOf返回boolean类型,我们看下面的例子

1
2
3
4
5
6
var b = new Boolean(true);
console.log(b.toString());               //true
console.log(b.valueOf());                //true
console.log(typeof b.toString());        //string
console.log(typeof b.valueOf());         //boolean
console.log(typeof b);                   //object

Boolean创建出对象实例的属性

Boolean创建出来的对象实例本身不包含命名属性。

多知道点

如何在浏览器中查看对象的属性

我们本节介绍的包装对象中的属性主要是标准中规定的属性,不过不同的浏览器除了实现了标准中的属性外还可能会添加自己特有的属性,大家使用ObjectgetOwnPropertyNames方法就可以获取到当前浏览器中对象自身的所有属性。对于function类型的对象我们需要获取三种类型的属性:function自身的属性、function.prototype包含的属性以及使用function创建出来的实例对象自身所包含的属性。这三种属性都可以通过ObjectgetOwnPropertyNames方法来获取,比如我们可以通过下面的代码来获取String对象的三种类型属性

1
2
3
console.log(Object.getOwnPropertyNames(String));             //获取String对象自身的属性
console.log(Object.getOwnPropertyNames(String.prototype));   //获取String的prototype的属性
console.log(Object.getOwnPropertyNames(new String()));  //获取String创建出的对象实例的属性

通过上面的方法就可以获取到当前浏览器中某个具体function对象相关的属性了。所有function类型的对象我们都可以使用这个方法,包括Object对象和浏览器中的Window对象,不过Window对象不可以新建实例对象。