5.引用类型(4)

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

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

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

而在读取模式中访问字符串时,后台都会自动完成下列处理。(1) 创建String 类型的一个实例;(2) 在实例上调用指定的方法;(3) 销毁这个实例。可以将以上三个步骤想象成是执行了下列ECMAScript 代码。

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;
//上面这三个步骤也分别适用于Boolean和Number 类型对应的布尔值和数字值。

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

可以显式地调用Boolean、Number 和String 来创建基本包装类型的对象。应该在绝对必要的情况下再这样做,这种做法很容易让人分不清自己是在处理基本类型还是引用类型的值。对基本包装类型的实例调用typeof会返回"object"。而且所有基本包装类型的对象转换为布尔值的时候,值都会是true。(all primitive wrapper objects convert to the Boolean value true.)

var s1 = new String("some text");
console.log(typeof s1)                    "object"
console.log(Boolean(new Number(0)));      true
console.log(Boolean(0));                  false

Object 构造函数也会像工厂方法一样,根据传入值的类型返回相应基本包装类型的实例。原本的Object变成了String。(把字符串传给Object 构造函数,就会创建String 的实例;而传入数值参数会得到Number 的实例,传入布尔值参数就会得到Boolean 的实例。)

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

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

var value = "25";
var number = Number(value);         //转型函数
alert(typeof number);               //"number"
var obj = new Number(value);        //构造函数
alert(typeof obj);                  //"object"
  • Boolean类型:Boolean 类型是与布尔值对应的引用类型。要创建Boolean 对象,可以像下面这样调用Boolean构造函数并传入true 或false 值。
var booleanObject = new Boolean(true);

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

var falseObject = new Boolean(false);
var result = falseObject && true;
alert(result); //true
var falseValue = false;
result = falseValue && true;
alert(result); //false

//在这个例子中,我们使用false 值创建了一个Boolean 对象。
//然后,将这个对象与基本类型值true构成了逻辑与表达式。
//在布尔运算中,false && true 等于false。
//可是,示例中的这行代码是对falseObject 而不是对它的值(false)进行求值。
//前面讨论过,布尔表达式中的所有对象都会被转换为true,
//因此falseObject 对象在布尔表达式中代表的是true。结果,true && true 当然就等于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 对象之间的区别非常重要。当然,建议是永远不要使用Boolean 对象。
  • Number类型:Number 是与数字值对应的引用类型。要创建Number 对象,可以在调用Number 构造函数时向其中传递相应的数值。
var numberObject = new Number(10);

与Boolean 类型一样,Number 类型也重写了valueOf()、toLocaleString()和toString()方法。重写后的valueOf()方法返回对象表示的基本类型的数值,另外两个方法则返回字符串形式的数值。我们在第3 章还介绍过,可以为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 修复了这个问题。

//toFixed()方法可以表示带有0 到20 个小数位的数值。
//但这只是标准实现的范围,有些浏览器也可能支持更多位数。

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

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

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

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

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

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

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

var numberObject = new Number(10);
var numberValue = 10;

alert(typeof numberObject); //"object"
alert(typeof numberValue); //"number"
alert(numberObject instanceof Number); //true
aler t(numberValue instanceof Number); //false

//在使用typeof 操作符测试基本类型数值时,始终会返回"number",
//而在测试Number 对象时,则会返回"object"。
//类似地,Number 对象是Number 类型的实例,而基本类型的数值则不是。
  • String类型:String 类型是字符串的对象包装类型,可以像下面这样使用String 构造函数来创建。
var stringObject = new String("hello world");
//String 类型是字符串的对象包装类型,可以使用String构造函数来创建

var stringValue = "hello world";
alert(stringValue.length); //"11"
//String 对象的方法也可以在所有基本的字符串值中访问到。
//其中,继承的valueOf()、toLocaleString()和toString()方法,都返回对象所表示的基本字符串值。

//String 类型的每个实例都有一个length 属性,表示字符串中包含多个字符。来看下面的例子。
var stringValue = "hello world";
alert(stringValue.length); //"11"
//这个例子输出了字符串"hello world"中的字符数量,即"11"。应该注意的是,
//即使字符串中包含双字节字符(不是占一个字节的ASCII 字符),每个字符也仍然算一个字符。

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

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

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

alert(stringValue.charCodeAt(1)); //输出"101"

//ECMAScript 5 还定义了另一个访问个别字符的方法。
//在支持此方法的浏览器中,可以使用方括号加数字索引来访问字符串中的特定字符,如下面的例子所示。
var stringValue = "hello world";
alert(stringValue[1]); //"e"

