JavaScript 高级程序设计(第5章引用类型）

2018-08-05 本文已影响30人 yinxmm

第5章引用类型

1. 引用类型的值(对象)是引用类型的一个实例
2. 引用类型是一种数据结构, 用于将数据和功能组织在一起。它也常被称为类,但这种称呼并不妥当。

1. object类型

(1) 创建object实例的方式：
＊ new 操作符后跟 Object 构造函数。

var person = new Object();
person.name = "Nicholas";
person.age = 29;

＊使用对象字面量表示法。

var person = {
    name : "Nicholas",
    age : 29
};

var person = {}; //与new Object()相同
 person.name = "Nicholas";
person.age = 29;

(2) 访问对象属性的方法：
＊点表示法
＊方括号法

alert(person["name"]); //"Nicholas"  点表示
alert(person.name); //"Nicholas" 方括号

括号语法的主要优点是可以通过变量来访问属性：

var propertyName = "name";
alert(person[propertyName]); //"Nicholas"

属性名中包含会导致语法错误的字符,或者属性名使用的是关键字或保留字,可以使用方括号表示法

person["first name"] = "Nicholas";

2. Array 类型

1. ECMAScript 数组的每一项可以保存任何类型的数据。
2. ECMAScript 数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。
(1) 创建数组的方式
＊ Array 构造函数

var colors = new Array();
var colors = new Array(20); //length = 20
var colors = new Array("red", "blue", "green");

＊使用数组字面量表示法

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
var names = [];// 创建一个空数组

(2) 读取和设置数组的值

var colors = ["red", "blue", "green"]; // 定义一个字符串数组
alert(colors[0]);// 显示第一项 
colors[2] = "black"; // 修改第三项
colors[3] = "brown";// 新增第四项

(3) length
＊可以从数组的末尾移除项或向数组中添加新项。

//移除项
var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组 
colors.length = 2;
alert(colors[2]); //undefined

//新增项
var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组 colors.length = 4;
alert(colors[3]); //undefined

＊ length 属性也可以方便地在数组末尾添加新项。

var colors = ["red", "blue", "green"];// 创建一个包含 3 个字符串的数组
colors[colors.length] = "black";//(在位置3)添加一种颜色 
colors[colors.length] = "brown";//(在位置4)再添加一种颜色

＊当把一个值放在超出当前数组大小的位置上时,数组就会重新计算其长度值,即长度值等于最后一项的索引加 1。

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
 colors[99] = "black"; // (在位置 99)添加一种颜色 
alert(colors.length); // 100

(4) 检测数组
＊ instanceof 操作符value instanceof Array
＊ Array.isArray()方法Array.isArray(value)
(5) 转换方法
＊返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

toLocaleString()
toString()
valueOf() valueOf()返回的还是数组

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
alert(colors.toString());// red,blue,green
alert(colors.valueOf());// red,blue,green
alert(colors);// red,blue,green

＊用 join()方法,可以使用不同的分隔符来构建字符串。

var colors = ["red", "green", "blue"];
alert(colors.join(","));       //red,green,blue alert(colors.join("||"));      //red||green||blue

(6) 栈方法
ECMAScript 为数组专门提供了 push()和 pop()方法,以便实现类似栈的行为。
＊ push（）方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
＊ pop（）方法从数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

var colors = new Array();// 创建一个数组
var count = colors.push("red", "green");  // 推入两项
alert(count); //2
count = colors.push("black");// 推入另一项 
alert(count);     //3
var item = colors.pop();// 取得最后一项
alert(item);      //"black"
alert(colors.length);   //2

(7) 队列方法
＊ shift()方法够移除数组中的第一个项并返回该项,同时将数组长度减 1。
＊ unshift()方法能在数组前端添加任意个项并返回新数组的长度。
(8) 重新排序
＊ reverse()方法会反转数组项的顺序。

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1

＊ sort()方法按升序排列数组项。

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values);     //0,1,10,15,5

sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。

比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。

function compare(value1, value2) {
if (value1 < value2) {
        return 1;
    } else if (value1 > value2) {
        return -1;
    } else {
        return 0;
    }
 }
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);    // 15,10,5,1,0

