JavaScript高级程序设计笔记-引用类型

来源:互联网 发布:公共基础知识考试软件 编辑:程序博客网 时间:2024/05/02 02:07
       引用类型的值(对象)是引用类型的一个实例,引用类型是一种数据结构,用于将数据和功能组织在一起,描述的是一类对象所具有的属性和方法。
        对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数来创建的。

1.object类型

创建object实例:
1.使用new操作符后跟object构造函数
  1. var person = new Object();
  2. person.name = "Nocholas";
  3. person.age = 29;
2.使用对象字面量表示法
  1. var person = {
  2.     name : "Nicholas",
  3.     age:29
  4. };
对象字面量是向函数传递大量可选参数的首选方式
  1. function displayInfo(args){
  2.     var output = " ";
  3.     if(typeof args.name == "string"){
  4.         output += "name : " + args.name ;
  5.    }
  6.      if(typeof args.age == "number"){
  7.         output += "Age : " + args.age ;
  8.    }
  9. }
  10. displayInfo({
  11.     name : "Nicholas",
  12.      age : 29
  13. })
访问对象属性:
点表示法:person.name
方括号表示法:person["name"];    //可以通过变量来访问属性person[proertyName],属性名中包含会导致语法错误的字符、关键字或保留字也可以使用方括号表示法

2.Array类型

       ECMAScript数组的每一项可以保存任何类型的数据,数组的大小是可以动态调整的,可以随着数据的添加自动增长以容纳新增数据。
创建数组:
1.使用Array构造函数
  1. var colors = new Array();
  2. var colors = new Array(20);
  3. var colors = new Array("red","blue","green");
2.数组字面量表示法
  1. var colors = ["red","blue","green"];
  2. var names = [ ];
  3. var values = [1,2,];    //不要这样!会创建一个包含2或3项的数组
读取和设置数组的值:
  1. var color0 = ["red","blue","green"];
  2. alert(colors[0]);    //显示第一项
  3. color[2] = "black";    //修改第三项
  4. color[3] = "brown";    //新增第四项
2.1检测数组
  1. if(Array.isArray(value)){
  2.     //对数组执行操作
  3. }
支持 Array.isArray() 方法的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 10.5+和 Chrome。
2.2转换方法
       所有对象都具有toLocaleString()、toString()和valueOf()方法。
       调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
        调用valueOf()返回的还是数组;
        调用数组的 toLocaleString() 方法时,它也会创建一个数组值的以逗号分隔的字符串。
        使用join()方法,可以使用不同的分隔符构建字符串。
  1. var colors = ["red","green","blue"];
  2. alert(color.join("|"));    //red|green|blue
2.3栈方法
        数组可以表现得像栈一样,在栈的顶部插入和移除数据。
        push()方法:接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度
        pop()方法:从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。
2.4队列方法
        队列在列表的末端添加项,从列表的前端移除项。
        shift()方法:移除数组中的第一个项并返回该项,同时将数组长度-1,结合shift和push方法,可以像使用队列一样使用数组。
        unshift()方法:在数组前端添加任意个项并返回新数组的长度,结合unshift和pop方法,从相反的方向来模拟队列,即在数组的前端添加项,从数组末端移除项。
2.5重排序方法
        reverse()方法:翻转数组项的顺序;
        sort()方法:按升序排列数组项。
       sort方法调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序
  1. var values = [0, 1, 5, 10, 15];
  2. values.sort();
  3. alert(values); //0,1,10,15,5
        以上排序结果数组的顺序被修改了,sort方法可以接收一个比较函数作为参数:
  1. function compare(value1, value2) {
  2.    if (value1 < value2) {
  3.        return -1;//如果第一个参数应该位于第二个之前则返回负数,降序则返回正数
  4.    } else if (value1 > value2) {
  5.        return 1;
  6.    } else {
  7.        return 0;
  8.    }
  9. }
  10. var values = [0, 1, 5, 10, 15];
  11. values.sort(compare);
  12. alert(values); //0,1,5,10,15
2.6操作方法
        concat()方法:基于当前数组中的所有项创建一个新数组,将接收到的参数添加到这个副本的末尾。
  1. var colors = ["red", "green", "blue"];
  2. var colors2 = colors.concat("yellow", ["black", "brown"]);
  3. alert(colors); //red,green,blue
  4. alert(colors2); //red,green,blue,yellow,black,brown
        slice()方法:接收一或两个参数,即要返回项的起始和结束位置,不会影响原始数组,如果 slice() 方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置。
  1. var colors = ["red", "green", "blue", "yellow", "purple"];
  2. var colors2 = colors.slice(1);
  3. var colors3 = colors.slice(1,4);
  4. alert(colors2); //green,blue,yellow,purple
  5. alert(colors3); //green,blue,yellow
        splice()方法
       1.删除:可以删除任意数量的项,指定两个参数,要删除的第一项的位置和要删除的项数, splice(0,2) 会删除数组中的前两项。
       2.插入和替换:可以向指定位置插入任意数量的项,需要提供三个参数,起始位置、要删除的项数(可以是0即为插入)、要插入的项,splice(2,0,"red","green") 会从当前数组的位置 2 开始插入字符串 "red" 和 "green" 。
       splice方法始终都会返回一个数组,该数组中包含从原始数据中删除的项(如果没有删除任何项,则返回一个空数组)。
