Javascript【 基礎】

前言

儘管各種層出不窮的框架替代了Js的各種操作，歸根結底，它還是用Js來實現的 。
一個紮實的基礎可以爲以後進階起到良好的作用

目錄

• Javascript 數據類型
• Javascript 常用數組操作方法
• Javascript 常用對象操作方法
• Javascript 事件模型 - 冒泡 - 事件對象 - 事件委託 / 代理

一，Javascript 的數據類型

Javascript 有哪些數據類型
Javascript 一般有兩種數據類型，基本數據類型和引用數據類型。
基本數據類型包括 Undefined、Null、Boolean、Number、String、Symbol (ES6新增，表示獨一無二的值)，
引用數據類型包括對象、數組和函數。統稱爲Object對象，

那麼如何校驗這些數據類型呢 ？

1. typeof 基本數據類型的通用方式
返回一個表示數據類型的字符串，返回結果包括：number、boolean、string、symbol、object、undefined、function等7種數據類型

typeof ''; // string 
typeof 1; // number 
typeof true; //boolean 
typeof undefined; //undefined 
typeof new Function(); // function 
typeof Symbol(); // symbol 
typeof null; //object 
typeof [] ; //object 
typeof {} ; //object

可以看到 數組，對象，返回的都是 object
這時就需要使用其它方式來判斷了.
null 就是空 ，先排除開來，往下看：

2. ES6語法 instanceof

[] instanceof Array; 
//true
{} instanceof Object; 
//true

3.通過追溯原型去查看它的屬性類型 Object.prototype.toString.call

Object.prototype.toString.call({})
//"[object Object]"
Object.prototype.toString.call([])
//"[object Array]"

4.構造函數 constructor

var obj = {}
obj.constructor == Object
//true
var arr = []
arr.constructor == Array
//true

二 ， Javascript 常用數組操作方法

1. push 在數組最後一位增加（參數）

var arr = [1,2,3,4,5,6] ; 
arr.push(7) ; // [1,2,3,4,5,6,7]

2. pop 移除數組最後一位，不需要參數，返回最後一位元素

var arr = [1,2,3]
arr.pop() // 3
arr // [1, 2]

3. unshift 在數組第一位增加（參數）

var arr = [1,2,3,4,5]
arr.unshift(0) // 6 
arr // [0, 1, 2, 3, 4, 5]

4. shift 移除數組第一位，不需要參數，返回第一位元素

var arr =  [0, 1, 2, 3, 4, 5]
arr.shift() // [1, 2, 3, 4, 5]

5. splice 替換元素

//例1
var arr = ['aa','bb','cc','dd']
arr.splice(1,2,3,4) // ["bb", "cc"]
arr //(4) ["aa", 3, 4, "dd"]

//例2
arr.splice(1,2,3) // [3, 4]
arr //(3) ["aa", 3, "dd"]

//三個參數
//1.從下標第幾位數開始
//2.替換幾位
//3.要替換的值
//影響數組本身
//這裏有一個小插曲，當替換兩位以上且爲同樣值得時候入第二個例子，結果會合並，需要注意一下

6. slice 截取下標範圍間的元素

var arr = ['aa','bb','cc','dd']
arr.slice(0,3)
//(3) ["aa", "bb", "cc"]
// 從下標0開始截取3個元素，也可以理解爲從下標0開始到下標3（不包含3）的元素
//不影響數組本身

7. join 轉換字符串

var arr = ['aa','bb','cc','dd'];
arr.join('-') // "aa-bb-cc-dd"
// arr.join() 默認以 ，號分隔開，傳入分隔符則以分隔符分隔開

8. reverse 倒序排列，按照大小，字母順序等

var arr = [12,321,312,32,43]
arr.reverse() // [321, 312, 43, 32, 12]

9. sort 數組的排序

var arr = [12,321,312,32,43]
arr.sort() // [12, 312, 32, 321, 43]
// 可以看到sort()返回的順序並不如意 ！看下邊
arr.sort(function(v1,v2){ return v1-v2 }) // [12, 32, 43, 312, 321]
// 這裏是需要傳一個排序函數的，來定義排序方式
//本身sort排序方式，道友感興趣的話可以百度查一查，控制檯調試一下，我在這裏就不說了哈

10. concat 用於多個數組合並

var a = [1,2,3]
var b= [4,5,6]
a.concat(b) // [1, 2, 3, 4, 5, 6]

三 ， Javascript 常用對象操作方法

1. 添加元素

var obj = {a:1,b:2,c:3}
obj['d'] = 4; 
//obj  {a: 1, b: 2, c: 3, d: 4}

2.delete 移除元素

var obj = {a:1,b:2,c:3}
delete obj.a
// obj {b: 2, c: 3}

3. in 判斷元素是否存在

var obj = {a:1,b:2,c:3}
"a" in obj // true
obj.hasOwnProperty('b') // true

4. Object.keys 獲取對象key

var obj = {a:1,b:2,c:3}
Object.keys(obj)
// ["a", "b", "c"] 

5. Object.values 獲取對象value

var obj = {a:1,b:2,c:3}
Object.values(obj)
// [1, 2, 3]