2. 字符串操作方法

  • concat():用于将一或多个字符串拼接起来,返回拼接得到的新字符串。
var stringValue = "hello ";
var result = stringValue.concat("world");
alert(result);             //"hello world"
alert(stringValue);        //"hello"

//通过stringValue 调用concat()方法返回的结果是"hello world",但stringValue 的值则保持不变

//实际上,concat()方法可以接受任意多个参数,也就是说可以通过它拼接任意多个字符串。
var stringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result);                 //"hello world!"
alert(stringValue);            //"hello"
  • slice()、substr()和substring():这三个方法都会返回被操作字符串的一个子字符串,而且也都接受一或两个参数。第一个参数指定子字符串的开始位置,第二个参数(在指定的情况下)表示子字符串到哪里结束。具体来说,slice()和substring()的第二个参数指定的是子字符串最后一个字符后面的位置。而substr()的第二个参数指定的则是返回的字符个数。如果没有给这些方法传递第二个参数,则将字符串的长度作为结束位置。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()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为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)); //""(空字符串)

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

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

//这两个方法都可以接收可选的第二个参数,表示从字符串中的哪个位置开始搜索。
//换句话说,indexOf()会从该参数指定的位置向后搜索,忽略该位置之前的所有字符;
//而lastIndexOf()则会从指定的位置向前搜索,忽略该位置之后的所有字符。看下面的例子。
var stringValue = "hello world";
alert(stringValue.indexOf("o", 6)); //7
alert(stringValue.lastIndexOf("o", 6)); //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"

4. trim()方法:这个方法会创建一个字符串的副本,删除前置及后缀的所有空格,

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

alert(stringValue); //" hello world "
alert(trimmedStringValue); //"hello world"

5. 字符串大小写转换方法:toLowerCase()、toLocaleLowerCase()、toUpperCase()和toLocaleUpperCase()。

//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"一样。
//一般来说,在不知道自己的代码将在哪种语言环境中运行的情况下,还是使用针对地区的方法更稳妥一些。

6. 字符串的模式匹配方法

  • match():在字符串上调用这个方法,本质上与调用RegExp 的exec()方法相同。,要么是一个正则表达式,要么是一个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()方法的参数相同:由字符串或RegExp 对象指定的一个正则表达式。search()方法返回字符串中第一个匹配项的索引;如果没有找到匹配项,则返回-1。而且,search()方法始终是从字符串开头向后查找模式。
var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
aler t(pos); //1

//返回1,即"at"在字符串中第一次出现的位置。
  • 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"

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

