JS學習筆記(一)

最近開始學習的JS,做這個筆記只是為了記錄一下自己的學習情況,也算是督促自己每天多看點書。基本都是書上的內容整理了一下,并不是什么高深莫測的東西。

<h1 id="2">第2章 在HTML中使用JavaScript</h1>
<h2 id="2.1">2.1 script元素</h2>

  • async:表示立即下載腳本,但不應妨礙頁面中的其他操作。只對外部腳本文件有效。
  • charset:可選。表示通過src屬性指定的代碼的字符集。大多數瀏覽器會忽略它的值,因此很少用。
  • defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執行。只對外部腳本文件有效。
  • language:已廢棄。
  • src
  • type:可選。默認text/javascript。

<h3 id="2.1.2">2.1.2 延遲腳本</h3>

<script>中設置defer屬性,相當于告訴瀏覽器立即下載,但延遲執行。先于DOMContentLoaded事件。最好只包含一個延遲腳本

<h3 id="2.1.3">2.1.3 異步腳本</h3>

與defer不同的是,標記為async的腳本并不保證按照指定它們的先后順序執行。因此確保兩者之間互不依賴非常重要。指定async的目的是不讓頁面等待兩個腳本下載和執行,從而異步加載頁面其他內容。為此,建議異步腳本不要在加載期間修改DOM。異步腳本一定會在頁面的load事件前執行,但可能會在DOMContentLoaded事件觸發前或后執行。

<h3 id="2.1.4">2.1.4 在XHTML中的用法</h3>

  • 方法一:用相應的HTML實體(<)替換代碼中所有的小于號(<)

  • 方法二:用一個CData片段來包含JavaScript代碼。

      <script type="text/javascript"><![CDATA[
          function example(){
             //代碼段
          }
      ]]></script>
    
  • 在不兼容XHTML的瀏覽器中,用JavaScript注釋將CData標記注釋即可

      <script type="text/javascript">
      //<![CDATA[
          function example(){
             //代碼段
          }
      //]]>
      </script>
    

<h1 id="3">第3章 基本概念</h1>
<h2 id="3.3">3.3 變量</h2>

使用var操作符定義的變量將成為定義該變量的作用域中的局部變量。省略var可以定義全局變量(一般不用)。
<h2 id="3.4">3.4 數據類型</h2>

ECMAScript中的5種基本數據類型:Undefined,Null,Boolean,Number,String。1種復雜數據類型:Object
<h3 id="3.4.1">3.4.1 typeof操作符</h3>

  • 返回值:

    • "undefined":如果這個值未定義
    • "boolean":如果這個值是布爾值
    • "string":如果這個值是字符串
    • "number":如果這個值是數值
    • "object":如果這個值是對象或null
    • "function":如果這個值是函數
  • 用法

      var message = "sss";
      alert(typeof(message));//"string"
      alert(typeof message);//"string"
      alert(typeof 95);//"number"
    
  • 因為typeof是操作符不是函數,所以括號不是必須的。

<h3 id="3.4.2">3.4.2 Undefined類型</h3>

Undefined類型只有一個值:undefined(使用var聲明變量但未初始化時)

<h3 id="3.4.3">3.4.3 Null類型</h3>

  • Null類型的值:null
  • undefined值派生自null值。因此null和undefined的相等性測試返回true
  • 如果定義的變量準備在將來用于保存對象,那么最好將該變量初始化為null

<h3 id="3.4.4">3.4.4 Boolean類型</h3>

  • 值:true和false
  • 轉型函數Boolean()
數據類型 轉換為true的值 轉換為false的值
Boolean true false
String 任何非空字符串 ""(空字符串)
Number 任何非零數字值(包括無窮大) 0和NaN
Object 任何對象 null
Undefined n/a(不適用) undefined

<h3 id="3.4.5">3.4.5 Number類型</h3>

