javascript高级程序设计知识整理（2）

一、基本类型和引用类型基础知识点

1.基本类型和引用类型的值

5中基本数据类型（number,string,boolean,null,undefined）：按值访问

引用类型：引用类型的值是保存在内存中的对象

(1)当，复制保存着对象的某个变量时，操作的是对象的引用

(2)当，为对象添加属性时，操作的是实际的对象

*我们可以给引用类型的值动态的添加属性，基本类型不可以（赋予基本类型添加属性的语句不会出错，但访问这个属性时，会发现是undefined）

2.关于参数传递的说明

基本类型和引用类型的参数都是按值传递的

3.类型检测

用instanceof检测引用类型的值（所谓引用类型的值，可以理解为是某个引用类型的一个实例，也就是一个对象）

例如：

alert(person instanceof Object);//所有引用类型的值都是Object的实例，这里始终会返回true

alert(colors instanceof Array);

alert(pattern instanceof RegExp);

二、引用类型详解

1.Object类型

创建Object实例：

（1）var person=new Object();

person.name="Nicholas";

person.age=29;

（2）使用对象字面量表示法

var person={

name:"Nicholas",

age:29

};

或属性名可以用字符串

var person={

"name":"Nicholas",

"age":29,

5:true  //这里的数值属性名会自动转换为字符串

};

或留空对象的花括号，可以定义只包含默认属性和方法的对象

var person={}; //与new Object()相同

person.name="Nicholas";

person.age=29;

2.Array类型

检测数组的方法：Array.isArray(value);

转换方法：

var colors=["red","blue","green"];

alert(colors); //red,blue,green 说明：这里会默认调用每一个数组项的toString()方法

Array类型的一些方法：

（1）join()方法：

指定数组toString()后分隔符样式的方法

例如：alert(colors.join("||")); //red||blue||green

（2）push()、pop()方法：

在数组末端添加或删除--二者都属于栈方法，数组末端相当于栈顶

push()方法可以传递参数，即，传递要添加到数组中的元素

例如：

colors.push("black","yellow");

（3）shift()方法：

删除数组的第一项--shift()+push()可以实现队列（先进先出）

unshift()方法：

在数组前端添加--和push()的区别只是添加的方向不同，一个在队首添加，一个在队尾添加

unshift()和push()一样，也可以传递参数

unshift()+pop()可以模拟反向队列（即：首部进，尾部出）

（4）reverse()方法：反转数组项的顺序

即：

var values=[1,2,3,4,5];

values.reverse();

alert(values); //5,4,3,2,1

（5）sort()方法：默认升序排列

原理：sort()方法会调用每个数组项的toString()方法，然后比较得到的字符串。

注意：因为sort()方法默认比较的是字符串，因此，它的升序是根据ASSIC字符编码的大小升序排列。

例如：

var values=[0,1,5,10,15];

values.sort();

alert(values); //0,1,10,15,5 注意：这就是按照字符串比较的结果

改进：

sort()方法可以接收一个比较函数作为参数，这样，我们可以根据自己的规定，对数组项进行排序

比较函数接收两个参数a、b，如果我们希望，排序后a位于b之前，则让比较函数返回一个负数，如果希望排序后a位于b之后，则让比较函数返回一个正数。如果两个参数相等，则返回0。

例如：