字符序列替换文本
$$$
$&匹配整个模式的子字符串。与RegExp.lastMatch的值相同
$'匹配的子字符串之前的子字符串。与RegExp.leftContext的值相同
$`匹配的子字符串之后的子字符串。与RegExp.rightContext的值相同
$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()方法的第二个参数也可以是一个函数。在只有一个匹配项(即与模式匹配的字符串)的情况下,会向这个函数传递3 个参数:模式的匹配项、模式匹配项在字符串中的位置和原始字符串。在正则表达式中定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项……但最后两个参数仍然分别是模式的匹配项在字符串中的位置和原始字符串。这个函数应该返回一个字符串,表示应该被替换的匹配项使用函数作为replace()方法的第二个参数可以实现更加精细的替换操作。

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

//这里,为插入HTML 代码定义了函数htmlEscape(),这个函数能够转义4 个字符:
//小于号、大于号、和号以及双引号。实现这种转义的最简单方式,就是使用正则表达式查找这几个字符,
//然后定义一个能够针对每个匹配的字符返回特定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(/[^\,]+/); //["", ",", ",", ",", ""]

7. localeCompare()方法:比较两个字符串,并返回下列值中的一个

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

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

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

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

//。因为"brick"在字母表中排在"yellow"之前,所以localeCompare()返回了1;
//而"yellow"等于"yellow",所以localeCompare()返回了0;
//最后,"zoo"在字母表中排在"yellow"后面,所以localeCompare()返回了-1。

function determineOrder(value) {
    var result = stringValue.localeCompare(value);
    if (result < 0){
        alert("The string 'yellow' comes before the string '" + value + "'.");
    } else if (result > 0) {
        alert("The string 'yellow' comes after the string '" + value + "'.");
    } else {
        alert("The string 'yellow' is equal to the string '" + value + "'.");
    }
}
determineOrder("brick");
determineOrder("yellow");
determineOrder("zoo");

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

8. fromCharCode()方法:这个方法的任务是接收一或多个字符编码,然后将它们转换成一个字符串。从本质上来看,这个方法与实例方法charCodeAt()执行的是相反的操作。

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

9. HTML 方法:早期的Web 浏览器提供商觉察到了使用JavaScript 动态格式化HTML 的需求。于是,这些提供商就扩展了标准,实现了一些专门用于简化常见HTML 格式化任务的方法。下表列出了这些HTML 方法。不过,应该尽量不使用这些方法,因为它们创建的标记通常无法表达语义。

方法输出结果
anchor(name)<a name= "name">string</a>
big()<big>string</big>
bold()<b>string</b>
fixed()<tt>string</tt>
fontcolor(color)<font color="color">string</font>
fontsize(size)<font size="size">string</font>
italics()<i>string</i>
link(url)<a href="url">string</a>
small()<small>string</small>
strike()<strike>string</strike>
sub()<sub>string</sub>
sup()<sup>string</sup>

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

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

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

  • encodeURI()、encodeURIComponent():
var uri = "http://www.wrox.com/illegal value.htm#start";
//"http://www.wrox.com/illegal%20value.htm#start"
alert(encodeURI(uri));
//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"
alert(encodeURIComponent(uri));

//使用encodeURI()编码后的结果是除了空格之外的其他字符都原封不动,只有空格被替换成了%20。
//而encodeURIComponent()方法则会使用对应的编码替换所有非字母数字字符。
//这也正是可以对整个URI 使用encodeURI(),
//而只能对附加在现有URI 后面的字符串使用encodeURIComponent()的原因所在。
  • decodeURI()、decodeURIComponent():,decodeURI()只能对使用encodeURI()替换的字符进行解码。例如,它可将%20 替换成一个空格,但不会对%23 作任何处理,因为%23 表示井字号(#),而井字号不是使用encodeURI()替换的。同样地,decodeURIComponent()能够解码使用encodeURIComponent()编码的所有字符,即它可以解码任何特殊字符的编码。
var uri = "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start";

//http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start
alert(decodeURI(uri));
//http://www.wrox.com/illegal value.htm#start
alert(decodeURIComponent(uri));

//这里,变量uri 包含着一个由encodeURIComponent()编码的字符串。
//在第一次调用decodeURI()输出的结果中,只有%20 被替换成了空格。
//而在第二次调用decodeURIComponent()输出的结果中,
//所有特殊字符的编码都被替换成了原来的字符,得到了一个未经转义的字符串
//(但这个字符串并不是一个有效的URI)。

2. eval()方法:eval()方法就像是一个完整的ECMAScript 解析器,它只接受一个参数,要执行的ECMAScript (或JavaScript)字符串。

eval("alert('hi')");
//这行代码的作用等价于下面这行代码:
alert("hi");
//当解析器发现代码中调用eval()方法时,它会将传入的参数当作实际的ECMAScript 语句来解析,
//然后把执行结果插入到原位置。通过eval()执行的代码被认为是包含该次调用的执行环境的一部分,
//因此被执行的代码具有与该执行环境相同的作用域链。
//这意味着通过eval()执行的代码可以引用在包含环境中定义的变量,举个例子:
var msg = "hello world";
eval("alert(msg)");         //"hello world"

//可见,变量msg 是在eval()调用的环境之外定义的,但其中调用的alert()仍然能够显示"hello world"。
//这是因为上面第二行代码最终被替换成了一行真正的代码。
//同样地,我们也可以在eval()调用中定义一个函数,然后再在该调用的外部代码中引用这个函数:
eval("function sayHi() { alert('hi'); }");
sayHi();

//显然,函数sayHi()是在eval()内部定义的。但由于对eval()的调用最终会被替换成定义函数的实际代码,
//因此可以在下一行调用sayHi()。对于变量也一样:
eval("var msg = 'hello world'; ");
alert(msg);                 //"hello world"
//在eval()中创建的任何变量或函数都不会被提升,因为在解析代码的时候,它们被包含在一个字符串中;
//它们只在eval()执行的时候创建。
//严格模式下,在外部访问不到eval()中创建的任何变量或函数,因此前面两个例子都会导致错误。
//同样,在严格模式下,为eval 赋值也会导致错误:
"use strict";
eval = "hi"; //causes error

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

属性说明属性说明
undefined特殊值undefinedDate构造函数Date
NaN特殊值NaNRegExp构造函数RegExp
Infinity特殊值InfinityError构造函数Error
Object构造函数ObjectEvalError构造函数EvalError
Array构造函数ArrayRangeError构造函数RangeError
Function构造函数FunctionReferenceError构造函数ReferenceError
Boolean构造函数BooleanSyntaxError构造函数SyntaxError
String构造函数StringTypeError构造函数TypeError
Number构造函数NumberURIError构造函数URIError

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

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

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

//这里定义了一个名为color 的全局变量和一个名为sayColor()的全局函数。在sayColor()内部,
//通过window.color 来访问color 变量,以说明全局变量是window 对象的属性。
//然后,又使用window.sayColor()来直接通过window 对象调用这个函数,结果显示在了警告框中。
另一种取得Global 对象的方法是使用以下代码:
var global = function(){
    return this;
}();
//以上代码创建了一个立即调用的函数表达式,返回this 的值。
//如前所述,在没有给函数明确指定this 值的情况下
//(无论是通过将函数添加为对象的方法,还是通过调用call()或apply()),this值等于Global 对象。
//而像这样通过简单地返回this 来取得Global 对象,在任何执行环境下都是可行的
  • Math对象:ECMAScript 还为保存数学公式和信息提供了一个公共位置,即Math 对象。与我们在JavaScript 直接编写的计算功能相比,Math 对象提供的计算功能执行起来要快得多。Math 对象中还提供了辅助完成这些计算的属性和方法。

1. Math 对象的属性

属性说明
Math.E自然对数的底数,即常量e的值
Math.LN1010的自然对数
Math.LN22的自然对数
Math.LOG2E以2为底e的对数
Math.LOG10E以10为底e的对数
Math.PIπ的值
Math.SQRT1_21/2的平方根(即2的平方根的倒数)
Math.SQRT22的平方根

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

var max = Math.max(3, 54, 32, 16);
alert(max); //54
var min = Math.min(3, 54, 32, 16);
alert(min); //3
//对于3、54、32 和16,Math.max()返回54,而Math.min()返回3。
//这两个方法经常用于避免多余的循环和在if 语句中确定一组数的最大值。

//要找到数组中的最大或最小值,可以像下面这样使用apply()方法。
var values = [1, 2, 3, 4, 5, 6, 7, 8];
var max = Math.max.apply(Math, values);
//这个技巧的关键是把Math 对象作为apply()的第一个参数,从而正确地设置this 值。
//然后,可以将任何数组作为第二个参数。

3. 舍入方法

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

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

Math.round():执行标准舍入,即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)。

alert(Math.ceil(25.9)); //26
alert(Math.ceil(25.5)); //26
alert(Math.ceil(25.1)); //26
alert(Math.round(25.9)); //26
alert(Math.round(25.5)); //26
alert(Math.round(25.4)); //25
alert(Math.round(25.1)); //25
alert(Math.floor(25.9)); //25
alert(Math.floor(25.5)); //25
alert(Math.floor(25.1)); //25

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

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

//公式中用到了Math.floor()方法,这是因为Math.random()总返回一个小数值。
//而用这个小数值乘以一个整数,然后再加上一个整数,最终结果仍然还是一个小数。
//举例来说,如果你想选择一个1到10 之间的数值,可以像下面这样编写代码:

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

//总共有10 个可能的值(1 到10),而第一个可能的值是1。
//而如果想要选择一个介于2 到10 之间的值,就应该将上面的代码改成这样:
var num = Math.floor(Math.random() * 9 + 2);

//从2 数到10 要数9 个数,因此可能值的总数就是9,而第一个可能的值就是2。
//多数情况下,其实都可以通过一个函数来计算可能值的总数和第一个可能的值,例如:
function selectFrom(lowerValue, upperValue) {
    var choices = upperValue - lowerValue + 1;
    return Math.floor(Math.random() * choices + lowerValue);
}
var num = selectFrom(2, 10);
alert(num);                // 介于 2 和10 之间(包括 2 和 10)的一个数值

//函数selectFrom()接受两个参数:应该返回的最小值和最大值。
//而用最大值减最小值再加1 得到了可能值的总数,然后它又把这些数值套用到了前面的公式中。
//这样,通过调用selectFrom(2,10)就可以得到一个介于2 和10 之间(包括2 和10)的数值了。
//利用这个函数,可以方便地从数组中随机取出一项,例如:
var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"];
var color = colors[selectFrom(0, colors.length-1)];
aler t(color); // 可能是数组中包含的任何一个字符串

//在这个例子中,传递给selectFrom()的第二个参数是数组的长度减1,也就是数组中最后一项的位置。

5. 其他方法

方法说明方法说明
Math.abs(num)返回num的绝对值Math.asin(x)返回x的反正弦值
Math.exp(num)返回Math.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的正切值

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值