2.7位置方法
        indexOf()方法:从数组的开头开始向后查找;
        lastIndexOf()方法:从数组的末尾开始向前查找。
        这两个方法都接收两个参数,要查找的项和表示查找起点位置的索引(可选),返回要查找的项在数组中的位置,在没找到的情况下返回-1,要求查找的项必须严格相等。
       使用 indexOf() 和 lastIndexOf() 方法查找特定项在数组中的位置非常简单,支持它们的浏览器包括 IE9+、Firefox 2+、Safari 3+、Opera 9.5+和 Chrome。
  1. var numbers = [1,2,3,4,5,4,3,2,1];
  2. alert(numbers.indexOf(4)); //3
  3. alert(numbers.lastIndexOf(4)); //5
  4. alert(numbers.indexOf(4, 4)); //5
  5. alert(numbers.lastIndexOf(4, 4)); //3
  6. var person = { name: "Nicholas" };
  7. var people = [{ name: "Nicholas" }];
  8. var morePeople = [person];
  9. alert(people.indexOf(person)); //-1
  10. alert(morePeople.indexOf(person)); //0
2.8迭代方法
       五个迭代方法,每个方法都接收两个参数,要在每一项上运行的函数、运行该函数的作用域对象-影响this的值(可选)。传入这些方法中的函数会接收到三个参数:数组项的值、该项在数组中的位置、数组对象本身。
       every() :对数组中的每一项运行给定函数,如果该函数对每一项都返回 true ,则返回 true 。
       filter() :对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。适用于查询符合某些条件的所有数组项。
       forEach() :对数组中的每一项运行给定函数。这个方法没有返回值。
       map() :对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
       some() :对数组中的每一项运行给定函数,如果该函数对任一项返回 true ,则返回 true 。
       在这些方法中,最相似的是 every() 和 some() ,它们都用于查询数组中的项是否满足某个条件。对 every() 来说,传入的函数必须对每一项都返回 true ,这个方法才返回 true ;否则,它就返回false 。而 some() 方法则是只要传入的函数对数组中的某一项返回 true ,就会返回 true 。请看以下例子。
  1. var numbers = [1,2,3,4,5,4,3,2,1];
  2. var everyResult = numbers.every(function(item, index, array){
  3.    return (item > 2);
  4. });
  5. alert(everyResult); //false
  6. var someResult = numbers.some(function(item, index, array){
  7.    return (item > 2);
  8. });
  9. alert(someResult); //true
       这些数组方法通过执行不同的操作,可以大大方便处理数组的任务。支持这些迭代方法的浏览器有IE9+、Firefox 2+、Safari 3+、Opera 9.5+和 Chrome。
2.9归并方法
        迭代数组的所有项,然后构建一个最终返回的值,接收四个参数:前一个值、当前值、项的索引和数组对象。
        reduce()方法:从数组的第一项开始,逐个遍历到最后;
        reduceRight()方法:从数组的最后一项开始,向前遍历到第一项。
  1. var values = [1,2,3,4,5];
  2. var sum = values.reduce(function(prev, cur, index, array){
  3.    return prev + cur;
  4. });
  5. alert(sum); //15
        支持这两个归并函数的浏览器有 IE9+、Firefox 3+、Safari 4+、Opera 10.5 和 Chrome。

3.Date类型

       Date类型使用自UTC(Coodinated Universal Time,国际协调时间)1970年1月1日零时开始经过的毫秒数来保存日期,保存的日期能够精确到1970年1月1日之前或之后的285616年。
        创建日期对象:var now = new Date();自动获得当前日期和时间
        根据特定的日期和时间创建日期对象:
        Date.parse():接收一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数
       例如,要为 2004 年 5 月 25 日创建一个日期对象,可以使用下面的代码:
  1. var someDate = new Date(Date.parse("May 25, 2004"));
  2. var someDate = new Date("May 25, 2004");
        地区设置为美国的浏览器通常接受下列日期格式:
  • “月/日/年”,如 6/13/2004;
  • “英文月名 日,年”,如 January 12,2004;
  • “英文星期几 英文月名 日 年 时:分:秒 时区”,如 Tue May 25 2004 00:00:00 GMT-0700。
  • ISO 8601 扩展格式 YYYY-MM-DDTHH:mm:ss.sssZ(例如 2004-05-25T00:00:00)。只有兼容ECMAScript 5的实现支持这种格式。
       如果传入Date.parse()方法的字符串不能表示日期,则返回NaN。
        Date.UTC():返回表示日期的毫秒数,它的参数分别是年份、基于0的月份、天数、小时数、分钟、秒以及毫秒,年和月是必须的。
  1. // GMT 时间 2005 年 5 月 5 日下午 5:55:55
  2. var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));
  3. // 本地时间 2005 年 5 月 5 日下午 5:55:55var allFives = new Date(2005, 4, 5, 17, 55, 55);
         Data.now():表示调用这个方法时的日期和时间的毫秒数。
  1. //取得开始时间
  2.    var start = Date.now();
  3. //调用函数
  4.    doSomething();
  5. //取得停止时间
  6.    var stop = Date.now(),
  7.    result = stop start;
       支持 Data.now() 方法的浏览器包括 IE9+、Firefox 3+、Safari 3+、Opera 10.5 和 Chrome。在不支持它的浏览器中,使用+操作符把 Data 对象转换成字符串,也可以达到同样的目的。
  1. //取得开始时间
  2.    var start = +new Date();
  3. //调用函数
  4.    doSomething();
  5. //取得停止时间
  6.    var stop = +new Date(),
  7.    result = stop - start;
