JavaScript高级程序设计学习笔记

1.对JavaScript实现各个组成部分的详尽解读
2.对JavaScript面向对象编程的全方位阐述
3.DOM，BOM及浏览器事件模型的透彻剖析
4.Web应用基本数据格式JSON，XML及存取
5.Ajax，Comet服务器端通信和基于File API的拖放式文件上传
6.ECMAScript 5定义的最核心语言特性
7.HTML 5涵盖的表单，媒体，Canvas（包括WebGL）
8.Selectors、Web Workers、地理定位及跨文档传递消息等最新API
9.离线应用及客户端存储（包括IndexedDB）
10.维护、性能、部署相关的最佳开发实践
11.新兴API及ECMAScript Harmony展望

对JavaScript实现各个组成部分的详尽解读

引用类型(i`m important)

1.Object类型

创建Object实例的方式有两种。
1）new 操作符后面跟Object构造函数

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

2）对象字面量表示法

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

     注意：对象字面量表示法最后一个属性不加逗号；属性名会自动保存为字符串。一般建议使用对象字面量表示法。
访问对象属性使用方法：
     1）

alert(person.name);

【一般使用点表示法】
     2）

alert(person["name"]);

【当属性名包括语法错误的字符，比方说空格，此时就必须使用方括号表示法来进行访问】

2.Array类型

数组的创建方法
     1）使用Array构造函数

var color=new Array(); var color=new Array(); var color=new Array("red","green","yellow");

• 数组项彼此间利用逗号隔开，注意不要空数据项
• 在创建数组的过程中可以省略new
• 可以在构造函数的时候加上数字，表示数组的大小，或者直接把数组包含的项表示出来

     2）使用方括号设置数组的值

var color=["red","green","yellow"];

数组的读取
     

alert(color[0]);

读取数组的时候要根据索引号来读取。

数组的增加
     

color[3]="pink"

当数组的索引大于数组的长度的时候，就是增加数组项。

• 注意：如果数组的索引项远远大于数组的长度时，新增的数组项仍在规定的位置，但是中间的数组项都是undefined

数组的删除
     

color.length=2;

这样就会将数组的长度保存为2

• length可以得到数组长度，同时可以删除数组

数组的监测
     

if（value instanceof Array）{//对数组的操作}

但是instanceof仅限于单一的全局执行环境。
     

if（Array.isArray(value)）{//对数组的操作}

isArray解决了instanceof的问题但是仅限于部分浏览器。

转换方法
     利用toString()、valueOf()和toLocateString()都可以得到数组中每个字符串形式以逗号隔开的字符串。

var color=["red","yellow","green"];
alert(color);//red,yellow,green【这里是自动调用toString()转换为字符串】
alert(color.toString);//red,yellow,green
alert(color.valueof());//red,yellow,green【利用valueOf()转换为字符串】

• 不同于其他方法，toLocalString()有时会得到和toString()一样的结果，有时不会。
• 可以利用join()方法以特定符号隔开数组项如：

  alert(color.join("||"))//red||yellow||green

• 如果数组中的某一项的值是null或者是undefined，那么该值在join(),toString(),toLocalString()和valueOf()返回的是空字符串。

栈方法
      对于ECMAScript来说，对于数组可以利用push（）和pop（）的方法对于数组进行增加和删除的操作。【栈：先入后出】

var color=new Array();
color.push("red","yellow");
alert(color);//red,yellow
newColor=color.push("pink");
alert(newColor);//3
newColor=color.pop();
alert(newColor);//pink

• 对于使用push（）对于本数组进行操作（color.push(“red”,“yellow”);），返回增加后的数组。在push（）的括号内加入添加的新的数组项。
• 对于使用push（）对于数组操作等于新的数组时（newColor=color.push(“pink”);），返回的是此时的数组长度。括号内是新添加的数组项。
• 对于pop（），等于新的数组（newColor=color.pop();），返回的是最后一个数组项。

注意什么时候返回的是长度，什么时候返回数组！！！

队列方法
      对于ECMAScript来说，对于队列可以利用push（）和shift（）的方法对于数组进行增加和删除的操作。【队列：先入先出】

var color=new Array();
color.push("red","yellow");
alert(color);//red，yellow
newColor=color.push("pink");
alert(newColor);//2
newColor=color.shift();
alert(newColor);//red

• shift（）的作用： 可以从数组前面移除数组项，并且返回移除的数组项
• 与push（）和shift（）类似，利用unshift（）和pop（）可以做到相反方向模拟队列，即从数组的左边做到先入先出。

方法	过程
push()	从数组末端加入数组项，并返回数组此时长度【可以与其他数组方法连用直接操作原数组，可得到现在所有数组项 】
unshift()	从数组前端加入新的数组项，并返回数组此时长度【可以与其他数组方法连用直接操作原数组，可得到现在所有数组项 】
pop()	移除末端数组项，并返回末端数组项值
shift()	移除数组的第一项并且返回该值

重排序方法
      数组中有两个直接用来重排序的例子：reverse（）和sort（）。
1）reverse（）【反转数组】；

var number= ["1","2","3"];
number.reverse();
alert(number);//3,2,1

     从上例中可以得知reverse（）是将数组项反转顺序。
2）sort（）【字符串排序】；

var number= [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
number.sort();
alert(number);//1,10,11,12,13,14,15,2,3,4,5,6,7,8,9

     sort（）是先调用toString（）的方法，根据字符串进行比较排列，所以会出现10在2前面这种情况。
3）对于sort（）函数的修正【数值排序】
【从大到小】

function compare(value1,value2) {
if (value1<value2){
return 1;
} else if (value1>value2){
return -1;
} else {
return 0;
}
}
var values= [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
values.sort(compare);
alert(values);//15,14,13,12,11,10,9,8,7,6,5,4,3,2,1

【从小到大】要比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数将会将数组升序排列

function compare(value1,value2) {
return value1-value2;
}
var values= [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
values.sort(compare);
alert(values);//1,2,3,4,5,6,7,8,9,10,11,12,13,14,15

操作方法
1）concat()【基于原数组创建新数组增加数组项】

var values= ["red","green","blue"];
var value1=values.concat("yellow",["red","brown"])
alert(value1);//red,green,blue,yellow,red,brown

     新数组利用concat()方法将括号内的数组值加到原数组后面形成新数组，然后输出。原数组不变。
2）slice()【基于原数组创建新数组删除数组项】

var values= ["red","green","blue"];
var value2=values.slice(1);
var value1=values.slice(1,2);
alert(value1);//green
alert(value2);//green,blue

     对于slice()如果括号内是一个参数，则表示删除原数组对应的数组项；对于slice()如果括号内是两个参数，则表示返回的起始和结束位置之间的项——不包括结束位置的项。如果参数中包含负数如slice(-3,-1)，数组长度为5，则表示slice((5-3=2),(5-1=4))与slice(2,4)表示意思相同。如果结束位置小于起始位置，则返回空数组。原数组不变。
3）splice()【对于原数组的删，增，换】

var values= ["red","green","blue"];
var value1=values.splice(0,1);
alert(value1);//red
alert(values);//green,blue
var value2=values.splice(1,0,"yellow","purple");
alert(value2);//空
alert(values);//green,yellow,purple,blue
var value3=values.splice(1,1,"orange","red");
alert(value3);//yellow
alert(values);//green,orange,red,purple,blue

• splice()删除数组项：括号内有两个参数，表示删除起始位置和项数。 返回原数组，则是删除后的原数组；返回新数组，则是删除的数组项。
• splice()增加数组项：括号内包含三个参数，起始位置，0（删除的项数），插入的项。其中插入的项数可以不止一项，可以包含多项。返回原数组，则是增加数组项后的原数组；返回新数组，则为空。
• splice()替换数组项：括号内包含三个参数，起始位置，0（删除的项数），插入的项。其中删除的项数可以不等于插入的项数。返回原数组，则是替换后的原数组；返回新数组，则是删除的数组项。

位置方法
     寻找位置方法：indexOf（）和lastIndexOf（）。两个方法都接受两个参数：要查找的项和开始寻找的起始位置（可选）。indexOf()：从数组开头（位置0）向后查找。lastIndexOf()：从数组末尾向前寻找。

var number=[1,2,3,4,5,4,3,2,1];
alert(number.indexOf(3));//2
alert(number.indexOf(3,4));//6
alert(number.lastIndexOf(3));//6
alert(number.lastIndexOf(3,4));//2

• 如果两个方法都是只有一个参数，则只要找到一个匹配的就开始输出位置。
• 对于第一个参数进行比较，必须是严格全等。
• 两个方法都是返回数组中的位置，如果没找到则返回-1.

迭代方法

var number=[1,2,3,4,5,4,3,2,1];
var everyNumber=number.every(function (item,index,array) {
return item>2;
});
alert(everyNumber);//false
var someNumber=number.some(function (item,index,array) {
return item>2;
});
alert(someNumber);//true
var filterNumber=number.filter(function (item,index,array) {
return item>2;
});
alert(filterNumber);//3,4,5,4,3
var mapNumber=number.map(function (item,index,array) {
return item*2;
});
alert(mapNumber);//2,4,6,8,10,8,6,4,2
var forEachNumber=number.forEach(function (item,index,array) {
return item*2;
});
alert(forEachNumber);//undefined
alert(number);//1,2,3,4,5,4,3,2,1

指定函数参数如下图：

     对于上例代码，返回数组内是否有大于2的项的结果。

• every（）数组内每一项运行指定函数，返回布尔值。如果函数对于每一项都返回true，则返回true。
• some（）数组内每一项运行指定函数，返回布尔值。如果函数对于其中一项返回true，则返回true
• filter（）数组内每一项运行指定函数，返回满足条件的数组项值。
• map（）数组内每一项运行指定函数，返回每次调用指定函数结果组成的数组。
• forEach（）数组内每一项运行指定函数，无返回值。

缩小方法

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

reduce（）和reduceRight（）给定函数参数【有四个参数：前一个值、当前值、项的索引和数组对象。】：

• reduce（）是从前向后将数组每一项访问一遍。对于上述例子来说：第一次执行回调函数，pre为1，cur为2。第二次，pre为3（1+2的结果），cur为3（数组第三项）。
• reduceRight（）是从后向前将数组每一项访问一遍。对于上述例子来说：第一次执行回调函数，pre为5，cur为4。第二次，pre为9（4+5的结果），cur为3（数组倒数第三项）。

小结

数组方法	作用
var color=new Array(); var color=[“red”,“blue”]	创建新数组
color[color.length()]=“orange”	添加数组项【末尾】
color.push(“orange”)	添加数组项【末尾】
color.unshift(“orange”)	添加数组项【开头】
var newColor=color.concat(“orange”)	添加数组项【末尾】
var newColor=color.splice(1,0,“orange”)	添加数组项【任意位置】
color.length=2	删除数组项【末尾】
color.pop()	删除数组项【末尾】
color.shift()	删除数组项【开头】
var newColor=color.slice(1,2);	保留数组项【开头】
var newColor=color.splice(0,2)	删除数组项【任意位置】
var newColor=color.splice(1,1,“orange”)	替换数组项【任意位置】
color.toString() color.valueOf() color.toLocalString()	数组项形成字符串，逗号隔开
color.join("！")	数组项形成字符串，任意符号隔开
var newColor=color.every(function(value，index，array)) var newColor=color.filter(function(value，index，array)) var newColor=color.forEach(function(value，index，array)) var newColor=color.map(function(value，index，array)) var newColor=color.some(function(value，index，array))	给定函数遍历数组每一项长度不变
var newColor=color.reduce(function(pre，cur，index，array)) var newColor=color.reduceRight(function(pre，cur，value，index，array))	给定函数遍历数组每一项长度缩小