整數:十進制,八進制(第一位是0),十六進制(前兩位是0x)

  1. 浮點數值

    • 如果數值可以轉換成整數,就會轉換成整數
    • 科學計數法:var floatNum = 3.12e7;//等于31200000
    • 最高精度是17位小數,但其精確度遠遠不如整數
    • 不要測試某個特定的浮點數值
  2. 數值范圍

    • 最小數值:Number.MIN_VALUE=5e-324(-Infinity)
    • 最大數值:Number.MAX_VALUE=1.7976931348623157e+308(+Infinity)
    • 超出數值后自動轉換為特殊的Infinity(無窮)值
    • 確定是否在數值之間:isFinite()函數。有窮則返回true
  3. NaN(Not a Number)

    • NaN,即非數值。表示一個本來要返回數值的操作數未返回數值的情況

    • 特點:1.任何涉及NaN的操作都會返回NaNNa。2.與任何值都不相等,包括NaN本身

    • isNaN()函數:確定參數是否“不是數值”。

      • isNaN()接收到一個數值后,會嘗試將這個值轉換為數值。不能被轉換為數值的將返回true

          alert(isNaN(NaN));//true
          alert(isNaN(10)); //false
          alert(isNaN("10"));//false
          alert(isNaN("blue"));//true
          alert(isNaN(true));//false
        
    • isNaN()適用于對象

  4. 數值轉換

    • 將非數值轉換成數值的三個函數:Number(),parseInt(),parseFloat()

    • Number()函數

      • 可以用于任何數據類型

      • 如果是Boolean值,true和false將分別轉換為1和0

      • 如果是數字值,只是簡單的傳入和返回

      • 如果是null值,返回0

      • 如果是undefined,返回NaN

      • 如果是字符串,遵循下列規則

        • 如果是字符串中只包含數字,則將其轉換為十進制數(注意011轉換為11,前導零忽略)
        • 如果字符串中包含有效的浮點格式,則將其轉換為相應的浮點數值(忽略前導零)
        • 如果字符串中包含有效地十六進制格式,則將其轉換為大小相同的十進制整數
        • 如果字符串是空的,則轉換為0
        • 如果字符串中包含除上述格式之外的字符,則轉換為NaN
      • 如果是對象,則調用對象的valueOf()方法,然后依照前面的規則轉換返回的值。如果轉換的結果是NaN,則調用對象的toString()方法,然后再次依照前面的規則轉換返回的值

    • paeseInt()函數

      • 把字符串轉換成數值
      • 忽略字符串前面的空格,直到找到第一個非空字符。如果第一個字符不是數字或符號,則返回NaN;如果是就繼續解析,直到解析完所有字符或遇到非數字字符(如1234blue會轉換為1234,22.5轉換為22)
      • 可以解析十進制,八進制。十六進制
      • 增加一個參數可以指定轉換為多少進制parseInt("0xAF",16),也可以省略前面的0x
      • 始終將10作為第二個參數
    • parseFloat()函數

      • 與parseInt()類似
      • 第二個小數點無效
      • 始終忽略前導零
      • 只解析十進制,沒有第二個參數
      • 如果字符串包含的是一個可解析為整數的數,會返回整數

<h3 id="3.4.6">3.4.6 String類型</h3>
單引號和雙引號都有效,完全相同

  1. 字符字面量(轉義字符)

    • 很多
    • 字符串的length屬性:獲取字符串長度
  2. 字符串的特點

    • ECMAScript中字符串不可變
    • 要改變某個變量保存的字符串,首先要創建一個新的字符串,在這個字符串中填充新的字符,然后銷毀原來的字符串
  3. 轉換為字符串

    1. toString()方法

      • 數值、布爾值、對象、字符串值有該方法,null和undefined值沒有
      • 可以傳遞一個參數:輸出數值的基數。通過傳遞這個參數可以輸出以二進制、八進制、十六進制等有效進制格式表示的字符串
    2. 轉型函數String()

      • 可以將任何類型的值轉換成字符串
      • 如果值有toString()方法,則調用toString
      • 如果值是null,則返回"null"
      • 如果值是undefined,則返回"undefined"

<h3 id="3.4.7">3.4.7 Object類型</h3>

  1. 新建對象:var o = new Object();

  2. Object實例的屬性和方法

    • Constructor:構造函數
    • hasOwnProperty(propertyName):用于檢查給定的屬性在當前對象實例中是否存在,propertyName必須以字符串形式指定
    • isPrototypeOf(Object):用來檢查傳入的對象是否是另一個對象的原型
    • propertyIsEnumerable(propertyName):用于檢查給定的屬性是否能用for-in語句來枚舉
    • toLocaleString():返回對象的字符串表示。該字符串與執行環境的地區對應
    • toString():返回對象的字符串表示
    • valueOf():返回對象的字符串、數值或布爾值表示,通常與toString()方法的返回值相同