日期/时间组件方法:
getTime():返回表示日期的毫秒数;与 valueOf() 方法返回的值相同
setTime( 毫秒 ):以毫秒数设置日期,会改变整个日期
getFullYear():取得4位数的年份(如2007而非仅07)
getUTCFullYear():返回UTC日期的4位数年份
setFullYear( 年 ):设置日期的年份。传入的年份值必须是4位数字(如2007而非仅07)
setUTCFullYear( 年 ):设置UTC日期的年份。传入的年份值必须是4位数字(如2007而非仅07)
getMonth():返回日期中的月份,其中0表示一月,11表示十二月
getUTCMonth():返回UTC日期中的月份,其中0表示一月,11表示十二月
setMonth( 月 ):设置日期的月份。传入的月份值必须大于0,超过11则增加年份
setUTCMonth( 月 ):设置UTC日期的月份。传入的月份值必须大于0,超过11则增加年份
getDate():返回日期月份中的天数(1到31)
getUTCDate():返回UTC日期月份中的天数(1到31)
setDate( 日 ):设置日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份
setUTCDate( 日 ):设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份
getDay():返回日期中星期的星期几(其中0表示星期日,6表示星期六)
getUTCDay():返回UTC日期中星期的星期几(其中0表示星期日,6表示星期六)
getHours():返回日期中的小时数(0到23)
getUTCHours():返回UTC日期中的小时数(0到23)
setHours( 时 ):设置日期中的小时数。传入的值超过了23则增加月份中的天数
setUTCHours( 时 ):设置UTC日期中的小时数。传入的值超过了23则增加月份中的天数
getMinutes():返回日期中的分钟数(0到59)
getUTCMinutes():返回UTC日期中的分钟数(0到59)
setMinutes( 分 ):设置日期中的分钟数。传入的值超过59则增加小时数
setUTCMinutes( 分 ):设置UTC日期中的分钟数。传入的值超过59则增加小时数
getSeconds():返回日期中的秒数(0到59)
getUTCSeconds():返回UTC日期中的秒数(0到59)
setSeconds( 秒 ):设置日期中的秒数。传入的值超过了59会增加分钟数
setUTCSeconds( 秒 ):设置UTC日期中的秒数。传入的值超过了59会增加分钟数
getMilliseconds():返回日期中的毫秒数
getUTCMilliseconds():返回UTC日期中的毫秒数
setMilliseconds( 毫秒 ):设置日期中的毫秒数
setUTCMilliseconds( 毫秒 ):设置UTC日期中的毫秒数
getTimezoneOffset():返回本地时间与UTC时间相差的分钟数。例如,美国东部标准时间返回300。在某地进入夏令时的情况下,这个值会有所变化

4.RegExp类型

创建正则表达式:var expression = / pattern / flags;
flags:g表示全局模式,模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止
            i表示不区分大小写模式
            m表示多行模式,即在达到一行文本末尾时还有继续查找下一行中是否存在与模式匹配的项
字面量定义:
  1. //匹配字符串中所有"at"的实例
  2.    var pattern1 = /at/g;
  3. //匹配第一个"bat"或"cat",不区分大小写
  4.    var pattern2 = /[bc]at/i;
  5. //匹配所有以"at"结尾的 3 个字符的组合,不区分大小写
  6.    var pattern3 = /.at/gi;
  7. //匹配所有".at",不区分大小写,需要转义   var pattern4 = /\.at/gi;
使用构造函数定义:它接收两个参数:一个是要匹配的字符串模式,另一个是可选的标志字符串。
  1. var pattern2 = new RegExp("[bc]at", "i");
字面量模式等价的字符串/\[bc\]at/
/\.at/ 
/name\/age/
/\d.\d{1,2}/
/\w\\hello\\123/"\\[bc\\]at"
"\\.at"
"name\\/age"
"\\d.\\d{1,2}"
"\\w\\\\hello\\\\123"
       字面量始终会共享同一个 RegExp 实例,而使用构造函数创建的每一个新 RegExp 实例都是一个新实例。
