JavaScript初探知识总结

分手后的思念是犯贱 2022-07-13 22:41 144阅读 0赞

# JavaScript初探知识总结 #

一如既往的总结一下所了解到的新知识。  
主要有四点：1：使用对象字面量、使用对象。2：相等和等同。3：数组问题。4：处理错误。5：undefined和null。

*  **使用对象字面量**  
    
    
     *  JavaScript支持对象的概念，通过调用new Object()的方式创建对象。用对象字面量的方式可以一口气定义一个对象及其属性。代码如下：

![结果][20161120112733767]

此例将一个函数变成了一个printMessage的方法，注意：在方法内部使用对象属性时要用到this关键字。

*使用对象：*  
1. 读取和修改属性值。  
***2. 枚举对象属性：要枚举对象属性可以使用for…in语句***

![结果][20161120125139942]

解释一下：prop是属性名，myData\[prop\]是prop对应的属性值。  
***3.增删属性和方法***  
增加属性很简单：对象名.新属性名（新方法名）=“属性值”。  
删除使用delete关键字：  
delete myData.name;  
delete myData\[“weather”\];  
***4.判断对象是否有某个属性***  
可以用in表达式判断对象是否具有某个属性。

var myData={
        name:"xch";
        weather:"sunny";
        printMessages:function(){
            document.writeln("hello"+this.name+".");
            document.writeln("today is "+this.weather+".");
        }
        };
    var hasName="name" in myData;
    var hasData="data" in myData;
    document.writeln("HasName:"+hasName);
    document.writeln("HasData:"+hasData);

在这里使用了一个已存在和一个不存在的属性进行测试。name存在，所以hasName的值为TRUE，data不存在，所以hasData为FALSE。

*  **相等的和等同运算符**  
    相等运算会尝试将操作数转换为同一类型以便判断是否相等。  
    等同运算符会判断值和类型是否都相同。

var a=5;var c="5";
    a==c;//TRUE
    a===c;//FALSE

JavaScript基本类型（字符串和数值等内置类型）的比较是值的比较。  
JavaScript对象的比较则是引用的比较。

对象的相等和等同测试：

测试结果：

![结果][20161120131941405]  
基本类型的相等和等同测试：

测试结果：

![结果][20161120132310049]

*顺便说一下显示类型转换吧*  
*转换为字符串*

(5).toString()+String(5);//结果为：55

*转换为数值*

var a="5";
    var b="5";
    Number(a)+Number(b);//结果为：10

补充：Number函数解析字符串值的方式很严格，在这方面parseInt和parseFloat函数更为灵活，后面两个函数会忽略数字字符后面的非数字字符。

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Number(str)</td> 
   <td align="center">通过分析指定字符串，生成一个整数或实数值</td> 
  </tr> 
  <tr> 
   <td>parseIn(st&gt;)</td> 
   <td align="center">通过分析指定字符串，生成一个整数值</td> 
  </tr> 
  <tr> 
   <td>parseFloat(str)</td> 
   <td align="center">通过分析指定字符串，生成一个整数或实数值</td> 
  </tr> 
 </tbody> 
</table>

\- **数组问题**  
关于数组字面量以及读取和修改数组内容，我感觉和对象字面量和读取修改类似，不再多说。  
数组的枚举使用for循环，也很简单，要确定数组中元素的个数可以使用其length属性。  
重点记录一下内置的数组方法：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th align="center">说明</th> 
   <th align="right">返回</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>concat(otherArray)</td> 
   <td align="center">将数组和参数所指数组内容合并为一个新数组。可指定多个数组</td> 
   <td align="right">数组</td> 
  </tr> 
  <tr> 
   <td>join(separator)</td> 
   <td align="center">将所有数组元素链接为一个字符串，各元素内容用指定的字符分隔</td> 
   <td align="right">字符串</td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td align="center">把数组当做栈来使用，删除并返回最后一个元素</td> 
   <td align="right">对象</td> 
  </tr> 
  <tr> 
   <td>push(item)</td> 
   <td align="center">把数组当做栈来使用，将指定的数据添加到数组中</td> 
   <td align="right">void</td> 
  </tr> 
  <tr> 
   <td>revese()</td> 
   <td align="center">就地反转数组元素的次序</td> 
   <td align="right">数组</td> 
  </tr> 
  <tr> 
   <td>shift()</td> 
   <td align="center">类似pop(),但操作的数组的第一个元素</td> 
   <td align="right">对象</td> 
  </tr> 
  <tr> 
   <td>slice(start,end)</td> 
   <td align="center">返回一个子数组</td> 
   <td align="right">数组</td> 
  </tr> 
  <tr> 
   <td>sort()</td> 
   <td align="center">就地对数组元素排序</td> 
   <td align="right">数组</td> 
  </tr> 
  <tr> 
   <td>unshift(item)</td> 
   <td align="center">类似push，但新元素被插入的数组的开头位置</td> 
   <td align="right">void</td> 
  </tr> 
 </tbody> 
</table>

\- **处理错误**  
JavaScript用try…catch语句处理错误。结构：

try{
    //程序语句
    }catch(e){
    //程序语句
    }

如果没有错误，执行try\{\}内语句，如果有错误则执行catch里面的语句。  
如果不管是有没有错误都要执行一些语句，再加上一跳finally子句即可。

try{
    //程序语句
    }catch(e){
    //程序语句
    }finally{
    //程序语句
    }

*  **undefined和null**  
    在读取为赋值的变量或试图读取对象没有属性时得到的就是undefined。  
    null：用于表示已经赋值但是这个值并不是一个有效的object、string、number或boolean值，也就是说定义了一个 无值 （no value）。  
    ***区分undefined和null***  
    如果想要同等对待undefined值和null值，使用相等运算符（==），让JavaScript进行类型转换。  
    如果想要区分undefined值和null值，使用等同运算符（===）。

[20161120112733767]: /images/20220714/ca611080ebd44398b79be70ea6983696.png
[20161120125139942]: /images/20220714/49c3f775a03d42c488441cfca9dde68b.png
[20161120131941405]: /images/20220714/8b8b0ebede2541bba2ddbd6ab82b0dbc.png
[20161120132310049]: /images/20220714/660c7e0db6114fcdbd7cb0096467a665.png