<h2 id="3.5">3.5 操作符</h2>
<h3 id="3.5.1">3.5.1 一元操作符</h3>

  1. 遞增和遞減操作符

    • 前置型和后置型
    • 執行前置遞增和遞減操作時,變量的值都是在語句被求值前改變的
    • 后置遞增和遞減在語句求值后才執行
    • 適用于任何值
      • 在應用于一個包含有效數字字符的字符串時,先將其轉換為數字值,再執行加減1。字符串變量變成數值變量
      • 在應用于一個不包含有效數字字符的字符串時,將變量的值設為NaN。字符串變量變成數值變量
      • 在應用于布爾值false時,先將其轉換為0再執行加減1。布爾值變量變成數值變量
      • 在應用于布爾值true時。先將其轉換為1再執行加減1.布爾值變量變成數值變量
      • 在應用于浮點數值時,執行加減1的操作
      • 在應用于對象時,先調用對象的valueOf()方法以取得一個可供操作的值。然后對該值應用前述規則。如果結果是NaN,則調用toString()方法啊后再應用前述規則。對象變量變成數值變量
  2. 一元加和減操作符

    1. 一元加操作符(+)

      • 放在數值前面不產生任何影響
      • 對非數值應用一元加操作符時。會像Number()轉型函數一樣對這個值執行轉換
    2. 一元減操作符(-)

      • 表示負數
      • 應用于非數值時,與一元加操作符規則相同,只是最后的數值變為負數

<h3 id="3.5.2">3.5.2 位操作符</h3>
對于有符號的整數,32位中的前31位用于表示整數的值,第32位用于表示數值的符號:0表示整數,1表示負數。表示符號的位叫做符號位,符號位的值決定了其他位數值的格式
正數:以純二進制格式存儲
負數:二進制補碼

計算二進制補碼:1.求這個數值絕對值的二進制碼;2.求二進制反碼:將0替換為1,1替換為0;3.將得到的二進制反碼加1
對數值應用位操作符時:64位——>32位——>64位
特殊的NaN和Infinity會當作0
對非數值應用位操作符時:Number()轉換后再應用,得到的是一個數值

  1. 按位非(NOT)

    • 符號:~
    • 結果:返回數值的反碼
    • 本質:操作數的負值減1
  2. 按位與(AND)

    • 符號:&
    • 本質:將數值的每一位對齊,執行AND操作(都是1時返回1)
  3. 按位或(OR)

    • 符號:|
    • 本質:有一個1就返回1
  4. 按位異或(XOR)

    • 符號:^
    • 本質:只有一個1時才返回1,兩位是1或是0則返回0
  5. 左移

    • 符號:<<
  6. 有符號的右移

    • 符號:>>
    • 本質:是以符號位的值填充空位
  7. 無符號右移

    • 符號:>>>
    • 本質:以0填充空位
    • 會把負數的二進制碼當成正數的二進制碼

<h3 id="3.5.3">3.5.3 布爾操作符</h3>

  1. 邏輯非

    • 符號:!

    • 規則:

      • 對象,返回false
      • 空字符串,返回true
      • 非空字符串,返回false
      • 數值0,返回true
      • 任意非0數值(包括Infinity),返回false
      • null,返回true
      • NaN,返回true
      • undefined,返回true
    • 兩個!可以模擬Boolean()轉型函數

  2. 邏輯與

    • 符號:&&
    • 規則:短路操作。即如果第一個操作數能決定結果,那么不會再對第二個操作數求值。可以應用于對象,不一定返回布爾值
      • 如果有一個操作數是null,則返回null
      • 如果有一個操作數是NaN,則返回NaN
      • 如果有一個操作數是undefined,則返回undefined
      • 如果第一個操作數是對象,則返回第二個操作數
      • ......
  3. 邏輯或

    • 符號:||
    • 規則:短路操作。可以應用于對象,不一定返回布爾值
      • 如果第一個操作數是對象,則返回第一個操作數
      • 兩個都是null就返回null
      • 兩個都是NaN就返回NaN
      • 兩個都是undefined就返回undefined
      • ......

