您的位置:首页 > Web前端 > JavaScript

JavaScript基础——引用类型(四)基本包装类型(Boolean、Number、String)、单体内置对象(Global、Math)

2016-05-31 16:28 796 查看

基本包装类型

为了便于操作基本类型值,ECMAScript还提供了3个特殊的引用类型:Boolean、Number和String。这些类型与其它引用类型相似,但同时也具有与各自的基本类型相应的特殊行为。实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。如:

var s1 = “some text”;

var s2 = s1.substring(2);

这个例子中的变量s1包含一个字符串,字符串当然是基本类型值。而下一行调用了s1的substring()方法,并将返回的结果保存在了s2中。基本类型值不是对象,因而从逻辑上讲它们不应该有方法(尽管如我们所愿,它们确实有方法)。其实,为了让我们实现这种直观的操作,后台已经自动完成了一系列的处理。当第二行代码访问s1时,访问过程处于一种读取模式,也就是要从内存中读取这个字符串的值。而在读取模式中访问字符串时,后台都会自动完成下列处理。

(1)      创建String类型的一个实例;

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

(3)      销毁这个实例。

可以将上面三个步骤想象成是执行了下列JavaScript代码。

var s1 = new String(“some text”);

var s2 = s1.sustring(2);

s1 = null;

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

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

var s1 = “some text”;

s1.color = “red”;

alert(s1.color);//undefined

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

当然,可以显示地调用Boolean、Number和String来创建基本包装类型的对象。不过,应该在绝对必要的情况下再这样做,因为这种做法很容易让人分不清自己是处理基本类型还是引用类型的值。对基本包装类型的实例调用typeof会返回”object”,而且所有基本包装类型的对象都会被转换为布尔值true。

Object构造函数也会像工厂方法一样,根据传入的值的类型返回相应基本包装类型的实例。如:

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 obj);//"object"

在这个例子中,变量number中保存的是基本类型的值25,而变量obj中保存的是Number的实例。

Boolean类型

Boolean类型是与布尔值对应的引用类型。要创建Boolean对象,可以像下面这样调用Boolean构造函数并传入true或false值:

var booleanObject = new Boolean(true);

Boolean类型的实例重写了valueof()方法,返回基本类型值true或false;重写了toString()方法,返回字符串”true”或”false”。可是,Boolean对象在ECMAScript中的用处不大,因为它经常会造成人们的误解。其中最常见的就是问题就是在布尔表达式中使用Boolean对象,如:

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

在这个例子中,使用false值创建了一个Boolean对象。然后,将这个对象与基本类型值true构成了逻辑表达式。在布尔运算中,false&&true等于false。可是,示例中的这行代码是对falseObject而不是它的值(false)进行求值。前面讨论过,布尔表达式中的所有对象都会被转换为true,因此falseObject对象在布尔表达式中代表的是true。结果true&&true当然就等于true了。

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

Number类型

Number是与数字值对应的引用类型。要创建Number对象,可以在调用Number构造函数时向其中传递相应的数值,如:

var numberObject = new Number(10);

与Boolean类型一样,Number类型也重写了valueOf()、toLocaleString()和toString()方法。重写后的valueOf()方法返回对象表示的基本类型的数值,另外两个方法则返回字符串形式的数值。可以为toString()方法传递一个表示基数的参数,告诉它返回几进制数值的字符串形式,如:

     var num = 10;
     alert(num.toString());//10
     alert(num.toString(2));//1010
     alert(num.toString(8));//12
     alert(num.toString(10));//10
     alert(num.toString(16));//a

除了继承的方法之外,Number类型还提供了一些用于将数值格式化为字符串的方法。

其中,toFixed()方法会按照指定的小数位返回数值的字符串表示,如:

     var num = 10;
     alert(num.toFixed(2));//10.00