(9) 操作方法
＊ concat()方法可以基于当前数组中的所有项创建一个新数组。

先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。

没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors);     //red,green,blue
alert(colors2);    //red,green,blue,yellow,black,brown

＊ slice()方法能够基于当前数组中的一或多个项创建一个新数组。

slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。

如果 slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置。例如,在一个包含 5 项的数组上调用 slice(-2,-1)与调用 slice(3,4)得到的结果相同。如果结束位置小于起始位置,则返回空数组。

var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2);   //green,blue,yellow,purple
alert(colors3);   //green,blue,yellow

＊ splice()方法可以向数组的中部插入项。
(1) 3种参数：起始位置、要删除的项数、插入的项
(2) splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项(如果没有删除任何项,则返回一个空数组)。

删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。例如,splice(0,2)会删除数组中的前两项。

插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、0(要删除的项数) 和要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。例如, splice(2,0,"red","green")会从当前数组的位置 2 开始插入字符串"red"和"green"。

替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如, splice (2,1,"red","green")会删除当前数组位置 2 的项,然后再从位置 2 开始插入字符串 "red"和"green"。

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red,返回的数组中只包含一项

removed = colors.splice(1, 0, "yellow", "orange"); // 从位置 1 开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一个空数组

removed = colors.splice(1, 1, "red", "purple");// 插入两项,删除一项
alert(colors); // green,red,purple,orange,blue 
alert(removed); // yellow,返回的数组中只包含一项

(10) 位置方法
＊indexOf() ：从数组的开头(位置 0)开始向后查找。
＊ lastIndexOf() ：从数组的末尾开始向前查找。
1. 接受2个参数：要查找的项和查找起点位置。
2. 返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。
3.比较第一个参数使用全等操作符（＝＝＝）。

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4));        //3
alert(numbers.lastIndexOf(4)); //5
alert(numbers.indexOf(4, 4));     //5
alert(numbers.lastIndexOf(4, 4)); //3
var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person];
alert(people.indexOf(person));     //-1
alert(morePeople.indexOf(person)); //0

(10) 迭代方法

5个迭代方法：every()、filter()、forEach()、map()、some() :

接受两个参数：每一项上运行的函数和（可选）运行函数的作用域对象--影响this的值。

传入函数三个参数：数组项的值、该项在数组中的位置和数组对象本身。

＊ every():对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
    return (item > 2);
});
alert(everyResult); //false

＊ some():对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。

var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item, index, array){
    return (item > 2);
});
alert(someResult); //true

＊ filter():对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
alert(filterResult);//[3,4,5,4,3]

＊ map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
        return item * 2;
});
alert(mapResult);  //[2,4,6,8,10,8,6,4,2]

＊ forEach():对数组中的每一项运行给定函数。这个方法没有返回值。

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
//执行某些操作
});

(11) 归并方法
＊ reduce() ：从数组的第一项开始,逐个遍历到最后。
＊ reduceRight()：从数组的最后一项开始,向前遍历到第一项。

接收2个参数：每一项上调用的函数和（可选）作为归并基础的初始值。

传入函数四个参数：前一个值、当前值、项的索引和数组对象。

函数返回的任何值都会作为第一个参数自动传给下一项。

第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur; //prev 是 1,cur 是 2
});
alert(sum); //15


var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
        return prev + cur;//prev 是 5,cur 是 4
});
alert(sum); //15

3. Date 类型

Date 类型使用自 UTC(Coordinated Universal Time,国际协调时间)1970 年 1 月 1 日午夜(零时)开始经过的毫秒数来保存日期。
(1) 创建日期对象

var now = new Date();  //不带参数，新创建的对象自动获得当前日期和时间。

＊根据特定的日期和时间创建日期对象

Date.parse()
Date.UTC()

Date.parse()方法接收一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数。

var someDate = new Date(Date.parse("May 25, 2004"));
//如果直接将表示日期的字符串传递给 Date 构造函数,也会在后台调用 Date.parse()
var someDate = new Date("May 25, 2004");