<h3 id="3.5.4">3.5.4 乘性操作符</h3>

  1. 乘法

    • 符號:*
    • 規則:
      • 如果操作數都是數值就執行常規的乘法計算。超過ECMAScript數值范圍則返回Infinity或-Infinity
      • 如果有一個操作數是NaN,則結果是NaN
      • Infinity*0=NaN
      • Infinity*非0=Infinity/-Infinity
      • Infinity*Infinity=Infinity
      • 不是數值的會先調用Number()將其轉換為數值,再應用規則
  2. 除法

    • 符號:/
    • 規則:
      • 如果操作數都是數值就執行常規的除法計算。超過ECMAScript數值范圍則返回Infinity或-Infinity
      • 如果有一個操作數是NaN,則結果是NaN
      • Infinity/Infinity=NaN
      • 0/0=NaN
      • 非零/0=Infinity/-Infinity
      • Infinity/非零=Infinity/-Infinity
      • 不是數值的會先調用Number()將其轉換為數值,再應用規則
  3. 求模

    • 符號:%
    • 規則:
      • 如果操作數都是數值就執行常規的除法計算
      • 無窮大數值%有限大數值=NaN
      • 有限大%0=NaN
      • Infinity/Infinity=NaN
      • 有限大/無窮大=被除數
      • 0/任何數=0
      • 不是數值的會先調用Number()將其轉換為數值,再應用規則

<h3 id="3.5.5">3.5.5 加性操作符</h3>

  1. 加法
    • 符號:+
    • 規則:
      • 如果有一個是NaN,則結果是NaN
      • Infinity+Infinity=Infinity
      • -Infinity+(-Infinity)=-Infinity
      • Infinity+(-Infinity)=NaN
      • +0+(+0)=+0
      • -0+(-0)=-0
      • +0+(-0)=+0
      • 字符串+字符串=倆字符串連起來
      • 字符串+非字符串,先把非字符串轉換成字符串,再連接起來
  2. 減法
    • 符號:-
    • 規則:
      • 如果有一個是NaN,則結果是NaN
      • Infinity-Infinity=NaN
      • -Infinity-(-Infinity)=NaN
      • Infinity-(-Infinity)=Infinity
      • -Infinity-Infinity=Infinity
      • +0-(+0)=+0
      • +0-(-0)=-0
      • -0-(-0)=+0
      • 如果有一個操作數是字符串、布爾值、null或undefined,則先在后臺調用Number()函數將其轉換為數值,然后再根據前面的規則執行減法計算。如果轉換的結果是NaN,則減法的結果是NaN
      • 如果有一個操作數是對象,則調用對象的valueOf()方法以取得表示該對象的數值。如果得到的值是NaN,則減法的結果就是NaN。如果沒有valueOf()方法,則調用toString()

<h3 id="3.5.6">3.5.6 關系操作符</h3>

  • 符號:<、>、<=、>=
  • 返回布爾值
  • 規則:
    • 如果兩個操作數都是數值。則比較
    • 如果都是字符串,則比較字符串對應的字符編碼值
    • 如果一個操作數是數值,則將另一個操作數轉換為一個數值,然后比較
    • 如果一個操作數是對象,則調用這個對象的valueOf()方法,用得到的結果進行比較;若沒有valueOf()方法,就調用toString()方法
    • 如果一個操作數是布爾值,則先將其轉換為數值
    • 任何數與NaN進行關系比較結果都是false

<h3 id="3.5.7">3.5.7 相等操作符</h3>
由于相等和不相等操作符存在類型轉換問題,為了保持代碼中數據類型的完整性,推薦使用全等和不全等操作符

  1. 相等和不相等——先轉換再比較

    • 符號:==、!=
    • 會先轉換操作數(強制轉型),再進行比較
    • 規則:
      • 如果有一個操作數是布爾值,則先轉換為數值
      • 字符串比較數值,先將字符串轉換為數值
      • 對象比較非對象,調用對象的valueOf()方法,再按照前面的比較
      • null和undefined是相等的
      • 要比較相等性之前,不能將null和undefined轉換成其他任何值
      • 如果有一個操作數是NaN,則相等操作符返回false,不相等操作數返回true。即使兩個操作數都是NaN,相等操作符也返回false
      • 對象比較對象,則比較他們是不是同一個對象。如果都指向同一個對象,則相等操作符返回true,否則返回false
  2. 全等和不全等

    • 符號:===、!==
    • 不轉換,全等操作符只有在兩個數未經轉換就相等的情況下才返回true
    • null===undefined返回false,它們是不同類型的值

<h3 id="3.5.8">3.5.8 條件操作符</h3>
如:var max = (num1>num2) ? num1 : num2
<h3 id="3.5.9">3.5.9 賦值操作符</h3>

  • 符號:
    • =
    • *=
    • /=
    • %=
    • +=
    • -=
    • <<=
    • >>=
    • >>>=

<h3 id="3.5.10">3.5.10 逗號操作符</h3>

  • 用于聲明多個變量

    • var num1=1, num2=2, num3=3;
  • 用于賦值:總是返回表達式中的最后一項

    • var num = (5, 1, 4, 8, 0);//num=0
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容