4.1RegExp实例属性
RegExp 的每个实例都具有下列属性,通过这些属性可以取得有关模式的各种信息。
  • global :布尔值,表示是否设置了 g 标志。
  • ignoreCase :布尔值,表示是否设置了 i 标志。
  • lastIndex :整数,表示开始搜索下一个匹配项的字符位置,从 0 算起。
  • multiline :布尔值,表示是否设置了 m 标志。
  • source :正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回。
  1. var pattern1 = /\[bc\]at/i;
  2. alert(pattern1.global); //false
  3. alert(pattern1.ignoreCase); //true
  4. alert(pattern1.multiline); //false
  5. alert(pattern1.lastIndex); //0
  6. alert(pattern1.source); //"\[bc\]at"
  7. var pattern2 = new RegExp("\\[bc\\]at", "i");
  8. alert(pattern2.global); //false
  9. alert(pattern2.ignoreCase); //true
  10. alert(pattern2.multiline); //false
  11. alert(pattern2.lastIndex); //0
  12. alert(pattern2.source); //"\[bc\]at"
4.2RegExp实例方法
       RegExp 对象的主要方法是 exec() ,该方法是专门为捕获组而设计的。 exec() 接受一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回 null 。返回的数组虽然是 Array 的实例,但包含两个额外的属性: index 和 input 。其中, index 表示匹配项在字符串中的位置,而 input 表示应用正则表达式的字符串。
  1. var pattern2 = /.at/g;
  2. var matches = pattern2.exec(text);
  3. alert(matches.index); //0
  4. alert(matches[0]); //cat
  5. alert(pattern2.lastIndex); //3
  6. matches = pattern2.exec(text);
  7. alert(matches.index); //5
  8. alert(matches[0]); //bat
  9. alert(pattern2.lastIndex); //8
       正则表达式的第二个方法是 test() ,它接受一个字符串参数。在模式与该参数匹配的情况下返回
true ;否则,返回 false 。在只想知道目标字符串与某个模式是否匹配,但不需要知道其文本内容的
情况下,使用这个方法非常方便。因此, test() 方法经常被用在 if 语句中,如下面的例子所示。
  1. var text = "000-00-0000";
  2. var pattern = /\d{3}-\d{2}-\d{4}/;
  3. if (pattern.test(text)){
  4.    alert("The pattern was matched.");
  5. }
正则表达式基本语法:

两个特殊的符号'^'和'$'。他们的作用是分别指出一个字符串的开始和结束。例子如下:

  • "^The":表示所有以"The"开始的字符串("There","The cat"等);
  • "of despair$":表示所以以"of despair"结尾的字符串;
  • "^abc$":表示开始和结尾都是"abc"的字符串——呵呵,只有"abc"自己了;
  • "notice":表示任何包含"notice"的字符串。

其它还有'*','+'和'?'这三个符号,表示一个或一序列字符重复出现的次数。它们分别表示“没有或
更多”,“一次或更多”还有“没有或一次”
。下面是几个例子:

"ab*":表示一个字符串有一个a后面跟着零个或若干个b。("a", "ab", "abbb",……);
"ab+":表示一个字符串有一个a后面跟着至少一个b或者更多;
"ab?":表示一个字符串有一个a后面跟着零个或者一个b;
"a?b+$":表示在字符串的末尾有零个或一个a跟着一个或几个b。

你也可以使用范围,用大括号括起,用以表示重复次数的范围

"ab{2}":表示一个字符串有一个a跟着2个b("abb");
"ab{2,}":表示一个字符串有一个a跟着至少2个b;
"ab{3,5}":表示一个字符串有一个a跟着3到5个b。

请注意,你必须指定范围的下限(如:"{0,2}"而不是"{,2}")。还有,你可能注意到了,'*','+'和'?'相当于"{0,}","{1,}"和"{0,1}"。
还有一个'|',表示“或”操作

"hi|hello":表示一个字符串里有"hi"或者"hello";
"(b|cd)ef":表示"bef"或"cdef";
"(a|b)*c":表示一串"a""b"混合的字符串后面跟一个"c";

'.'可以替代任何字符

"a.[0-9]":表示一个字符串有一个"a"后面跟着一个任意字符和一个数字;
"^.{3}$":表示有任意三个字符的字符串(长度为3个字符);

方括号表示某些字符允许在一个字符串中的某一特定位置出现

"[ab]":表示一个字符串有一个"a"或"b"(相当于"a¦b");
"[a-d]":表示一个字符串包含小写的'a'到'd'中的一个(相当于"a¦b¦c¦d"或者"[abcd]");
"^[a-zA-Z]":表示一个以字母开头的字符串;
"[0-9]%":表示一个百分号前有一位的数字;
",[a-zA-Z0-9]$":表示一个字符串以一个逗号后面跟着一个字母或数字结束。

你也可以在方括号里用'^'表示不希望出现的字符,'^'应在方括号里的第一位。(如:"%[^a-zA-Z]%"表示两个百分号中不应该出现字母)。

为了逐字表达,你必须在"^.$()¦*+?{\"这些字符前加上转义字符'\'

请注意在方括号中,不需要转义字符。