Date.UTC()的参数分别是年份、基于 0 的月份(一月是 0,二月是 1,以此类推)、月中的哪一天 (1 到 31)、小时数(0 到 23)、分钟、秒以及毫秒数。如果没有提供月中的天数,则假设天数为 1。如果省略其他参数,则统统假设为 0。

//GMT时间2000年1月1日午夜时间
var k2y = new Date(Date.UTC(2000,0));
//DMT时间2005年5月5日下午5:55:55
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));


//Date 构造函数也会模仿 Date.UTC(),日期和时间都基于本地时区而非 GMT 来创建。
//本地时间2000年1月1日午夜时间
var k2y = new Date(Date.UTC(2000,0));
//本地时间2005年5月5日下午5:55:55
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));

＊Data.now()方法,返回表示调用这个方法时的日期和时间的毫秒数。

(2) 继承的方法
＊ toLocaleString() ：会按照与浏览器设置的地区相适应的格式返回日期和时间，包含 AM 或 PM,但不会包含时区信息。

＊ toString()：toString()方法则通常返回带有时区信息的日期和时间。

＊valueOf()：不返回字符串,而是返回日期的毫秒表示。

(3) 日期格式化方法

toDateString()——以特定于实现的格式显示星期几、月、日和年;
toTimeString()——以特定于实现的格式显示时、分、秒和时区; 10  toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年;
toLocaleTimeString()——以特定于实现的格式显示时、分、秒;
toUTCString()——以特定于实现的格式完整的 UTC 日期。

(4) 日期/时间组件方法

Date方法

4. RegExp类型

ECMAScript 通过 RegExp 类型来支持正则表达式。

(1) 创建正则表达式的方式：

＊ 1. 以字面量形式来定义的正则表达式
var expression = / pattern / flags ;

模式(pattern):可以是任何简单或复杂的正则表达式,可以包含字符类、限定符、分组、向前查找以及反向引用。
标志(flags):每个正则表达式都可带有一或多个标志(flags),用以标明正则表达式的行为。

正则表达式的匹配模式支持下列3 个标志：

g:表示全局(global)模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止; 6

i:表示不区分大小写(case-insensitive)模式,即在确定匹配项时忽略模式与字符串的大小写;

m:表示多行(multiline)模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模
式匹配的项。

/*
* 匹配字符串中所有"at"的实例 */
    var pattern1 = /at/g;
/*
* 匹配第一个"bat"或"cat",不区分大小写 */
    var pattern2 = /[bc]at/i;

/* 
* 匹配所有以"at"结尾的 3 个字符的组合,不区分大小写
*/
var pattern3 = /.at/gi;

模式中使用的所有元字符都必须转义。正则表达式中的元字符包括: 11 ( [ { \ ^ $ | ) ? * + .]}

/*
* 匹配第一个"bat"或"cat",不区分大小写 */
    var pattern1 = /[bc]at/i;
/*
* 匹配第一个" [bc]at",不区分大小写 */
    var pattern2 = /\[bc\]at/i;
/*
* 匹配所有以"at"结尾的 3 个字符的组合,不区分大小写 */
    var pattern3 = /.at/gi;
/*
* 匹配所有".at",不区分大小写 */
    var pattern4 = /\.at/gi;

＊ 2. 使用 RegExp 构造函数创建正则表达式

/*
* 匹配第一个"bat"或"cat",不区分大小写
*/
    var pattern1 = /[bc]at/i;
/*
* 与 pattern1 相同,只不过是使用构造函数创建的
*/
    var pattern2 = new RegExp("[bc]at", "i");

1. 传递给 RegExp 构造函数的两个参数都是字符串。
2. 由于 RegExp 构造函数的模式参数是字符串,所以在某些情况下要对字符进行双重转义。

双重转义

3. 正则表达式字面量始终会共享同一个RegExp实例,而使用构造函数创建的每一个新RegExp实例都是一个新实例。