这里给toFixed()方法传入了数值2,意思是显示几位小数。于是,这个方法返回了”10.00”,即以0填补了必要的小数位。如果数值本身包含的小数位比指定的还多,那么接近指定的最大小数位的值就会舍入,如:

     var num = 10.005;
     alert(num.toFixed(2));//10.01

能够自动舍入的特性,使得toFixed()方法很适合处理货币值。但需要注意的是,不同的浏览器给这个方法设定的舍入规则可能不同。在给toFixed()传入0的情况下,IE8及其之前版本不能正确舍入范围在{(-0.94,-0.5],[0.5,0.94)}之间的值。对于这个范围内的值,IE会返回0,而不是-1或1;其它浏览器都能返回正确的值。IE9修复了这个问题。

另外可用于格式化是指的方法是toExponential(),该方法返回以指数表示法(也称e表示法)表示的数值的字符串形式。与toFixed()一样,toExponential()也接收一个参数,而且该参数同样也是指定输出结果中的小数位数,如:

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

以上代码输出了”1.0e+1”;不过,这么小的数值一般不必使用e表示法。如果你想得到表示某个数值的最合适的格式,就应该使用toPrecision()方法。

对于一个数值来说,toPrecision()方法可能返回固定大小格式,也可能返回指数格式;具体规则是看哪种格式最合适。这个方法接收一个参数,即表示数值的所有数字的位数(不包括指数部分),如:

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

以上代码首先完成的任务是以一位数来表示99,结果是”1e+2”,即100。因为一位数无法准确地表示99,因此toPrecision()就将它向上舍入为100,这样就可以使用一位数来表示它了。而接下来的用两位数表示99,当然还是”99”。最后,在想以三位数表示99时,toPrecision()方法返回了”99.0”。实际上,toPrecision()会根据I 要处理的数值决定到底是调用toFixed()还是调用toExponential()。而这三个方法够可以通过向上或向下舍入,做到以最准确的形式来表示带有正确小数位的值。

与Boolean对象类似,Number对象也以后台方法为数值提供了重要的功能。但与此同时,我们仍不建议直接实例化Number类型,而原因与显式创建Boolean对象一样。具体来讲,就是在使用typeof和instanceof操作符测试基本类型数值与引用类型数值时,得到的结果完全不同。

String类型

String类型是字符串的对象包装类型,可以像下面这样使用String构造函数来创建。

var stringObject = new String(“hello world”);

String对象的方法也可以在所有基本的字符串值中访问到。其中,继承的valueof()、toLocaleString()和toString()方法,都返回对象所表示的基本字符串值。

String类型的每个实例都有一个length属性,表示字符串中包含多少个字符。

String类型提供了很多方法,用于辅助完成对ECMAScript中字符串的解析和操作。

字符方法

两个用于访问字符串中特定字符的方法是charAt()和charCodeAt()。这两个方法都接收一个参数,即基于0的字符位置。其中,charAt()方法返回以单字符字符串的形式返回给定位置的那个字符(ECMAScript中没有字符类型)。例如:

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

字符串”hello world”位置1处的字符是”e”,因此调用charAt(1)就返回了”e”。如果你想得到的不是字符而是字符编码,那么就要像下面这样使用charCodeAt()了:

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

ECMAScript5还定义了一个访问个别字符的方法。在支持浏览器中,可以使用方括号加数字索引来访问字符串中的特定字符,如:

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

使用方括号表示法访问个别字符的语法得到了IE8及Firefox、Safari、Chrome和Opera所有版本的支持。如果是在IE7及更早版本中使用这种语法,会返回undefined值(尽管不是特殊的undefined值)。

字符串操作方法

concat()方法用于将一或多个字符串拼接起来,返回拼接得到的新字符串,可以接收任意多个参数,也就是说可以通过它拼接任意多个字符串。如:

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

这个例子将”  ”、”world”和”!”拼接到了”hello”的末尾。虽然concat()是专门用来拼接字符串的方法,但实践中使用更多的还是加号操作符(+)。而且,使用加号操作符在大多数情况下都比使用concat()方法要简单易行(特别是在拼接多个字符串的情况下)。