正则表达式验证控制文本框的输入字符类型:
1.只能输入数字和英文的:
<input onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" ID="Text1" NAME="Text1">
2.只能输入数字的:
<input onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" ID="Text2" NAME="Text2">
3.只能输入全角的:
<input onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))" ID="Text3" NAME="Text3">
4.只能输入汉字的:
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" ID="Text4" NAME="Text4">
正则表达式应用:
"^\d+$"  //非负整数(正整数 + 0)
"^[0-9]*[1-9][0-9]*$"  //正整数
"^((-\d+)|(0+))$"  //非正整数(负整数 + 0)
"^-[0-9]*[1-9][0-9]*$"  //负整数
"^-?\d+$"    //整数
"^\d+(\.\d+)?$"  //非负浮点数(正浮点数 + 0)
"^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$"  //正浮点数
"^((-\d+(\.\d+)?)|(0+(\.0+)?))$"  //非正浮点数(负浮点数 + 0)
"^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"  //负浮点数
"^(-?\d+)(\.\d+)?$"  //浮点数
"^[A-Za-z]+$"  //由26个英文字母组成的字符串
"^[A-Z]+$"  //由26个英文字母的大写组成的字符串
"^[a-z]+$"  //由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串
"^\w+$"  //由数字、26个英文字母或者下划线组成的字符串
"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"    //email地址
"^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$"  //url
/^(d{2}|d{4})-((0([1-9]{1}))|(1[1|2]))-(([0-2]([1-9]{1}))|(3[0|1]))$/   //  年-月-日
/^((0([1-9]{1}))|(1[1|2]))/(([0-2]([1-9]{1}))|(3[0|1]))/(d{2}|d{4})$/   // 月/日/年
"^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$"   //Emil
"(d+-)?(d{4}-?d{7}|d{3}-?d{8}|^d{7,8})(-d+)?"     //电话号码
"^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$"   //IP地址
^([0-9A-F]{2})(-[0-9A-F]{2}){5}$   //MAC地址的正则表达式
^[-+]?\d+(\.\d+)?$  //值类型正则表达式

5.Function类型

       函数实际上是对象。每个函数都是 Function 类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。
数声明语法:
  1. function sum (num1, num2) {
  2. return num1 + num2;
  3. }
使用函数表达式定义函数:
  1. var sum = function(num1, num2){
  2. return num1 + num2;
  3. };
使用Function构造函数:
  1. var sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐,会导致解析两次代码,第一次是解析常规ECMAScript代码,第二次是解析传入构造函数中的字符串
5.1没有重载
       函数重载是指同一个函数名可以对应着多个函数的实现。ECMAScript没有函数重载的概念。
  1. function addSomeNumber(num){
  2.    return num + 100;
  3. }
  4. function addSomeNumber(num) {
  5.    return num + 200;
  6. }
  7. var result = addSomeNumber(100); //300
       显然,这个例子中声明了两个同名函数,而结果则是后面的函数覆盖了前面的函数。
5.2函数声明与函数表达式
       解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁。解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问);至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。
函数声明提升,读取并将函数声明添加到执行环境中

      报错,函数位于一个初始化语句中,而不是一个函数声明。在执行到函数所在的语句之前,变量sum中不会保存有对函数的引用
5.3作为值的函数
       不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。
  1. function callSomeFunction(someFunction, someArgument){
  2.    return someFunction(someArgument);
  3. }
  4. function add10(num){
  5.    return num + 10;
  6. }
  7. var result1 = callSomeFunction(add10, 10);
  8. alert(result1); //20
定义一个比较函数来指明按照哪个属性来排序:
  1. function createComparisonFunction(propertyName) {
  2.    return function(object1, object2){
  3.    var value1 = object1[propertyName];
  4.    var value2 = object2[propertyName];
  5.    if (value1 < value2){
  6.        return -1;
  7.    } else if (value1 > value2){
  8.        return 1;
  9.    } else {
  10.        return 0;
  11.        }
  12.    };
  13. }
  14. var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}];
  15. data.sort(createComparisonFunction("name"));
  16. alert(data[0].name); //Nicholas
  17. data.sort(createComparisonFunction("age"));
  18. alert(data[0].name); //Zachary
5.4函数内部属性
        在函数内部有两个特殊的对象:arguments和this。
        arguments是一个类数组对象,包含着传入函数中的所有参数,虽然arguments的主要用途是保存函数参数,这个对象还有一个callee属性,它是一个指针,指向拥有这个arguments对象的函数。
  1. function factorial(num){
  2.    if (num <=1) {
  3.        return 1;
  4.    } else {
  5.    return num * arguments.callee(num-1);//消除函数的执行与函数名紧密耦合的现象,无论引用函数时使用的是什么名字,都可以保证正常完成递归调用
  6.    }
  7. }
        this引用的是函数据以执行的环境对象,或者也可以说是this值(当在网页的全局作用域中调用函数时,this对象引用的就是window)
        caller中保存着调用当前函数的函数的引用,如果是在全局作用域中调用当前函数,它的值为null
  1. function outer(){
  2.    inner();
  3. }
  4. function inner(){
  5.    alert(arguments.callee.caller);
  6. }
  7. outer();
