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

小咪咪 2022-04-23 00:40 165阅读 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.一元操作符**

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

递增递减操作符  
递增递减操作符（借鉴于C）分为前置型和后置型，即：a++和++a。区别在于：

<table> 
 <tbody> 
  <tr> 
   <td>前置型</td> 
   <td>变量的值都是语句被求值以前改变的</td> 
   <td>先递加再执行语句</td> 
   <td>var num=29;<br>alter(++num);//30</td> 
  </tr> 
  <tr> 
   <td>后置型</td> 
   <td>递增递减和执行语句的优先级相同，语句从左往右执行</td> 
   <td>先执行语句再递加</td> 
   <td>var num=29;<br>alter(num++);//29</td> 
  </tr> 
 </tbody> 
</table>

Tip： 递加递减操作符对于任何操作符对于任何值都适用： 1.包含有效数字字符的字符串，先转换为数字在进行递加递减操作；若是包含无效数字字符的字符串，则变量的值为NaN 2.布尔值为true时，先转换为1在进行递加递减操作；布尔值为false时，先转换为0在进行递加递减操作 3.对于对象时，先调用valueOf()方法，得到一个可操作的值。然后对该值应用前述规则。如果结果是NaN，则在调用toString()方法后在使用这些规则。

var a1="2";
    var a2="z";
    var b1="true";
    var b2="false";
    var o={
          valueOf: function(){
                reture -1;
                }
      };
      a1++;//输出为数值3
      a2++;//输出为NaN
      b1++;//输出为数值2
      b2++;//输出为数值1
      o++;//输出为数值0

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

一元加减操作符

<table> 
 <tbody> 
  <tr> 
   <td>一元加操作符</td> 
   <td>一个加号在数值前</td> 
   <td>对数值不会产生影响，但是数据类型会转化为Number类型（见上述Tips）</td> 
  </tr> 
  <tr> 
   <td>一元减操作符</td> 
   <td>一个减号位于数值前</td> 
   <td>数值会变成负数，对于非数值同一元加操作符</td> 
  </tr> 
 </tbody> 
</table>

\*\*2.位操作符\*\*

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

ECMAscript中的所有数值以IEEE-75464位格式存储，但是位操作符并不直接操作64位的值。而是先将64位的值转化为32位的整数，然后执行操作，最后在转换为64位。  
     位操作是在数值表示的最底层执行操作，因此速度会更快。  
按位非（NOT）  
     按位非操作符由一个波浪线（~）表示，执行按位非的结果返回数值的反码。  
[原码·补码·反码相关知识][Link 1]

var num1=25;//二进制0000 0000 0000 0000 0000 0000 0001 1001
    var num2=~num1;//二进制1111 1111 1111 1111 1111 1111 1110 0110
    alert(num2);//输出-26

按位与（AND）  
     按位与由一个字符（&）表示，有两个操作数。将两个数值每一位对齐，只有两个数值的对应位都是1的时候返回1，否则都返回0.

var result= 25 && 3;//25二进制0000 0000 0000 0000 0000 0000 0001 1001
                         //3二进制0000 0000 0000 0000 0000 0000 0000 0011
    alert(result);       //1二进制0000 0000 0000 0000 0000 0000 0000 0001

按位或（OR）  
    按位或操作符由一个符号（|）表示，同样也有两个操作数。将两个数值每一位对齐，只有两个数值的对应位都是0的时候返回0，否则都返回1.

var result= 25 | 3;//25二进制0000 0000 0000 0000 0000 0000 0001 1001
                        //3二进制0000 0000 0000 0000 0000 0000 0000 0011
    alert(result);     //27二进制0000 0000 0000 0000 0000 0000 0001 1011

按位异或（XOR）  
    按位异或操作符由一个符号（^）表示，同样也有两个操作数。将两个数值每一位对齐，只有两个数值的对应位都是0或者1的时候返回0，否则都返回1.

var result= 25 ^ 3;//25二进制0000 0000 0000 0000 0000 0000 0001 1001
                        //3二进制0000 0000 0000 0000 0000 0000 0000 0011
    alert(result);     //26二进制0000 0000 0000 0000 0000 0000 0001 1010

左移  
    左移操作符由两个小于号表示（<<）.空位用0进行填充。  
有符号的右移  
    右移操作符由两个大于号表示（>>）.空位用与符号位相同的0/1进行填充。返回有符号位数据。  
无符号的右移  
    右移操作符由三个大于号表示（>>>）.空位用与符号位相同的0/1进行填充。返回正值不变化，负值按照无符号数据读出。（结果会变得非常大）  
  
  
**3.布尔操作符**

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

逻辑非  
    逻辑非由一个惊叹号（!）表示，可以用于任何值，返回布尔值。

*  操作数是一个对象，返回false；
 *  操作数是一个空字符串，返回true；`alter(!"");//返回true`
 *  操作数是一个非空字符串，返回false；`alter(!"abc")//返回false`
 *  操作数是一个数值0，返回true；`alter(!0);//返回true`
 *  操作数是一个任意非0数值，返回false；`alert(!1233);//返回false`
 *  操作数是null/NaN，返回true；`alter(!NaN);//返回true`
 *  操作数是undefined，返回true

两个逻辑非，实际上会模拟Boolean（）转型函数行为。其中第一个逻辑非会返回一个布尔值，第二个逻辑非会对这个布尔值求反，就是其本身对应的布尔值。’

逻辑与  
    逻辑与由两个和符号（&&）表示，有两个操作数，表示如下：

var result = true && false;

1）操作数为布尔值  
只有两个布尔值值同时为true的时候，返回true；否则返回false  
2）操作数为非布尔值