var re = null,
        i;
    for (i=0; i < 10; i++){
        re = /cat/g;
        re.test("catastrophe");
    }
    for (i=0; i < 10; i++){
        re = new RegExp("cat", "g");
        re.test("catastrophe");
}

在第一个循环中,为/cat/创建了一个 RegExp 实例,由于实例属性不会重置,所以在循环中再次调用 test()方法会失败。这是因为第一次调用 test()找到了"cat",但第二次调用是从索引为 3 的字符(上一次匹配的末尾)开始的,所以就找不到它了。由于会测试到字符串末尾,所以下一次再调用 test()就又从开头开始了。

第二个循环使用 RegExp 构造函数在每次循环中创建正则表达式。因为每次迭代都会创建一个新的 RegExp 实例,所以每次调用 test()都会返回 true。

(2) RegExp实例属性
＊ global:布尔值,表示是否设置了 g 标志。
＊ ignoreCase:布尔值,表示是否设置了 i 标志。
＊ lastIndex:整数,表示开始搜索下一个匹配项的字符位置,从 0 算起。
＊ multiline:布尔值,表示是否设置了 m 标志。
＊ source:正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回。

var pattern2 = new RegExp("\\[bc\\]at", "i");
alert(pattern2.global);//false
alert(pattern2.ignoreCase);//true
alert(pattern2.multiline);//false
alert(pattern2.lastIndex);//0
alert(pattern2.source);//"\[bc\]at"

(3) RegExp实例方法
＊ exec()：接受一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回 null。(专门为捕获组而设计)

返回的数组虽然是 Array 的实例,但包含两个额外的属性:index 和 input。

index 表示匹配项在字符串中的位置。
input 表示应用正则表达式的字符串。

在数组中,第一项是与整个模式匹配的字符串,其他项是与模式中的捕获组匹配的字符串(如果模式中没有捕获组,则该数组只包含一项)。

var text = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;
var matches = pattern.exec(text);
alert(matches.index);//0
alert(matches.input);// "mom and dad and baby"
alert(matches[0]); // "mom and dad and baby"
alert(matches[1]); // " and dad and baby"
alert(matches[2]);// " and baby"

exec()方法,即使在模式中设置了全局标志(g),它每次也只会返回一个匹配项。在不设置全局标志的情况下,在同一个字符串上多次调用 exec()将始终返回第一个匹配项的信息。而在设置全局标志的情况下,每次调用 exec()则都会在字符串中继续查找新匹配项。

var text = "cat, bat, sat, fat";
var pattern1 = /.at/;
var matches = pattern1.exec(text);
alert(matches.index);        //0
alert(matches[0]);           //cat
alert(pattern1.lastIndex);   //0
matches = pattern1.exec(text); 
alert(matches.index); //0 
alert(matches[0]); //cat 
alert(pattern1.lastIndex); //0

var pattern2 = /.at/g;
var matches = pattern2.exec(text); 
alert(matches.index); //0 
alert(matches[0]); //cat 
alert(pattern2.lastIndex); //3
matches = pattern2.exec(text);
alert(matches.index);        //5
alert(matches[0]);           //bat
alert(pattern2.lastIndex);   //8

＊ test() :接受一个字符串参数。在模式与该参数匹配的情况下返回 true;否则,返回 false。

＊ toLocaleString()和 toString()：都会返回正则表达式的字面量,与创建正则表达式的方式无关。

(4) RegExp构造函数属性

RegExp构造函数的属性

var text = "this has been a short summer";
var pattern = /(.)hort/g;
if (pattern.test(text)){
    alert(RegExp.input);// this has been a short summer
    alert(RegExp.leftContext);// this has been a
    alert(RegExp.rightContext);// summer
    alert(RegExp.lastMatch);// short
    alert(RegExp.lastParen);// s
    alert(RegExp.multiline);// false
}

5. Function类型

1. 每个函数都是 Function 类型的实例,而且都与其他引用类型一样具有属性和方法。
2. 由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。
(1) 函数的定义
＊使用函数声明定义

function sum (num1, num2) {
        return num1 + num2;
}

＊用函数表达式定义

 var sum = function(num1, num2){
        return num1 + num2;
};