<span style="font-family:KaiTi_GB2312;font-size:14px;"><span style="font-family:KaiTi_GB2312;font-size:14px;">function compare(value1,value2){ //实现升序排列（降序同理）    if(value1<value2){        return -1;    }else if(value1>value2){        return 1;    }else{        return 0;    }}</span></span>

这个比较函数可以适用于大多数数据类型

调用举例：

<span style="font-family:KaiTi_GB2312;font-size:14px;"><span style="font-family:KaiTi_GB2312;font-size:14px;">var values=[0,1,5,10,15];values.sort(compare);alert(values); //0,1,5,10,15</span></span>

优化（常用）：

对于数值类型，或者其valueOf()方法会返回数值类型的对象类型，可以用如下优化的方法实现排序：

<span style="font-family:KaiTi_GB2312;font-size:14px;"><pre name="code" class="javascript"><span style="font-family:KaiTi_GB2312;font-size:14px;">function compare(value1,value2){//优化的比较函数    return value1-value2; //升序（降序返回value2-value1）}</span></span>

(6)concat()方法：

复制当前数组的一个副本，并向其中添加数组项

例如：

var colors=["red","blue","green"];

var colors2=colors.concat("yellow",["black","brown"]);

alert(colors); //red,blue,green 注意：原数组不变

alert(colors2); //red,blue,green,yellow,black,brown

（7）slice()方法：

复制当前数组的某些项，并存到一个新的数组中

两个参数：截取的开始位置、截取的结束位置（截取规则，左闭右开。若不传结束位置，截到数组末尾）

例如：

var colors=["red","blue","green","yellow"];

var colors2=colors.slice(1,3);

alert(colors2); //blue,green

特殊情况：

当传入的参数中有负数：用数组长度加上这个负数，得到正确的参数。例如：假设数组长度为5，slice(-2,-1)与slice(3,4)结果相同。

如果传入的结束位置小于开始位置：返回空数组

（8）splice()方法：

作用：删除，插入，替换数组元素。

可以传入的前两个参数：要删除的第一项的位置、要删除的项数

splice(0,2); //删除数组前两项

splice(2,0,"red","green"); //从当前数组的位置2开始插入两项

splice(2,1,"red","green"); //删除当前数组的第二项，然后从位置2开始插入新的两项

注意：

splice()方法返回的是一个数组，该数组中的元素，是通过splice()方法从原数组中删除的那些元素

（9）indexOf()、lastIndexOf()方法：

作用：查找指定元素在数组中的位置（indexOf()从前往后找，lastIndexOf()从后往前找）

例如：

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

（10）迭代方法

对数组中的每一项运行指定函数：

every()：如果该函数的每一项都返回true，则返回true

some()：只要有一项返回true，就返回true

filter()：返回该函数会返回true的项组成的数组

map()：返回每次函数调用的结果组成的数组

forEach()：这个方法没有返回值

以上5个方法都接收两个参数：

要在数组每一项上运行的函数、运行该函数的作用域对象（可选）

传入方法中的函数，接收三个参数：

数组项的值（item）、该项在数组中的位置（index）、数组对象本身（array）

例如：

every()和some()：

<pre name="code" class="javascript"><span style="font-family:KaiTi_GB2312;font-size:14px;">var numbers=[1,2,3,4,5,4,3,2,1];var everyResult=numbers.every(function(item,index,array){    return (item>2);});alert(everyResult); //falsevar someResult=numbers.some(function(item,index,array){    return (item>2);});alert(someResult); //true</span>

filter()：

<span style="font-family:KaiTi_GB2312;font-size:14px;">var numbers=[1,2,3,4,5,4,3,2,1];var filterResult=numbers.every(function(item,index,array){    return (item>2);});alert(filterResult); //[3,4,5,4,3]</span>

（11）归并方法

reduce()、reduceRight()

两个方法都接收两个参数：

要在数组每一项上运行的函数、作为归并基础的初始值（可选）

传入方法中的函数，接收四个参数：

前一个只、当前值、项的索引、数组对象

例如：

<span style="font-family:KaiTi_GB2312;font-size:14px;">var values=[1,2,3,4,5];var sum=values.reduce(functon(prev,cur,index,array){return prev+cur;});alert(sum); //15</span>

注：第一次迭代发生在数组的第二项上，即：第一次执行回调函数，prev=1，cur=2，第二次执行时，prev=上次调用的返回值（在本例中，就是1+2的值，即3），cur=当前数组项的值。reduceRight()的原理和reduce()相同，区别只是遍历的方向，reduceRight()从数组末尾向前遍历。

3.Date类型

（1）Date.parse()、Date.UTC()方法：

作用：返回传入日期的毫秒数（传入日期距1970年1月1日的毫秒数）

二者区别：构建日期对象时，使用不同的信息（即信息参数格式不同）

例如：

var someDate=new Date(Date.parse("May 25,2004")); //为指定的2004年5月25日创建一个日期对象

var someDate=new Date("May 25,2004"); //这个作用与上一个一样，后台会自动调用Date.parse()

如果传入的字符串不能表示日期，Date.parse()返回NaN

var y2k=new Date(Date.UTC(2000,0)); //2000年1月1日午夜0时 参数说明：2000--年份，0--月份（0-11对应1-12月）

var allFives=new Date(Date.UTC(2005,4,5,17,55,55)); //参数说明：年、月、日、时、分、秒（注意月份这里是5月）

Date.UTC传入的参数，只有年月是必须的，其他参数不传入时，日期默认1日，其他默认为0

通过调用Date.UTC()创建的日期对象，都是基于GMT创建的

var y2k=new Date(2000,0);  //作用与调用Date.UTC相同，唯一的区别是:这样创建的日期对象时基于本地时间的

var allFives=new Date(2005,4,5,17,55,55); 

（2）Date.now()方法：

作用：返回当前系统时间毫秒数

好处：可以直接用来计算时间差

例如：

var start=Date.now();

doSomething(); //调用某些函数

var stop=Date.now();

result=stop-start;

在不支持这个方法的浏览器中：var time=+new Date(); 用这种方式把Date对象转换成字符串，也可以达到相同的目的

附：日期对象可以直接比较大小，因为默认调用Date的valueOf()方法，该方法返回的不是字符串，而是日期的毫秒数

4.RegExp类型

正则表达式创建方式1（以字面量形式定义）：

var expression=/pattern/flags;

pattern：正则表达式

flags：一个或多个标志，标志可选：

g：全局模式，即模式将被应用于所有字符串，而不是在发现第一个匹配项时立即停止

i：不区分大小写模式，即匹配时不区别字母的大小写

m：多行模式，即在到达一行文末时，还会继续查找下一行中是否存在与模式匹配的项

例如：

//匹配字符串中所有"at"的实例

var pattern1=/at/g; 

//匹配第一个"bat"或"cat"，不区分大小写

var pattern2=/[bc]at/i; 

//匹配所有以"at"结尾的3个字符的组合，不区分大小写

var pattern3=/.at/gi;

注意：需要转义的元字符：

( ) [ ] { } + * / ^ = | \ : ? ! $ .

例如：

//匹配第一个"[bc]at"，不区分大小写

var pattern2=/\[bc\]at/i;

正则表达式创建方式2（使用RegExp构造函数形式定义）：

构造函数接收两个参数(都是字符串)：

要匹配的字符串形式、标志字符串（可选）

例如：

var pattern2=new RegExp("[bc]at","i");

关于元字符的转义注意：

这里，字符串里面的匹配项要双重转义。简单的记，就是，如果在var pattern2=/\[bc\]at/i;这样的字面量表示时，需要用到一个转义符 "\"，那么，在正则表达式字符串中就要用到两个"\"，即："\\"。同理，如果字面量表示时，需要两个转义符"\\"转义，那么，字符串中要用四个转义符，即："\\\\"。

两种创建方式的区别：

RegExp实例属性：

global：检测是否设置了g标志，布尔值

ignoreCase：检测是否设置了i标志，布尔值

multiline：检测是否设置了m标志，布尔值

lastIndex：开始搜索下一个匹配项的位置，整数，从0算起

source：正则表达式的字符串表示，返回的是字面量形式的字符串表示，不是传入构造函数中的字符串表示

用法举例：

var pattern2=/\[bc\]at/i;

alert(pattern2.global); //false

alert(pattern2.source); //"\[bc\]at" 注意：这里返回的只是正则表达式，不包含标志位

RegExp实例方法：

test()方法：

返回true或false，表示是否匹配成功。test()传入要检测的字符串，用指定匹配字符的正则表达式调用。（pattern.test(text);）

exec()方法：

传入：接收一个参数，即：要测试是否与正则表达式匹配的字符串

返回：返回包含第一个匹配项信息组成的数组，也就是，测试的字符串中，和正则的每个捕获组匹配的那些部分组成的数组，如果对一个捕获组，有多个匹配字段，则取第一个放入返回数组。

另：返回的数组是Array的实例，但包含两个额外的属性，index和input，index：匹配项在测试字符串中的位置，input：应用正则表达式的字符串（即测试字符串）

举例说明：

var text="mom and dad and baby";

var pattern=/mom( and dad( and baby)?)?/gi; //?的含义：匹配前一项0次或1次

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"

注：正则表达式如果未设置全局标志g，每调用一次exec()，返回的都是第一个匹配项。如果设置了g，每调用一次，返回的都是下一个匹配项，直到搜索到字符串末尾为止。

5.Function类型

函数的属性和方法：

每个函数都包含两个属性：

length：函数希望接收的命名参数的个数--即：function()括号里参数的个数

prototype：原型属性

每个函数都包含两个非继承而来的方法：

apply()、call()

作用1：传递参数

apply()接收两个参数:

在其中运行函数的作用域、参数数组（可以是Array的实例，也可以是arguments对象）

例如：

<span style="font-family:KaiTi_GB2312;font-size:14px;">function sum(num1,num2){    return num1+num2;}function callSum1(num1,num2){    return sum.apply(this,arguments); //传入arguments对象 apply()方法的含义：在当前这个方法中，调用sum()}function callSum2(num1,num2){    return sum.apply(this,[num1,num2]); //传入数组}alert(callSum1(10,10)); //20alert(callSum2(10,10)); //20</span>

call()与apply()的区别是：

调用call()时，第二个参数必须逐个列出来，不能用数组或arguments对象。即：sum.call(this,num1,num2);

作用2：扩展函数作用域

例如：

<span style="font-family:KaiTi_GB2312;font-size:14px;">window.color="red";var o={color:"blue"};function sayColor(){    alert(this.color);}sayColor(); //redsayColor.call(this); //redsayColor.call(window); //redsayColor.call(o)</span><span style="font-size:18px;">; //blue</span>

这里，有一个bind()方法，它会创建一个函数的实例，其this值会被绑定到传给bind()函数的值，例如：

<span style="font-family:KaiTi_GB2312;font-size:14px;">window.color="red";var o={color:"blue"};function sayColor(){    alert(this.color);}var objectSayColor=sayColor.bind(o);objectSayColor(); //blue</span>

6.基本包装类型

一些方法记录：

Number类型：

var num=10;

alert(num.toFixed(2)); //"10.00" 显示两位小数，注意，返回的是字符串表示

alert(num.toExponential(1)); //"1.0e+1" 返回指数表示（即科学计数法）

var num2=99;

alert(num2.toPrecision(1)); //"1e+2"一位数无法准确表示99，故向上舍入为100。该方法会自动判断，显示出表示数值的最合适格式。括号里的数字，指定数值的总位数，方法根据这个位数，选择最合适的表示法。

alert(num2.toPrecision(2)); //"99"

alert(num2.toPrecision(3)); //"99.0"

String类型：

var str="hello world!";

alert(str.charAt(1)); //返回位于位置1的字符--"e"

alert(str.charCodeAt(1)); //返回位于位置1的字符的编码--"101"（e的编码）

alert(str[1]); //"e"

trim()：去掉字符串首尾空格

match()：字符串匹配方法，var matches=text.match(pattern);pattern要么是一个正则表达式，要么是一个RegExp对象。返回一个数组。

search()：同上。但返回的是字符串中第一个匹配项的索引。如果没有匹配项，返回-1。

replace()：例如：

var text="car,bat,sat";

var result=text.replace("at","ond");

alert(result); //"cond,bat,sat"

result=text.replace(/at/g,"ond");

alert(result); //"cond,bond,sond"

localeCompare()：

作用：比较两个字符串，并返回一个数值（正、负或0）

例如：

var str="yellow";

alert(str.localeCompare("brick")); //1 因为"yellow">"brick"

alert(str.localeCompare("yellow")); //0

alert(str.localeCompare("zoo")); //-1 因为"yellow"<"zoo"

fromCharCode()：

与charCodeAt()相反的操作

例如：

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