运行结果:
 5.5函数属性和方法
        length属性:表示函数希望接收的命名参数的个数
        prototype属性:保存引用类型所有的实例方法
        apply()/call()方法:在特定的作用域内调用函数,实际上等于设置函数体内this对象的值,apply接收两个参数,一个是在其中运行函数的作用域,另一个是参数数组(可以是Array的实例,也可以是arguments对象),对于 call()方法而言,第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数。换句话说,在使用call() 方法时,传递给函数的参数必须逐个列举出来。
  1. function callSum1(num1, num2){
  2.    return sum.apply(this, arguments); // 传入 arguments 对象
  3. }
  4. function callSum2(num1, num2){
  5.    return sum.apply(this, [num1, num2]); // 传入数组
  6. }
  7. function callSum(num1, num2){
  8. return sum.call(this, num1, num2);
  9. }
        apply/call真正强大的地方是能够扩充函数赖以运行的作用域,对象不需要与方法有任何耦合关系
  1. window.color = "red";
  2. var o = { color: "blue" };
  3. function sayColor(){
  4.    alert(this.color);
  5. }
  6. sayColor(); //red
  7. sayColor.call(this); //red
  8. sayColor.call(window); //red
  9. sayColor.call(o); //blue
        bind()方法:创建一个函数的实例,其this值会被绑定到传给bind()函数的值
  1. window.color = "red";
  2. var o = { color: "blue" };
  3. function sayColor(){
  4.    alert(this.color);
  5. }
  6. var objectSayColor = sayColor.bind(o);
  7. objectSayColor(); //blue

6.基本包装类型

        每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。(基本类型值不是对象,因而从逻辑上将他们不应该有方法)
var s1 = "some text";
var s2 = s1.substring(2);
后台自动完成:创建String类型的一个实例var s1 = new String("some text");
                           -》在实例上调用指定的方法var s2 = s1.substring(2);
                           -》销毁这个实例s1 = null;
       引用类型与基本包装类型的主要区别就是对象的生存期。使用 new 操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。这意味着我们不能在运行时为基本类型值添加属性和方法。
  1. var s1 = "some text";
  2. s1.color = "red";
  3. alert(s1.color); //undefined,第二行创建的String对象在执行第三行代码时已经被销毁了,第三行代码又创建自己的String对象,而该对象没有color属性
       使用 new 调用基本包装类型的构造函数,与直接调用同名的转型函数是不一样的。
  1. var value = "25";
  2. var number = Number(value); //转型函数
  3. alert(typeof number); //"number"
  4. var obj = new Number(value); //构造函数
  5. alert(typeof obj); //"object"
6.1Boolean类型
       Boolean类型是与布尔值对应的引用类型,创建Boolean对象,可以调用Boolean构造函数并传入true或false。
       基本类型与引用类型的布尔值还有两个区别。首先, typeof 操作符对基本类型返回 "boolean" ,而对引用类型返回 "object" 。其次,由于 Boolean 对象是 Boolean 类型的实例,所以使用 instanceof操作符测试 Boolean 对象会返回 true ,而测试基本类型的布尔值则返回 false 。
6.2Number类型
       Number是数字值对应的引用类型,可以在调用Number构造函数时向其中传递相应的数值,如var numberObject = new Number(10);
       Number 类型也重写了 valueOf() 、 toLocaleString() 和 toString()方法。重写后的 valueOf() 方法返回对象表示的基本类型的数值,另外两个方法则返回字符串形式的数值。
       可以为 toString() 方法传递一个表示基数的参数,告诉它返回几进制数值的字符串形式:
  1. var num = 10;
  2. alert(num.toString()); //"10"
  3. alert(num.toString(2)); //"1010"
  4. alert(num.toString(8)); //"12"
  5. alert(num.toString(10)); //"10"
  6. alert(num.toString(16)); //"a"
       toFixed() 方法会按照指定的小数位返回数值的字符串表示
  1. var num = 10;
  2. alert(num.toFixed(2)); //"10.00"
         toExponential()方法返回以指数表示法(也称 e 表示法)表示的数值的字符串形式
  1. var num = 10;
  2. alert(num.toExponential(1)); //"1.0e+1"
         toPrecision() 方法可能会返回固定大小(fixed)格式,也可能返回指数(exponential)格式;具体规则是看哪种格式最合适。这个方法接收一个参数,即表示数值的所有数字的位数(不包括指数部分)。
  1. var num = 99;
  2. alert(num.toPrecision(1)); //"1e+2"
  3. alert(num.toPrecision(2)); //"99"
  4. alert(num.toPrecision(3)); //"99.0"
6.3String类型
1.字符方法:charAt()和charCodeAt(),这两种方法都接收一个参数,即基于0的字符位置,charAt()方法以单字符字符串的形式返回给定位置的那个字符。
  1. var stringValue = "hello world";
  2. alert(stringValue.charAt(1)); //"e"
  3. alert(stringValue.charCodeAt(1)); // 输出"101"
  4. alert(stringValue[1]); //"e"