＊使用 Function 构造函数
Function 构造函数可以接收任意数量的参数, 但最后一个参数始终都被看成是函数体,而前面的参数则枚举出了新函数的参数。

var sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐

(2)没有重载
(3)函数声明与函数表达式
＊函数声明：解析器会率先读取函数声明,并使其在执行 9 任何代码之前可用(可以访问)。

//正确
alert(sum(10,10));
function sum(num1, num2){
    return num1 + num2;
}

＊函数表达式：必须等到解析器执行到它所在的代码行,才会真正被解释执行。

//错误
alert(sum(10,10));
var sum = function(num1, num2){
    return num1 + num2;
};

(4) 作为值的函数
因为 ECMAScript 中的函数名本身就是变量,所以函数也可以作为值来使用。
＊可以像传递参数一样把一个函数传递给另一个函数。
访问函数的指针而不执行函数的话,必须去掉函数名后面的那对圆括号。

function callSomeFunction(someFunction, someArgument){
        return someFunction(someArgument);
}
function add10(num){
        return num + 10;
}
var result1 = callSomeFunction(add10, 10);
alert(result1);   //20

＊可以将一个函数作为另一个函数的结果返回。

function createComparisonFunction(propertyName) {
        return function(object1, object2){
            var value1 = object1[propertyName];
            var value2 = object2[propertyName];
            if (value1 < value2){
                return -1;
            } else if (value1 > value2){
                return 1;
            } else {
                return 0;
            }
        };
}

data.sort(createComparisonFunction("name")); 8
var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}];
alert(data[0].name);  //Nicholas
data.sort(createComparisonFunction("age"));
alert(data[0].name);  //Zachary

(4) 函数内部属性
两个特殊对象：
＊ arguments ：类数组对象，主要用途是保存函数参数。这个对象有一个callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数。

消除阶乘函数紧密耦合的现象

 function factorial(num){
        if (num <=1) {
            return 1;
        } else {
            return num * factorial(num-1)
        }
}

function factorial(num){
    if (num <=1) {
        return 1;
    } else {
        return num * arguments.callee(num-1)
    } 
}
var trueFactorial = factorial;
factorial = function(){
        return 0;
};
alert(trueFactorial(5));     //120
alert(factorial(5));         //0

＊ this :this 引用的是函数据以执行的环境对象。（当在网页的全局作用域中调用函数时, this 对象引用的就是 window）

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

caller属性

function outer(){
    inner();
}

function inner(){ 
 alert(inner.caller);
} 
outer();//显示 outer()函数的源代码

(5) 函数的属性和方法
＊属性：

length属性:表示函数希望接收的命名参数的个数。
prototype属性:对于 ECMAScript 中的引用类型而言,prototype 是保存它们所有实例方法的真正所在。

＊方法
每个函数都包含以下2个非继承而来的方法。

apply()：

接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是 Array 的实例,也可以是 arguments 对象。

function sum(num1, num2){
    return num1 + num2;
}
function callSum1(num1, num2){
    return sum.apply(this, arguments);//this->因为是在全局作用域中调用的,所以传入的就是 window 对象
}
function callSum2(num1, num2){
    return sum.apply(this, [num1, num2]);
}
alert(callSum1(10,10));   //20
alert(callSum2(10,10));   //20

call() :

第一个是在其中运行函数的作用域,其余参数都直接传递给函数。换句话说,在使用 call()方法时,传递给函数的参数必须逐个列举出来。

function sum(num1, num2){
    return num1 + num2;
}
function callSum(num1, num2){
    return sum.call(this, num1, num2);
}
alert(callSum(10,10));   //20

apply()和 call()能够扩充函数赖以运行的作用域。

window.color = "red";
var o = { color: "blue" };
function sayColor(){
    alert(this.color);
}
sayColor();//red
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue

bind():

this 值会被绑定到传给bind()函数的值。