ECMAScript还提供了三个基于子字符串创建新字符串的方法:slice()、substr()和substring()。这三个方法都会返回被操作字符串的一个字符串,而且也都接收一或两个参数。第一个参数指定子字符串的开始位置,第二个参数(在指定的情况下)表示子字符串到哪里结束。具体来说,slice()和substring()的第二个参数指定的是子字符串最后一个字符后面的位置。而substr()的第二个参数指定的则是返回的字符个数。如果没有给这些方法传递第二个参数,则将字符串的长度作为结束位置。与concat()方法一样,slice()、substr()和substring()也不会修改字符串本身的值——它们只是返回一个基本类型的字符串值,对原始字符串没有任何影响。如:

     var stringValue =
"hello world";
     alert(stringValue.slice(3));//"lo world"
     alert(stringValue.substring(3));//"lo world"
     alert(stringValue.substr(3));//"lo world"
     alert(stringValue.slice(3 , 7));//"lo w"
     alert(stringValue.substring(3 , 7));//"lo w"
     alert(stringValue.substr(3 , 7));//"lo worl"

这个例子比较了以相同方式调用slice()、substr()和substring()得到的结果,而且多数情况喜爱的结果是相同的。在只指定一个参数3的情况下,这三个方法都返回”lo world”,因为”hello”中的第二个”l”处于位置3。而在指定两个参数3和7的情况下,slice()和substring()返回”lo w”(”world”中的”o”处于位置7,因此结果中不包含”o”),但substr()返回”lo worl”,因为它的第二个参数指定的是要返回的字符个数。

在传递给这些方法的参数是负值的情况喜爱,它们的行为就不尽相同了。其中,slice()方法会将传入的负值与字符串的长度相加,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0。最后,substring()方法会把所有负值都转换为0。如:

     var stringValue =
"hello world";
     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));//""(空字符串)

这个例子清晰地展示了上述三个方法之间的不同行为。在给slice()和substr()传递一个负值参数时,它们的行为相同。这是因为-3会被转换为8(字符串长度加参数11+(-3)=8),实际上相当于调用了slice(8)和substr(8)。但substring()方法则返回了全部字符串,因为它将-3转换成了0。

IE的JavaScript是ian在处理向substr()方法传递负值的情况时存在问题,它会返回原始的字符串。IE9修复了这个问题。

当第二个参数是负值,这三个方法的行为各不相同。slice()方法会把第二个参数转换为7,这就相当于调用了slice(3 , 7),因此返回”lo w”。substring()方法会把第二个参数转换为0,使调用变成了substring(3 , 0),而由于这个方法会将较小的数作为开始位置,将较大的数作为结束位置,因此最终相当于调用了substring(0 , 3)。substr()也会将第二个参数转换为0,这也就意味着返回包含零个字符的字符串,也就是一个空字符串。

字符串位置方法

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

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

子字符串”o”第一次出现的位置是4,即”hello”中的”o”,最后一次出现的位置是7,即”world”中的”o”。如果”o”在这个字符串中仅出现了一次,那么indexOf()和lastIndexOf()会返回相同的位置值。可以根据此点判断子串是否出现且仅出现了一次。

这两个方法都可以接收可选的第二个参数,表示从字符串中的哪个位置开始搜索。换句换说,indexOf()会从该参数指定的位置向后搜索,忽略该位置之前的所有字符;而lastIndexOf()则会从指定的位置向前搜索,忽略该位置之后的所有字符。如:

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

在将第二个参数6传递给这两个方法之后,得到了与前面例子相反的结果。这一次,由于indexOf()是从位置6(字母”w”)开始向后搜索,结果在位置找到了”o”,因此它返回7。而lastIndexOf()是从位置6开始向前搜索。结果找到了”hello”中的”o”,因此它返回4。在使用第二个参数的情况下,可以通过循环调用indexOf()或lastIndexOf()来找到匹配的字符串,如:

     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"