2.字符串操作方法:
      concat()用于将一个或多个字符串拼接起来,返回拼接得到的新字符串
  1. var stringValue = "hello ";
  2. var result = stringValue.concat("world", "!");
  3. alert(result); //"hello world!"
  4. alert(stringValue); //"hello"
      slice()、substr()、substring()返回被操作字符串的一个子字符串,而且也能接收一或两个参数,第一个参数指定子字符串的开始位置,第二个参数表示子字符串到哪里结束。
       slice() 和substring() 的第二个参数指定的是子字符串最后一个字符后面的位置。
       substr() 的第二个参数指定的则是返回的字符个数。
  1. var stringValue = "hello world";
  2. alert(stringValue.slice(3)); //"lo world"
  3. alert(stringValue.substring(3)); //"lo world"
  4. alert(stringValue.substr(3)); //"lo world"
  5. alert(stringValue.slice(3, 7)); //"lo w"
  6. alert(stringValue.substring(3,7)); //"lo w"
  7. alert(stringValue.substr(3, 7)); //"lo worl"
       在传递给这些方法的参数是负值的情况下,它们的行为就不尽相同了。其中, slice() 方法会将传入的负值与字符串的长度相加, substr() 方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为 0。最后, substring() 方法会把所有负值参数都转换为 0。
  1. var stringValue = "hello world";
  2. alert(stringValue.slice(-3)); //"rld"
  3. alert(stringValue.substring(-3)); //"hello world"
  4. alert(stringValue.substr(-3)); //"rld"
  5. alert(stringValue.slice(3, -4)); //"lo w"
  6. alert(stringValue.substring(3, -4)); //"hel"
  7. alert(stringValue.substr(3, -4)); //"" (空字符串)
3.字符串位置方法:
         indexOf() 和 lastIndexOf()这两个方法都是从一个字符串中搜索给定的子字符串,然后返回子字符串的位置(如果没有找到该子字符串,则返回 -1 )。这两个方法的区别在于: indexOf() 方法从字符串的开头向后搜索子字符串,而lastIndexOf() 方法是从字符串的末尾向前搜索子字符串。
可以通过循环调用 indexOf() 或 lastIndexOf() 来找到所有匹配的子字符串
  1. var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit";
  2. var positions = new Array();
  3. var pos = stringValue.indexOf("e");
  4. while(pos > -1){
  5. positions.push(pos);
  6. pos = stringValue.indexOf("e", pos + 1);//确保每次新的搜索都从上一次找到的子字符串的后面开始,每次搜索返回的位置依次被保存在数组positions中,以便将来使用
  7. }
  8. alert(positions); //"3,24,32,35,52"
4.trim()方法:创建一个字符串的副本,删除前置及后缀的所有空格,然后返回结果
  1. var stringValue = " hello world ";
  2. var trimmedStringValue = stringValue.trim();
  3. alert(stringValue); //" hello world "
  4. alert(trimmedStringValue); //"hello world"
5.字符串大小写转换方法
 toLowerCase() 、 toLocaleLowerCase() 、 toUpperCase() 和 toLocaleUpperCase() 。
         toLocaleLowerCase() 和 toLocaleUpperCase() 方法则是针对特定地区的实现。对有些地区来说,针对地区的方法与其通用方法得到的结果相同,但少数语言(如土耳其语)会为 Unicode 大小写转换应用特殊的规则,这时候就必须使用针对地区的方法来保证实现正确的转换。
6.字符串的模式匹配方法
       match()返回一个数组
  1. var text = "cat, bat, sat, fat";
  2. var pattern = /.at/;
  3. //与 pattern.exec(text)相同
  4. var matches = text.match(pattern);
  5. alert(matches.index); //0
  6. alert(matches[0]); //"cat"
  7. alert(pattern.lastIndex); //0
        search()返回字符串中第一个匹配项的索引,如果没有找到返回-1
  1. var text = "cat, bat, sat, fat";
  2. var pos = text.search(/at/);
  3. alert(pos); //1
        replace()替换子字符串的操作,接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串,第二个参数可以是一个字符串或者一个函数。
       如果第一个参数是字符串,那么只会替换第一个子字符串。要想替换所有子字符串,唯一的办法就是提供一个正则表达式,而且要指定全局( g )标志,如下所示。
  1. var text = "cat, bat, sat, fat";
  2. var result = text.replace("at", "ond");
  3. alert(result); //"cond, bat, sat, fat"
  4. result = text.replace(/at/g, "ond");
  5. alert(result); //"cond, bond, sond, fond"
       第二个参数也可以是一个函数。在只有一个匹配项(即与模式匹配的字符串)的情况下,会向这个函数传递 3 个参数:模式的匹配项、模式匹配项在字符串中的位置和原始字符串。
  1. function htmlEscape(text){
  2.    return text.replace(/[<>"&]/g, function(match, pos, originalText){
  3.        switch(match){
  4.            case "<":
  5.                return "&lt;";
  6.            case ">":
  7.                return "&gt;";
  8.            case "&":
  9.                return "&amp;";
  10.            case "\"":
  11.                return "&quot;";
  12.    }
  13. });
  14. }
  15. alert(htmlEscape("<p class=\"greeting\">Hello world!</p>"));
  16. //&lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;
         split()可以基于指定的分隔符将一个字符串分割成多个子字符串,并将结果放在一个数组里。
  1. var colorText = "red,blue,green,yellow";
  2. var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
  3. var colors2 = colorText.split(",", 2); //["red", "blue"]
  4. var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]