window.color = "red";
var o = { color: "blue" };
function sayColor(){
    alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor();    //blue
/*sayColor()调用 bind()并传入对象 o,创建了 objectSayColor()函数。
object- SayColor()函数的 this 值等于 o,因此即使是在全局作用域中调用
这个函数,也会看到"blue"*/

6. 基本包装类型

1. 引用类型与基本包装类型的主要区别就是对象的生存期。

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

var s1 = "some text";
s1.color = "red";
alert(s1.color);   //undefined

2. Object 构造函数根据传入值的类型返回相应基本包装类型的实例。

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

3. 基本包装类型的实例调用 typeof 会返回"object",而且所有基本包装类型的对象都会被转换为布尔值 true。

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

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

(1) Boolean类型

创建 Boolean 对象
var booleanObject = new Boolean(true);

Boolean 类型的实例重写了 valueOf()方法,返回基本类型值 true 或 false;重写了 toString() 方法,返回字符串"true"和"false"。

布尔表达式中的所有对象都会被转换为 true

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

(2) Number类型
＊创建Number对象
var numberObject = new Number(10);

valueOf()方法返回对象表示的基本类型的数值,oLocaleString()和 toString()返回字符串形式的数值。

＊ toFixed()方法会按照指定的小数位返回数值的字符串表示。

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

＊ toExponential()返回以指数表示法(也称 e 表示法) 表示的数值的字符串形式。接收一个参数,该参数指定输出结果中的小数位数。

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

＊ toPrecision()方法表示某个数值的最合适的格式，能会返回固定大小(fixed)格式,也可能返回指数 (exponential)格式;这个方法接收一个参数,即表示数值的所有数字的
位数(不包括指数部分)

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

(3) String 类型

valueOf()、toLocaleString()和 toString()方法,都返回对象所表示的基本字符串值。

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

＊字符方法

charAt()方法以单字符字符串的形式返回给定位置的那个字符。

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

charCodeAt()方法返回给定位置的那个字符编码。

var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //输出"101" => e

ECMAScript 5 定义 使用方括号加数字索引来访问字符串中的特定字符。

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

＊字符串操作方法

concat()方法

用于将一或多个字符串拼接起来, 7 返回拼接得到的新字符串。可以接受任意多个参数。

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

slice()方法

返回被操作字符串的一个子字符串，第一个参数指定子字符串的开始位置，第二个参数指定的是子字符串最后一个字符后面的位。

参数是负值的情况下,slice()方法会将传入的负值与字符串的长度相加。

substr()方法

1.返回被操作字符串的一个子字符串，第一个参数指定子字符串的开始位置，第二个参数指定的则是返回的字符个数。
2.参数是负值的情况，substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为 0。

substring()方法

1.返回被操作字符串的一个子字符串，第一个参数指定子字符串的开始位置，第二个参数指定的是子字符串最后一个字符后面的位置。
2.参数是负值的情况,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"   
/*substring()方法会将较小的数作为开始位置,将较大的数作为结束位置, 
因此最终相当于调用了 substring(0,3)。*/
alert(stringValue.substr(3, -4));//""(空字符串)

＊字符串位置方法

从一个字符串中搜索给定的子字符串,然后返子字符串的位置(如果没有找到该子字符串,则返回-1)。第二个参数,表示从字符串中的哪个位置开始搜索。

indexof() :从字符串的开头向后搜索子字符串。
lastIndexof() :从字符串的末尾向前搜索子字符串。

＊ trim()方法

删除前置及后缀的所有空格,然后返回结果。

＊字符串大小写转换方法

toLowerCase()和 toUpperCase()方法
toLocaleLowerCase()和 toLocaleUpperCase()方法（针对特定地区）

＊字符串的模式匹配方法

match()方法

接受一个参数,要么是一个正则表达式,要么是一个 RegExp 对象。本质上与调用 RegExp 的 exec()方法相同。

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

search()方法

返回字符串中第一个匹配项的索引;如果没有找到匹配项,则返回-1。从字符串开头向后查找模式。

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

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"

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

特殊字符序列

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

第二个参数也可以是一个函数。

在只有一个匹配项(即与模式匹配的字符串)的情况下,会向这个函数传递 3 个参数:模式的匹配项、模式匹配项在字符串中的位置和原始字符串。

在正则表达式中定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项......,但最后两个参数仍然分别是模式的匹配项在字符串中的位置和原始字符串。

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;

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

＊ localeCompare()方法

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

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

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

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

＊fromCharCode()方法

接收一或多个字符编码,然后将它们转换成一个字符串。

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

＊ HTML 方法

HTML方法

7.单体内置对象

内置对象的定义是:“由 ECMAScript 实现提供的、不依赖于宿主环境的对象,这些对象在 ECMAScript 程序执行之前就已经存在了。”
(1) Global对象
全局作用域中定义的属性和函数,都是 Global 对象的属性。

＊URI 编码方法

这两个 URI 编码方法就可以对 URI 进行编码,它们用特殊的 UTF-8 编码替换所有无效的字符, 从而让浏览器能够接受和理解。

encodeURI() 方法 主要用于整个 URI(例如,http://www.wrox.com/illegal value.htm)进行编码。
encodeURIComponent()方法 要用于对 URI 中的某一段(例如前面 URI 中的 illegal value.htm)进行编码。

区别：
1.encodeURI()不会对本身属于 URI 的特殊字符进行编码,例如冒号、正斜杠、问号和井字号;

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));