这个例子通过不断增加indexOf()方法开始查找的位置,遍历了一个长字符串。在循环之外,首先找到了”e”在字符串中的初始位置;而进入循环后,则每次都给index()传递上一次的位置加1。这样就确保了每次新搜索都从上一次找到的子字符串后面开始。每次搜索返回的位置依次被保存在数组positions中,以便将来使用。

trim()方法

ECMAScript5为所有字符串定义了trim()方法。这个方法会创建一个字符串的副本,删除前置及后缀的所有空格,然后返回结果。如:

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

由于trim()返回的是字符串的副本,所以演示字符串中的前置及后缀空格会保持不变。支持这个方法的浏览器有IE9+、Firefox3.5+、Safari5+、Opera10.5+和Chrome。此外,Firefox3.5+、Safari5+和Chrome8+还支持非标准的trimLeft()和trimRight()方法,分别用于删除字符串开头和末尾的空格。

字符串大小写转换方法

ECMAScript中涉及字符串大小写转换的方法有4个:toLowerCase()、toLocaleLowerCase()、toUpperCase()和toLocaleUpperCase()。其中,toLowerCase()和toUpperCase()是两个经典的方法,借鉴自java.lang.String中的同名方法。而toLocaleLowerCase()和toLocaleUpperCase()方法则是针对特定地区的实现。对有些地区来说,针对地区的放哪广发与其通用方法得到的结果相同,但少数语言(如土耳其语)会为Unicode大小写转换应用特殊的规则,这时候就必须使用针对地区的方法来保证实现正确的转换。如:

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

以上调用的toLocaleUpperCase()和toUpperCase()都返回了“HELLO WORLD”,就像调用toLocaleLowerCase()和toLowerCase()都返回“hello world”一样。一般来说,在不知道自己的代码将在哪种语言环境中运行的情况下,还是使用针对地区的方法更稳妥些。

字符串的模式匹配方法

String类型定义了几个用于在字符串中匹配模式的方法。第一个方法就是match(),在字符串上调用这个方法,本质与调用RegExp的exec()方法相同。match()方法只接收一个参数,要么是一个正则表达式,要么是一个RegExp对象。如:

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

本例中的match()方法返回了一个数组;如果是调用RegExp对象的exec()方法并传递本例中的字符串作为参数,那么也会得到与此相同的数组:数组的第一项是与整个模式匹配的字符串,之后的每一项(如果有)保存着与正则表达式中的捕获组匹配的字符串。

另一个用于查找模式的方法是search()。这个方法的唯一参数与match()方法的参数相同。search()方法返回字符串中第一个匹配项额索引;如果没有找到匹配项,则返回-1。而且,search()方法始终是从字符串开头向后查找模式。如:

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

这个例子中的search()方法返回1,即”at”在字符串中第一次出现的位置。

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

     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"

前面trim()的例子中,该函数不会去掉字符串中间的空格,此时就可以使用上面例子中的方式使用空字符串替换空格:

     var stringValue =
" hello world ";
     var trimmedAll = stringValue.replace(/\s/g ,
"");
     alert(trimmedAll);//helloworld

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

字符序列
替换文本
$$

$

$&

匹配整个模式的子字符串。与RegExp.lastMatch的值相同

$’

匹配的子字符串之前的子字符串。与RegExp.leftContext的值相同