7.localeCompare()方法
       比较两个字符串
  • 如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(大多数情况下是 -1 ,具体的值要视实现而定);
  • 如果字符串等于字符串参数,则返回 0 ;
  • 如果字符串在字母表中应该排在字符串参数之后,则返回一个正数(大多数情况下是 1 ,具体的值同样要视实现而定)。
  1. var stringValue = "yellow";
  2. alert(stringValue.localeCompare("brick")); //1
  3. alert(stringValue.localeCompare("yellow")); //0
  4. alert(stringValue.localeCompare("zoo")); //-1
8. fromCharCode() 方法
       这个方法的任务是接收一或多个字符编码,然后将它们转换成一个字符串。
  1. alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"
9.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.单体内置对象

7.1Global对象
       不属于任何其他对象的属性和方法,最终都是它的属性和方法,没有全局变量或全局函数;所有在全局作用域中定义的属性和函数,都是 Global 对象的属性,如 isNaN() 、 isFinite() 、 parseInt() 以及 parseFloat()
        encodeURI() 和 encodeURIComponent():对 URI(Uniform Resource Identifiers,通用资源标识符)进行编码,以便发送给浏览器,它们用特殊的 UTF-8 编码替换所有无效的字符,从而让浏览器能够接受和理解。使用 encodeURI() 编码后的结果是除了空格之外的其他字符都原封不动,只有空格被替换成了%20 。而 
  1. encodeURIComponent() 方法则会使用对应的编码替换所有非字母数字字符。
  2. var uri = "http://www.wrox.com/illegal value.htm#start";
  3. //"http://www.wrox.com/illegal%20value.htm#start"
  4. alert(encodeURI(uri));
  5. //"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"
  6. alert(encodeURIComponent(uri));
       encodeURI() 和 encodeURIComponent() 方法对应的两个方法分别是 decodeURI() 和decodeURIComponent() 
        eval()方法:它会将传入的参数当作实际的 ECMAScript 语句来解析,然后把执行结果插入到原位置。通过 eval() 执行的代码被认为是包含该次调用的执行环境的一部分,因此被执行的代码具有与该执行环境相同的作用域链。这意味着通过 eval() 执行的代码可以引用在包含环境中定义的变量
Global对象的属性:
 7.2Math对象

      min()和max()方法:确定一组数值中的最小值和最大值
       要找到数组中的最大或最小值,可以像下面这样使用 apply() 方法。
  1. var values = [1, 2, 3, 4, 5, 6, 7, 8];
  2. var max = Math.max.apply(Math, values);
       这个技巧的关键是把 Math 对象作为 apply() 的第一个参数,从而正确地设置 this 值。然后,可以将任何数组作为第二个参数。
       Math.ceil() 、 Math.floor() 和 Math.round():将小数值舍入为整数
  • Math.ceil() 执行向上舍入,即它总是将数值向上舍入为最接近的整数;
  • Math.floor() 执行向下舍入,即它总是将数值向下舍入为最接近的整数;
  • Math.round() 执行标准舍入,即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)。
       Math.random():返回大于等于 0 小于 1 的一个随机数
       值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)
       selectFrom():接受两个参数:应该返回的最小值和最大值。而用最大值减最小值再加 1 得到了可能值的总数,利用这个函数,可以方便地从数组中随机取出一项:
  1. var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"];
  2. var color = colors[selectFrom(0, colors.length-1)];
  3. alert(color); // 可能是数组中包含的任何一个字符串
       其他方法:

 8.小结

       对象在 JavaScript 中被称为引用类型的值,而且有一些内置的引用类型可以用来创建特定的对象,现简要总结如下:
       引用类型与传统面向对象程序设计中的类相似,但实现不同;
  • Object 是一个基础类型,其他所有类型都从 Object 继承了基本的行为;
  • Array 类型是一组值的有序列表,同时还提供了操作和转换这些值的功能;
  • Date 类型提供了有关日期和时间的信息,包括当前日期和时间以及相关的计算功能;
  • RegExp 类型是 ECMAScript 支持正则表达式的一个接口,提供了最基本的和一些高级的正则表达式功能。
       函数实际上是 Function 类型的实例,因此函数也是对象;而这一点正是 JavaScript 最有特色的地方。由于函数是对象,所以函数也拥有方法,可以用来增强其行为。
       因为有了基本包装类型,所以 JavaScript 中的基本类型值可以被当作对象来访问。三种基本包装类型分别是:Boolean 、 Number 和 String 。以下是它们共同的特征:
  • 每个包装类型都映射到同名的基本类型;
  • 在读取模式下访问基本类型值时,就会创建对应的基本包装类型的一个对象,从而方便了数据
  • 操作;
  • 操作基本类型值的语句一经执行完毕,就会立即销毁新创建的包装对象。
       在所有代码执行之前,作用域中就已经存在两个内置对象: Global 和 Math 。在大多数 ECMAScript实现中都不能直接访问 Global 对象;不过,Web 浏览器实现了承担该角色的 window 对象。全局变量和函数都是 Global 对象的属性。 Math 对象提供了很多属性和方法,用于辅助完成复杂的数学计算任务。
1 0
原创粉丝点击