decodeURI() 方法 decodeURI()只能对使用 encodeURI()替换的字符进行解码。
decodeURIComponent() 方法 decodeURIComponent()能够解码使用 encodeURIComponent()编码的所有字符,即它可以解码任何特殊字符的编码。

var uri = "http%3A%2F%2Fwww.wrox.com%2F
           illegal%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));

＊ eval()方法

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

当解析器发现代码中调用 eval()方法时,它会将传入的参数当作实际的 ECMAScript 语句来解析, 然后把执行结果插入到原位置。`

通过 eval()执行的代码被认为是包含该次调用的执行环境的一部分, 因此被执行的代码具有与该执行环境相同的作用域链。这意味着通过 eval()执行的代码可以引用在包含环境中定义的变量。`

var msg = "hello world";
eval("alert(msg)");    //"hello world"

eval("function sayHi() { alert('hi'); }");
sayHi();

严格模式下,在外部访问不到 eval()中创建的任何变量或函数。

＊Global 对象的属性

Global对象属性

＊ window 对象

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

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

* 取得 Global 对象的方法:

 var global = function(){
        return this;
}();

(2) Math对象
＊ Math 对象的属性

Math属性

＊ min()和 max()方法

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

数组中的最大最小值

var values = [1,2,3,4,5,6]
var max = Math.max.apply(Math, values);

＊舍入方法

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

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

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

＊ random()方法

Math.random()方法返回大于等于 0 小于 1 的一个随机数。

利用 Math.random() 从某个整数范围内随机选择一个值。
值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)

//选择一个 1 到 10 之间的数值
var num = Math.floor(Math.random() * 10 + 1);

// 2到 10 之间的值
var num = Math.floor(Math.random() * 9 + 2);
//2 数到 10 要数 9 个数,因此可能值的总数就是 9,而第一个可能的值就是 2

* 函数封装

//受两个参数:应该返回的最小值和最大值
 function selectFrom(lowerValue, upperValue) {
      //用最大值减最小值再加 1 得到 了可能值的总数
        var choices = upperValue - lowerValue + 1;
        return Math.floor(Math.random() * choices + lowerValue);
    }
var num = selectFrom(2, 10);
alert(num); // 介于2和10之间(包括2和10)的一个数值

＊其他方法

Math其他方法

JavaScript 高级程序设计(第5章引用类型）

第5章引用类型

1. object类型

2. Array 类型

3. Date 类型

4. RegExp类型

5. Function类型

6. 基本包装类型

7.单体内置对象

猜你喜欢

热点阅读

JavaScript 高级程序设计(第5章 引用类型）

第5章 引用类型

1. object类型

2. Array 类型

3. Date 类型

4. RegExp类型

5. Function类型

6. 基本包装类型

7.单体内置对象

猜你喜欢

热点阅读

JavaScript 高级程序设计(第5章引用类型）

第5章引用类型