JavaScript高级程序设计学习笔记(4)

向右看齐 2022-03-15 09:30 264阅读 0赞

# 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（）可以做到相反方向模拟队列，即从数组的左边做到先入先出。

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

重排序方法  
      数组中有两个直接用来重排序的例子：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（）函数的修正【数值排序】  
【从大到小】

【从小到大】要比较数字而非字符串，比较函数可以简单的以 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

![详细介绍][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70]  
操作方法  
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.

迭代方法

指定函数参数如下图：  
![function (item,index,array)][function _item_index_array]  
     对于上例代码，返回数组内是否有大于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（）给定函数参数【有四个参数：前一个值、当前值、项的索引和数组对象。】：  
![给定函数参数][2019030415453963.png]

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

--------------------

## 小结 ##

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

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70]: /images/20220315/538aa19cbf084d3ab2d95c0267c89575.png
[function _item_index_array]: /images/20220315/2002ad3529a249fd82b968fa66a5109a.png
[2019030415453963.png]: /images/20220315/f4b0a5bc05364e469eec1ef59db5bb13.png