*  第一个操作数为对象，则返回第二个操作数
 *  第二个操作数是对象，则只有在第一个操作数的求值结果为true时才会返回该对象
 *  两个操作数都为对象 ，则返回第二个操作数
 *  第一个操作数为Null/NaN/undefined，则返回null/NaN/undefined  
        逻辑与属于短路操作，即第一个操作数能够决定结果，那么不会对第二个操作数求值。如果第一个操作符为false，则结果一定不可能为true。

逻辑或  
     逻辑或操作符由两个竖线符号(||)表示，两个操作数，如下例：

var result = true || false;

1）操作数为布尔值  
只有两个布尔值值同时为false的时候，返回false；否则返回true  
2）操作数为非布尔值(与逻辑与进行区别)

*  第一个操作数为对象，则返回第一个操作数
 *  第一个操作数的求值结果为false，则返回第二个操作数
 *  两个操作数都为对象 ，则返回第一个操作数
 *  第一个操作数为Null/NaN/undefined，则返回null/NaN/undefined  
        逻辑与属于短路操作，即第一个操作数能够决定结果，那么不会对第二个操作数求值。如果第一个操作符为true，则结果一定为true。  
      
      
    **4.乘性操作符**

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

操作数在非数值的情况下会自动类型转换，使用Number（）转型函数将其转换为数值，即空字符串为0，布尔值true为1.

乘法  
    由一个星号（\*）表示，计算数值乘积。特殊值处理如下：

*  乘积超出ECMAScript数值范围，返回Infinity或者是-Infinity
 *  操作数一个为NaN，则结果为NaN
 *  Infinity和0相乘，结果为NaN
 *  Infinity和一个非0数相乘，结果为Infinity或者是-Infinity
 *  Infinity和Infinity相乘结果为Infinity
 *  操作数不是一个数值的话，则会使用Number()自动转化为数值

除法  
    由一个斜线（/）表示，计算第一个操作符除以第二个操作数的结果。特殊值处理如下：

*  乘积超出ECMAScript数值范围，返回Infinity或者是-Infinity
 *  操作数一个为NaN，则结果为NaN
 *  Infinity被Infinity除，结果为NaN
 *  0被0除，结果为NaN
 *  非0数除以0，结果为Infinity或者是-Infinity
 *  Infinity除以任何非0数，结果为Infinity
 *  操作数不是一个数值的话，则会使用Number()自动转化为数值

求模  
    由一个百分号（%）表示，计算第一个操作符除以第二个操作数的余数。特殊值处理如下：

*  被除数无穷大，除数有限大，结果是NaN
 *  Infinity除以Infinity，求模的结果是NaN
 *  除数为0的时候，结果为NaN  
      
      
    **5.加性操作符**

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

加法  
    由一个加号（+）表示，计算两个值的相加结果。特殊值处理如下：

*  其中一个操作符为NaN，则结果为NaN
 *  Infinity加Infinity，结果为Infinity
 *  \-Infinity加-Infinity，结果为-Infinity
 *  \-Infinity加Infinity，结果为NaN
 *  当第一个操作数为字符串，则加号变为字符串连接符

减法  
    由一个减号（-）表示，计算两个值相减结果。特殊值处理如下：

*  其中一个操作符为NaN，则结果为NaN
 *  Infinity减Infinity，则结果为NaN
 *  \-Infinity减-Infinity，则结果为NaN
 *  \-Infinity减Infinity，则结果为-Infinity
 *  Infinity减-Infinity，则结果为Infinity
 *  如果有一个操作数为字符串，布尔值，null或者是undefined，则后台先调用Number（）函数然后在进行操作  
      
      
    **6.关系操作符**

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

大于（>）、小于（<）、大于等于(>=)、小于等于(<=)操作符用于两个数值的比较，返回布尔值。特殊规则如下：

*  两个操作数为字符串，则比较字符串的字符编码值；
 *  其中一个为数值，则将另一个操作数转化为数值然后进行比较；
 *  其中一个为布尔值，则将布尔值转换为数值比较；
 *  其中一个为对象，则利用valueof（）方法转化，再比较；若对象没有valueof（）方法，则使用tostring（）方法，然后再比较。

var result  = "23"<"3"//false

##       **6.相等操作符** ##

相等先转化再比较，全等先比较再转化

相等不相等  
    相等符号：两个等号表示（==）；不相等符号：感叹号和等号表示（！=），返回布尔值。基本规则如下：

*  其中一个操作数为布尔值，则先转化为数值再进行比较；
 *  其中一个操作数为字符串，则先转换为数值在进行比较；
 *  其中一个操作数为对象，另一个不是，则先调用valueof（）方法再进行比较
 *  两个操作数都为对象，则比较是不是同一对象
 *  null和undefined是相等的
 *  有一个操作数为NaN，相等符号返回false，不相等符号返回true。特别注意NaN不等于NaN

全等和不全等  
    全等符号：三个等号（===）表示；  
    不全等符号：一个叹号两个等号（!==）表示；  
    返回布尔值；

var result1=（"55"==55）;//返回true，转换后相等
    var result2=（"55"===55）;//返回false，因为数据类型不同

注意：null===undefined返回false，由于类型不相同

\*\*6.条件操作符\*\*

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

var max = (num1 >num2)?num1:num2;

max会保存最大值。表达式的意思：如果num1大于num2（关系表达式返回true），将num1的值赋给max；如果num小于num2（关系表达式返回false），将num2的值赋给max。

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

[Link 1]: https://blog.csdn.net/chenchao2017/article/details/79733278