回過頭來，發現JS還是有點意思啊（滑稽）

JavaScript學習筆記

1、document.write()可以向body中輸出內容

2、javascript引入語法：

• 外部引入
• 內部
• href=“javascript:(函數）;”
• 其執行順序是按照聲明順序的

3、js的底層是利用Unicode編碼保存標識符的

4、js有六大基本類型數據：

• String：單雙引號都行，但是兩個不能混着用，嵌套需要成對

• Number：js中所有的數值都是Number類型，包括整數和浮點數；該類型的最大值是：Number.MAX_VALUE, 如果超過了最大值就會返回一個人Infinity表示正無窮， Infinity是一個字面量；

  NaN：Not A Number，也是一個特殊的值
  JS進行精確運算的時候會返回一個不精確的浮點值；

• Boolean

• Object

• Undefined：只有一個值：undefined，當聲明瞭一個變量之後，但是沒有初始化，這個變量就是undefined

• Null：只有一個值：null，該值專門用於表示一個空對象

5、強制轉換：

• 將某類型的數據轉爲String：
  • x.toString();
  • 該方法是返回一個新的值，不會對原值產生影響；
  • null、undefined沒有toString方法
  • String（x），這是一個函數，同樣返回一個新的值，不會對原值產生影響，null/undefined可以使用此函數轉換爲字符串
• 將其他類型數據轉換爲Number：
  • Number()，
  • 如果是純數字字符串，就會轉爲Number；如果包含有非數字字符強轉結果爲NaN；空串結果爲0；
  • parseInt（）、parseFloat（）
• 將其他類型轉爲 Boolean：Boolean（）
  • 數值轉爲布爾：只有0與NaN爲False，其他都是true
  • 字符串：除了空串，其他都是true

6、運算符：

• +：除了運算之外，還可以將兩個字符串拼接在一起；任何值與字符串相加得到的結果都是兩個串拼接的結果；
• typeof ： 獲取目標的數據類型信息，並且以String形式將類型結果返回；
• 與/或運算注意點：
  • 如果兩個值都是非布爾值，如果 x&&y第一個值爲真，返回後面的值，即y；否則返回第一個值，x
  • 如果兩個值都是非布爾值，如果x||y，第一個值爲true，則返回第一個值，x；否則返回y
  • 上述兩種情況都是返回的是原本的值，而不是布爾值
• 關係運算符：
  • 任何值與NaN比較都是返false
  • 非Number數據相比較的時候，比較的是Unicode編碼的值的大小；多字符的串進行比較時，是一位一位進行比較的；如果兩位相同就後移一位；
• 相等運算符：
  • 使用”==“運算符的時候，如果兩邊數值類型不一致的話，則會自動進行呢類型轉換，轉爲相同類型再比較；
  • undefined衍生自null，因此兩值做相等運算的的時候，結果爲true；
  • NaN不與任何相等，包括自身；
  • 判斷變量是否爲NaN，利用isNaN（）函數
  • **!=**不等運算符也也會進行類型轉換；
  • ===：全等；
    • 不會進行類型轉換，如果類型不一致，直接返回false
  • !== ：不全等；
    • 與不等類似，如果是不同類型 ，直接返回true；

7、對象：

• 對象的分類：

  • 內建對象：
    • 由ES標準中定義的，在任何實現了ES的中都可以使用；如：Math、String、Boolean…
  • 宿主對象：
    • 由JS的運行環境提供的對象；如BOM、DOM
  • 自定義對象：由開發人員創建定義；
  • JS的對象的屬性的值可以是任意的數據類型；
  • in運算符：判斷一個屬性是否爲一個對象的屬性；

• JS中，變量是保存在棧中的，對變量進行賦值的時候，其實是對變量的值進行復制一份，然後保存在新變量的內存空間中；

• 對象則是保存在堆中，如果有兩個對象共享一個引用，如果其中一個對象對屬性進行修改，另一個對象也會同步更改；

• 相等運算符比較的時候，如果兩個變量保存的是基本數據類型，那麼比較的時候就是比較變量保存的值；如果是一個對象引用地址，則是比較對象引用地址是否一致；

• 聲明新對象的時候可以直接帶上屬性；

  var obj = new Object();
  var obj = {};
  var obj = {
      name : "張三",
      age : 19,
      profession : "計算機科學與技術"
  }
  

8、函數：

• 函數也是一個對象；
• 創建一個函數對象：
  • 將要封裝的代碼寫在函數對象中；
  • 這個函數不會被立即執行；
  • 調用函數的方式：函數對象()；

var fun = new Functino("console.log('hello world!');");

• 函數調用的時候，解析器不會檢查形參的類型；因此有時候需要對形參進行相應的合法性檢查；

• 立即執行函數：

  (function(){
      alert();
  })();
  //這裏函數的特點是一般是匿名函數，而且執行次數只有一次；
  

• 枚舉對象中的屬性：

  var obj = {
      name:'hhh',
      age:19,
      profession:'jike'
  };
  for(var att in obj){
      console.log(att);
  }
  

9、全局作用域的變量都會變成window對象的屬性；全局作用域的函數都回變成window的方法；

10、變量的聲明提前：

• 帶有var聲明的變量，會在所有代碼執行前被聲明（只是聲明，並沒有被賦值初始化）
• 如果沒有var，該變量即不會別聲明提前
• 以上原則在函數聲明中同樣生效；
• 使用函數式聲明創建函數：
  • 不管函數被寫在哪裏，它總會在所有代碼執行之前就被聲明創建；

11、變量的作用域：

• 如果一個變量在函數作用域中沒有被聲明，那麼就會向上尋找同名變量；
• 就近原則；
• 如果找到全局變量也沒有找到，就會報錯**‘undefinded’**
• 在函數體中，沒有使用var聲明的變量都是全局變量；

12、this；

• 解析器在調用函數的的時候都會向函數內部傳遞一個隱含的參數，this，指向的是一個對象；
• 以函數的方式調用，this永遠指向window；
• 以方法的方式調用，this指向的是調用對象；

13、構造函數：

• 使用工廠方法構造的對象都是使用Object函數創建的對象；
• 構造函數與普通函數沒有區別，就是習慣上首字母大寫；
• 普通函數是直接調用，構造函數是通過new關鍵字調用；

function Person(name, age, sayName){
    this.name = name;
    this.age = age;
    this.sayName = sayName;
    return this;
}

var per = new Person('張勝男', 17, function(){
    console.log('my name is ' + this.name);
});

Person {name: “張勝男”, age: 17, sayName: ƒ}

14、原型（prototype）：

• 創建的每一個函數，解析器都會向函數添加一個屬性prototype，它是一個對象類型；
• 當函數以普通函數調用時，prototype沒有任何作用；
• 當函數以構造函數方式調用的時候，它所創建的對象都會有一個隱含的屬性，指向該構造函數的原型對象，可以通過 __proto__ 訪問該屬性；
• 當一個構造函數的原型對象中包含了某個屬性，當對象調用時，發現對象本身沒有該屬性時，就會去原型對象中尋找該屬性；
• 使用原型對象的好處是，避免污染了全局作用域；
• 使用in檢查對象中是否有某屬性的時候，如果對象中沒有但是原型中有也會返回true
• 使用hasProperty（）來檢查對象是否具有某屬性纔會真正檢查是不是對象本省具有該屬性；
• Object對象的原型沒有原型，如果在Object中找不到之後就會返回undefined；

15、垃圾回收；

• 自動的垃圾回收機制；

16、內建對象；

• 數組

  • 聲明方式：

  var arr = new Array();
  var arr = [];
  var arr = new Array(1,2,3); //[1，2,3]
  

-~~~

• 什麼都能存；

• 常用方法：

  pop：清除最後一個元素並返回；
  push：向數組中添加一個或者多個元素；
  shift：清除第一個元素並返回
  unshift：在前面插入；
  

• 除了for循環之外，還有一個forEach方式遍歷數組；

  var arr = ['孫悟空', '豬八戒', '沙和尚', '白龍馬'];
  //需要提供一個回調函數
  //可以不提供參數
  //瀏覽器會提供三個參數
  //    第一個：當前遍歷的參數
  //    第二個：index
  //    第三個：當前正在遍歷的元素
  arr.forEach(function(){
      //函數體；
  });
  

• Date；

  • 表示時間
  • 直接調用new Date（）得到的是系統當前時間；
  • 如果需要獲取一個指定之間，需要在構造函數中傳遞一個表示時間的字符串參數

  var date = new Date('31/05/2020 16:52:00');
  

  • getDay()返回的是周幾，0表示週日
  • getTime（）返回一個時間戳
    • 時間戳：從格林尼治時間1970年1月1日0分0秒到當前日期所花費的毫米數；

17、call、apply：

• 使用方式

  function fun(){
      console.log(this);
  }
  fun();  //此時this爲window
  
  var obj = {};
  fun.call(obj); //此時this爲obj
  fun.apply(obj);//此時this爲obj
  

• call可以將實參按序跟在obj後面，會依次賦值；

• apply則需要將實參封裝爲數組，再傳遞；

18、arguments；

• 除了this之外，解析器還會悄悄的傳遞一個arguments；
• 這是一個類數組對象；
• 調用函數的時候，傳遞的實參都在arguments裏面保存着；
• arguments.length獲取長度
• callee屬性指向當前執行函數的本身；

19、方法和屬性只能添加給對象，並不能添加給基本類型；當對一些基本類型的值使用屬性和方法時，瀏覽器會臨時使用包裝類將其轉爲對象，然後調用對像的屬性和方法，調用完之後轉換回基本類型。

20、字符串相關操作：

• 在底層中，字符串是以字符數組的形式保存的；

21、正則表達式：

• 內容過於龐大且靈活，因此不做記錄

22、DOM；

• 節點：Node——構成HTML文檔的最基本的單元
• 常用節點有四類：
  • 文檔節點：整個HTML文檔
  • 元素節點：HTML文檔中的HTML標籤
  • 屬性節點：元素的屬性
  • 文本節點：HTML標籤的文本內容
• script標籤可以寫在title標籤下，也可以寫在body標籤裏面，但是寫在title標籤下面就需要給頁面綁定一個onload函數，避免script代碼先加載，引起奇奇怪怪的問題；
• DOM查詢
  • getElementById() 通過id屬性獲取一個元素節點
  • getElementByTagName() 通過標籤名獲取一組元素節點對象
  • getElementByName() 通過name屬性獲取一組元素節點對象
  • 通過具體元素節點的調用：
    • childNodes，會返回當前節點的包括文本節點在內的所有子節點
    • firstChild， 表示當前節點的第一個子節點
    • lastChild, 表示當前元素的最後一個子節點
    • parentNode， 返回當前節點的父節點
    • previousSibling，返回當前節點的前一個兄弟節點
    • nextSibling，返回當前節點的後一個兄弟節點
  • DOM節點之間的空白也算一個文本節點
  • document.querySelector:提供一個css選擇器的字符串作爲參數來獲取一個元素節點，使用該方式只能返回一個結點，如果有多個符合條件的，只會返回第一個；
  • document.querySelectorAll：返回多個符合條件的節點列表
• 創建新節點的方式：
  • 先通過Document.createElement(“標籤”)的方式新建一個待插入節點；
  • 然後獲取要進行插入的節點；
  • 如果新節點要有文本節點，直接調用新節點的innerHTML方法；
  • 然後進行插入，完事。
• 操作內聯樣式：
  • 通過js設置或者是讀取的的style屬性都是內聯樣式；
  • 獲取元素的樣式
    • getComputedStyle(元素，僞元素(null))；

23、事件對象：

• 當事件對象響應函數被觸發的時候，瀏覽區會將一個事件對象作爲實參傳遞進響應函數，在事件對象中封裝了當前事件相關的一切信息，比如鼠標座標、滾輪滾動方向、鍵盤哪個按鍵被按下

24、事件的冒泡：

• 本質是事件的向上傳導；
• 當後代元素的事件被觸發，其祖先元素的相同事件也會被觸發
• 可以通過事件對象取消冒泡：event.cancelBubble = true;

25、事件委派：

• 對象.事件;

• 對象.addEventListener();

  • 參數：
    • 事件的字符串
    • 回調函數
    • 是否在捕獲階段觸發事件，爲一個布爾值，一般爲false

  button.addEventListener("click", function(){
      //函數體
  }, false)
  //多個事件
  

26、**BOM；**瀏覽器對象模型

• window 代表整個瀏覽器的窗口，同時window䦹網頁中的全局對象
• Navigator 代表當前瀏覽器的信息，通過該對象可以識別不同的瀏覽器
  • 由於歷史原因，該對象的大部分屬性都已經不能識別瀏覽器了
  • 一般使用UserAgent來識別用戶瀏覽器信息；
• Location 代表當前瀏覽器的地址欄信息，通過該對象可以獲取地址欄信息，或者操作瀏覽器跳轉頁面
• History 代表瀏覽器的歷史記錄，可以通過對象；來操作瀏覽器的歷史記錄；
  • 由於隱私限制，只能操作瀏覽器向前或者向後翻頁，而且該操作有時效
• Screen 代表用戶屏幕信息；

27、定時器setInterval（）

• 定時調用
• 可以將一個函數每隔一段時間執行一次
• 參數
  • 1、回調函數
  • 2、間隔時間，單位毫秒
• 返回值：
  • 返回一個number型的數據
  • 該數字是用來區分定時器的唯一標識
• 關閉：clearInterval()
  • clearinterval(number)；
  • 參數可以是任何值，但是如果不是一個合法的定時器的標識，定時器什麼也不會幹

28、延時調用

• 延時調用函數不會立即執行，而是隔一段時間執行，而且只會執行一次
• setTimeout(回調函數)；

29、JSON；

• 一個特殊格式的字符串，能被所有語言識別
• 主要用於數據交互
• JSON與JS對象的格式一樣，只不過JSON字符串中的屬性名必須加雙引號
• 分類
  • 對象{}
  • 數組[]
• 允許的值：
  • 字符串、數值、布爾值、null、對象、數組
• JSON.parse()
  • 可以將JSON字符串轉爲js’對象
  • 需要一個JSON字符串作爲參數
• JSON.stringify()
  • 可以將一個JS對象轉換爲一個JSON字符串
  • 需要一個JS對象作爲參數（ify是字符化）

30、eval();

• 可以用來執行字符串形式的JS代碼，並將執行結果返回
• 如果使用eval()執行的字符串含有“{}”，它會將{}當成是代碼塊
• 如果不希望將其當成代碼塊解析，則需要在字符串前後加上括號（）