7.Object.assign 可以理解爲合併對象並去重

var obj = {b: 2, c: 3, a: 123}
//例1
Object.assign(obj,{d:4})
{b: 2, c: 3, a: 123, d: 4}

//例2 - 建立在 例1 基礎上
Object.assign(obj,{b:10})
{b: 10, c: 3, a: 123, d: 4}

//參數1：目標對象
//參數2：需要合併或者修改到目標對象（obj）的對象
//key 一樣會被覆蓋，否則新增

三，事件模型

說到Js的事件模型，我們也可以理解爲事件流；那什麼是事件流呢 ? 就是從事件的捕獲 - 事件的處理 - 事件的冒泡 ； 這麼一個過程，就是事件流 。我們具體分析一下：

1，首先要想有事件流（事件模型），我們得先有事件，那麼Dom 綁定事件的方式也就那麼幾種：我們略帶過一下

• 元素直接綁定事件

<div onclick = "fun()"></div>

• 通過 Js 腳本綁定事件

<div id="event"></div>
document.getElementById("event")=function(){}

• 也可以通過腳本動態註冊事件

<div id="event"></div>
document.getElementById("event").addEventListener(type, handle, false);
//type: 事件觸發類型，如click,keypress等等，下面我們詳細的講講事件類型！！
//handle:事件處理函數，事件出發後，定義可能發生的變化！！
//false: 表示事件冒泡模型，一般來說都是false

emmmm ~ 好，通過簡單的幾個樣例介紹了綁定事件；

2， 接着我們繼續來說說事件模型，上邊有說到：事件流是從事件的捕獲 - 事件的處理 - 事件的冒泡這麼一個過程，大致看來可以分爲三個階段，分別是：

• 捕獲階段：當觸發一個節點事件，會從Document 根節點依次往下查找，直到觸發事件節點本身，查看是否註冊了事件處理函數，有則執行；

• 處理階段：是事件到達目標元素，執行該事件的處理函數

• 冒泡階段：由事件節點本身冒泡，依次向上查找父節點直到根節點Document查看是否註冊了該事件的監聽函數，有則執行

這裏出現了一個關鍵知識點 => 冒泡

事件冒泡
html元素是嵌套結構的DOM樹,在觸發內層元素的事件時,外部事件也會被由內到外觸發,這種現象叫做事件冒泡
通過一個小小的代碼實例來測試一下

  <div onclick="alert('div')">
      <p onclick="alert('p')">
        <span onclick="spanClick()">事件冒泡測試</span>
      </p>
    </div>
    //結果依次 alert span ， p ， div

如何阻止事件冒泡

    // 常用 stopPropagation 方法 ，拿上邊的例子列舉：
    function spanClick (event) {
		 event.stopPropagation()
	}
  	//這樣就可以阻止事件冒泡 , 可以動動小手實踐一下啦 ~ 

事件對象
在上邊例子中，相信大家又看到了一個關鍵字 “ event ” ， 那麼enevt是什麼呢 ? 沒錯，就是事件對象；

觸發Dom節點的某個事件時，會產生一個事件對象event，這個對象包含了與事件有關的信息。所有瀏覽器都支持事件對象，列舉幾個常用屬性：

// currentTarget:事件處理程序當前正在處理的元素
// target:事件的目標元素
// preventDefault() :取消事件的默認行爲，比如點擊a標籤默認跳轉鏈接，點擊button默認提交
// stopPropagation():取消事件進一步捕獲或者冒泡，經常會用到
// ......  還有很多，道友感興趣的話可以百度查閱一哈

注意：只有在事件處理程序執行期間，event對象纔會存在；一旦事件處理程序執行完畢，event對象就會被銷燬。

事件委託 || 事件代理

JavaScript高級程序設計上講：事件委託就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

通過一個簡單的例子來看一下：

 //HTML
 <div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
  </div>
  
//JS
var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
//這裏的 e 就是事件對象（event) 簡寫爲 e
// e.target 可以監聽到觸發點擊事件的元素是哪一個 , 利用事件對象屬性
　　var target = e.target
　　if (e.nodeName === 'A') { // 點擊的是 <a> 元素
　　　　alert(target.innerHTML) // 當前點擊的 a 元素html內容，target 裏邊不僅限於innerHTML , 還有很多，感興趣的可以自己測試查閱
　　}
})

註釋：如果給每個 a 標籤一一都綁定一個事件，那對於內存消耗是非常大的。藉助事件代理，我們只需要給父容器div綁定方法即可，這樣不管點擊的是哪一個後代元素，都會根據冒泡傳播的傳遞機制，把父容器的click行爲觸發，然後把對應的方法執行，根據事件源，我們可以知道點擊的是誰，從而完成不同的事。

爲什麼要使用事件委託 || 事件代理

在JavaScript中，添加到頁面上的事件處理程序數量將直接關係到頁面的整體性能，因爲需要不斷的與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是爲什麼性能優化的主要思想之一就是減少DOM操作的原因；如果要用事件委託，就會將所有的操作放到js程序裏面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數，提高性能；