$`

匹配的子字符串之后的子字符串。与RegExp.rightContext的值相同

$n

匹配第n个捕获组的子字符串,其中n等于0~9。例如,$1是匹配第一个捕获组的字符串,以此类推。如果正则表达式中没有定义捕获组,则使用空字符串

$nn

匹配第nn个捕获组的子字符串,其中n等于01~99。例如,$02是匹配第二个捕获组的字符串,以此类推。如果正则表达式中没有定义捕获组,则使用空字符串

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

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

在此,每个以at结尾的单词都被替换了,替换结果是”world”后跟一堆圆括号,而圆括号中是被字符序列$1所替换的单词。

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

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

//<pcalss="greeting">Hello World!</p>

这里,为插入HTML代码定义了函数htmlEscape(),这个函数能够转义四个字符。实现这种转义的最简单方式,就是使用正则表达式查找这几个字符,然后定义一个能够针对每个匹配的字符返回特定HTML实体的函数。

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

     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(/[^\,]+/);//["", ",",",", ",", ""]

在这个例子中,colorText是逗号分隔的颜色名字符串。基于该字符串调用split(“,”)会得到一个包含其中颜色名的数组,用于分割字符串的分隔符是逗号。为了将数组截短,让它只包含两项,可以为split()方法传递第二个参数2。最后,通过使用正则表达式,还可以取得包含逗号字符的数组。需要注意的是,在最后一次调用split()返回的数组中,第一项和最后一项是两个空字符串。之所以会这样,是因为通过正则表达式指定的分隔符出现在了字符串的开头(即子字符串”red”)和末尾(即子字符串”yellow”)。

对split()中正则表达式的支持因浏览器而异。尽管对于简答的模式没有什么差别,但对于未发现匹配项以及带有捕获组的模式,匹配的行为就大不相同了。

IE8及之前版本会忽略捕获组。ECMA-262规定应该把捕获组拼接到结果数组中。IE9能正确地在结果中包含捕获组。

Firefox3.6及之前版本在捕获组未找到匹配项时,会在结果数组中包含空字符串;ECMA-262规定没有匹配项的捕获组在结果数组中应该用undefined表示。

在正则表达式中使用捕获组时还有其它微妙的差别。在使用这种正则表达式时,一定要在各种浏览器下多做一些测试。

localeCompare()方法

与操作字符串有关的最后一个方法是localeCompare(),这个方法比较两个字符串,并返回下列值中的一个:

(1)      如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(大多数情况喜爱是-1,具体的值要视实现而定);

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

(3)      如果字符串在字母表中应该排在字符串参数之后,则返回一个正数(大多数情况下是1,具体的值视实现而定)。

 

     var stringValue =
"yellow";
     alert(stringValue.localeCompare("brick"));//1
     alert(stringValue.localeCompare("yellow"));//0
     alert(stringValue.localeCompare("zoo"));//-1

这个例子比较了字符串”yellow”和另外几个值:”brick”、”yellow”和“zoo”。因为”brick”在字母表中排在“yellow”之前,所以localeCompare()返回了1;同理后两行代码分别返回0和-1。再强调一次,因为localeCompare()返回的数值取决于实现,所以最好是像下面使用这个方法:

     function determineOrder(value){
         var result = stringValue.localeCompare(value);
         if(result < 0){
             alert(stringValue + " < " + value);
         }else
if
(result > 0){
             alert(stringValue + " > " + value);
         }else{
             alert(stringValue + " = " + value);
         }
     }
     var stringValue =
"yellow";
     determineOrder("brick");
     determineOrder("yellow");
     determineOrder("zoo");

使用这种结构,就可以确保自己的代码在任何实现中都可以正确地运行了。

localeCompare()方法比较与众不同的地方,就是实现所支持的地区(国家和语言)决定了这个方法的行为。比如,美国以英语作为ECMAScript实现的标准语言,因此localeCompare()就是区分大小写的,于是大写字母在字母表中排在小写字母前头就成了一项决定性的比较规则。不过,在其他地区恐怕就不是这种情况了。

fromCharCode()方法

另外,String构造函数本身还有一个静态方法:fromCharCode()。这个方法的任务是接收一或多个字符编码。然后将它们转换成一个字符串。从本质上来看,这个方法与实例方法charCodeAt()执行的是相反的操作,如:

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

在这里,给fromCharCode()传递的是字符串”hello”中每个字母的字符编码。

HTML方法

早期的Web浏览器提供商觉察到了使用JavaScript动态格式化HTML的需求,于是,这些提供商就扩展了标准,实现了一些专门用于简化常见HTML格式化任务方法,不过,需要注意的是,因尽量不使用这些方法,因为它们创建的标记通常无法表达语义,而且现在有很多的前端框架,这些已经很少使用了。

单体内置对象

ECMA-262对内置对象的定义是“由ECMAScript实现提供的、不依赖于宿主环境的对象,这些对象在ECMAScript程序执行之前就已经存在了。”意思就是说,开发人员不必显式地实例化内置对象,因为它们已经实例化了。前面已经介绍了大多数内置对象,如Object、Array和String。ECMA-262还定义了两个单体内置对象Global和Math。

Global对象

Global(全局)对象可以说是ECMAScript中最特别的一个对象了,因为不管从什么角度上看,这个对象都是不存在的。ECMAScript中的Global对象在某种意义上是作为一个终极的“兜底对象”来定义的。换句话说,不属于任何其他对象的属性和方法,最终都是它的属性和方法。试试上,没有全局变量和全局函数;所有在全局作用域中定义的属性和函数,都是Global对象的属性。前面介绍过的那些函数,诸如isNaN()、isFinite()、parseInt()以及parseFloat(),实际上全都是Global对象的方法。除此之外,Global对象还包含其它一些方法。

URI编码方法

Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码,以便发送给浏览器。有效的URI中不能包含某些字符,例如空格。而这两个URI方法就可以对URI进行编码,它们用特殊的UTF-8编码替换所有无效的字符,从而让浏览器能够接受和理解。

其中,encodeURI()主要用于整个URI(例如,http://blog.csdn.net/goskalrie),而encodeURIComponent()主要用于对URI中的某一段(例如前面URI中的goskalrie)进行编码。它们的主要区别在于,encodeURI()不会对本身URI的特殊字符进行编码,例如冒号、正斜杠、问号和井字号;而encodeURIComponent()则会对它发现的任何非标准字符进行编码,如:

     var uri =
"http://blog.csdn.net/goskalrie#start& test";
    //http://blog.csdn.net/goskalrie#start%20&%20test
     console.log(encodeURI(uri));
    //http%3A%2F%2Fblog.csdn.net%2Fgoskalrie%23start%20%26%20test
     console.log(encodeURIComponent(uri));

使用encodeURI()编码后的结果是除了空格之外的其它字符都原封不动。而encodeURIComponent()方法则会使用对象的编码替换多有非字母数字字符。这也正是可以对整个URI使用encodeURI,而只能对附加在现有URI后面的字符串使用encodeRUIComponent()的原因所在。

与encodeURI()和encodeURIComponent()方法对应的两个方法分别是decodeURI()和decodeURIComponent()。其中,decodeURI()只能对使用encodeURI()替换的字符进行解码。例如,它可以将%20替换成一个空格,但不会对%23做任何处理,因为%23表示井号(#),而井字号不是使用encodeURI()替换的。同样地,decodeURIComponent()能够解码使用encodeURIComponent()编码的左右字符,即它可以解码任何特殊字符的编码,如:

     var uri =
"http%3A%2F%2Fblog.csdn.net%2Fgoskalrie%23start%20%26%20test";
    //http%3A%2F%2Fblog.csdn.net%2Fgoskalrie%23start %26 test
     console.log(decodeURI(uri));
    //http://blog.csdn.net/goskalrie#start & test
     console.log(decodeURIComponent(uri));

从上面的例子可以看出,使用encodeURIComponent()编码后的URI,再使用decodeURI()无法解析得到正确的URI,而使用decodeURIComponent()可以得到未经转义的字符串。

URI方法encodeURI()、encodeURIComponent()、decodeURI()和decodeURIComponent()用于替代已经被ECMA-262第3版废弃的escape()和unescape()方法。URI方法能够编码所有Unicode字符,而原来的方法只能正确地编码ASCII字符。因此在开发实践中,特别是在产品级的代码中,一定要使用URI方法,不要使用escape()和unescape()方法。

现在,我们介绍最后一个——大概也是整个ECMAScript语言中最强大的一个方法eval()。eval()方法就像是一个完整的ECMAScript解析器,它只接受一个参数,即要执行的JavaScript字符串,如:

     eval("alert('hi');");

这行代码的作用等价于下面这行代码:

alert(“hi”);

当解析器发现代码中调用eval()方法时,它会将传入的参数当作实际的ECMAScript语句来解析,然后把执行结果插入到原位置。通过eval()执行的代码被认为是包含该次调用的执行环境的一部分,因此被执行的代码具有与该执行环境相同的作用域练。这意味着通过eval()执行的代码可以引用在包含环境中定义的变量,如:

     var message =
"hello";
     eval("alert(message);");//hello

可见,变量message是在eval()调用的环境之外定义的,但其中调用的alert()仍然能够显示”hello”。这是因为上面第二行代码最终被替换成了一行真正的代码,同样,可以在eval()调用中定义一个函数,然后再在该调用的外码代码中引用这个函数。

     eval("function sum(num1 ,num2){return num1 + num2;}");
     alert(sum(10,10));//20

使用这种方式创建的函数与使用function关键字定义的函数不同,在代码没有执行到eval()所在代码行时,环境中不会有sum()函数,如果将alert()放到eval()之前,代码将会出错。

严格模式下,在外部访问不到eval()中创建的任何变量或函数,因此上面的两个例子都会导致错误,同样,在严格模式下,变量名不能使用eval,否则将报错。

     "use strict";
     var eval;//
(报错)Unexpected eval or arguments in strict mode

能够解释代码字符串的能力非常强大,但也非常危险。因此在使用eval()时必须极为谨慎,特别是在用它执行用户输入数据的情况下。否则,可能会有恶意用户输入威胁你的站点或应用程序安全的代码(即所谓的代码注入)。

Global对象的属性

Global对象还包含一些属性,其中该部分属性在前面介绍过。例如,特殊的值undefined、NaN以及Infinity都是Global对象的属性。此外,所有原生引用类型的构造函数,像Object和Function,也都是Global对象的属性。

Global对象的所有属性
属性
说明
 
属性
说明
undefined

特殊值undefined

Date

构造函数Date

NaN

特殊值NaN

RegExp

构造函数RegExp

Infinity

特殊值Infinity

Error

构造函数Error

Object

构造函数Object

EvalError

构造函数EvalError

Array

构造函数Array

RangeError

构造函数RangeError

Function

构造函数Function

ReferenceError

构造函数ReferenceError

Boolean

构造函数Boolean

SyntaxError

构造函数SyntaxError

String

构造函数String

TypeError

构造函数TypeError

Number

构造函数Number

URIError

构造函数URIError

ECMAScript5明确禁止给undefined、NaN和Infinity赋值,这样做即使在非严格模式下也会导致错误。

window对象

ECMAScript虽然没有指出如何直接访问Global对象,但Web浏览器都是将这个全局对象作为window对象的一部分加以实现的。因此,在全局作用域中声明的所有变量和函数,就都成为了window对象的属性。如:

     var color =
"red";
     function sayColor(){
         alert(window.color);
     }
     sayColor();//red

这里定义了一个名为color的全局变量和一个名为sayColor()的全局函数。在sayColor()内部,我们通过window.color来访问color变量,以说明全局变量是window对象的属性。然后,又使用window.sayColor()来直接通过window对象调用这个函数,结果显示在了警告框中。

另一种取得Global对象的方法是使用以下代码:

     var color =
"red";
     var global =
function(){
         return
this
;
     }();
     alert(global.color);//red

以上代码创建了一个立即调用的函数表达式,返回this的值。如前所述,在没有给函数明确指定this值的情况下(无论是通过将函数添加为对象的方法,还是通过调用call()或apply()),this值等于Global对象。而像这样通过简单地返回this来取得Global对象,在任何执行环境下都是可行的。

Math对象

ECMAScript还为保存数学公式和信息提供了一个公共位置,即Math对象。与JavaScript直接编写的计算功能相比,Math对象提供的计算功能执行起来要快得多。Math对象中还提供了辅助完成这些计算的属性和方法。

Math对象的属性

属性
说明
Math.E

自然对数的底数,即常量e的值

Math.LN10

10的自然对数

Math.LN2

2的自然对数

Math.LOG2E

以2为底e的对数

Math.LOG10E

以10为底e的对数

Math.PI

π的值

Math.SORT1_2

1/2的平方很(即2的平方根的倒数)

Math.SORT2

2的平方根

min()和max()方法

Math对象还包含许多方法,用于辅助完成简单和复杂的数学计算。

其中,min()和max()方法用于确定一组数值中的最小值和最大值。这两个方法都可以接收任意多个数值参数,如:

     alert(Math.min(3,20,11,57));//3
     alert(Math.max(3,20,11,57));//57

这两个方法经常用于避免多余的循环和在if语句中确定一组数的最值。

要找到数组中的最大或最小值,可以像下面这样使用apply()方法。

     var values = [3,20,11,57];
     alert(Math.min.apply(Math , values));//3
     alert(Math.max.apply(Math , values));//57

这个技巧的关键是把Math对象作为apply()的第一个参数,从而正确地设置this值。然后,可以将任何数组作为第二个参数。

舍入方法

下面来介绍将小数舍入为整数的几个方法:Math.ceil()、Math.floor()和Math.round()。这三个方法分别遵循下列舍入规则:

(1)      Math.ceil()执行向上舍入,即它总是将数值向上舍入为最接近的整数;

(2)      Math.floor()执行向下舍入,即它总是将数值向下舍入为最接近的整数;

(3)      Math.round()执行标准的四舍五入。

random()方法

Math.random()方法返回介于0和1之间一个随机数,不包括0和1。对于某些站点来说,这个方法非常实用,因为可以利用他来随机显示一些名人名言和新闻事件。套用下面的公式,就可以利用Math.random()从某个正数范围内随机选择一个值。

值 = Math.floor(Math.random*可能值的总数+第一个可能的值)

例如:

     var num = Math.floor(Math.random() * 10 + 1);

总共有10个可能的值(1到10),而第一个可能的值是1。如果想要选择一个介于0到5之间的值,就应该将上面的代码改为:

     var num = Math.floor(Math.random() * 6);

总共有6个可能的值,第一个可能的值为0。可以通过自定义个函数,传入第一个可能的值和最后一个可能的值得到想要的结果:

     function myRandom(startValue , endValue){
         var range = endValue - startValue + 1;
         return Math.floor(Math.random() * range +startValue);
     }
     alert(myRandom(2,10));//介于2,10之间(包括2和10)的一个数值

利用上面的函数结合数组能够做到随机取值(新闻,名人名言,今日推荐等):

     var news = ["new1" ,
"new2" , "new3" ,
"new4" , "new5"];
     var newToday = news[myRandom(0 ,news.length-1)];
     alert(newToday);//可能是数组中包含的人呢和一个字符串

其它方法

Math对象中还包含一些与完成各种更简单或复杂计算有关的方法。

方法
说明
 
方法
说明
Math.abs(num)

绝对值

Math.asin(x)

x的反正弦值

Math.exp(num)

E的num次幂

Math.atan(x)

x的反正切值

Math.log(num)

num的自然对数

Math.atan2(y , x)

y/x的反正切值

Math.pow(num , power)

num的power次幂

Math.cos(x)

x的余弦值

Math.sqrt(num)

num的平方根

Math.sin(x)

x的正弦值

Math.acos(x)

x的反余弦值

Math.tan(x)

x的正切值

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: