JS基礎(chǔ)

• 頁面由三部分組成：
  • html：超文本標記語言豆同，負責頁面結(jié)構(gòu)
  • css：層疊樣式表土匀，負責頁面樣式
  • js：輕量級的腳本語言周荐，負責頁面的動效和數(shù)據(jù)交互
    小總結(jié)：結(jié)構(gòu)，樣式和行為饲宛，三者相分離
  • 在html頁面中寫結(jié)構(gòu)
  • 通過 link標簽的href屬性皆愉，引入css樣式
  • 通過script標簽的src屬性，引入js腳本
• css引入頁面的方式有三種
  • 行內(nèi)<div style="width:200px;height:300px;"></div>
  • 內(nèi)嵌:在header里面寫一個<style>選擇器{key:value}</style>
  • 外鏈：在header里面寫一個<link rel="stylesheet" href="css/index.css"/>
• JS引入頁面的方式，同CSS相似
  • 內(nèi)嵌：在開發(fā)過程中幕庐，建議把script放在body底部久锥；如果非要把script標簽對，放在head里面的話翔脱；需要加window.onload

  window.onload=function(){
      document.body.innerHTML='XXXXXX';
  }
  

  • 行內(nèi)：<div onclick="xxxx" onmouseover="xxxx"></div>
  • 外鏈：<script src="01.js"></script>
    注意：如果script作為JS的外鏈奴拦，一定不要在兩個script標簽中寫代碼媒鼓，寫了也沒用
• 屬性和方法的區(qū)別：屬性沒括號届吁，方法有括號
• 字符串和變量的區(qū)別：字符串有引號，變量沒引號
  • 字符串一般用單引號绿鸣；為了元素身跟上的屬性值區(qū)分開來疚沐；屬性值一般是""
  • 變量，就是別名潮模；var str亮蛔； 告訴瀏覽器，定義了str這么一個變量
  • 如果沒有定義變量擎厢，xxx is not defined
• JS常見的輸出方式7種
  • alert('') ; 顯示帶有一條指定消息和一個 OK 按鈕的警告框
  • confirm('確定要刪除究流？'); 他有兩個返回值：true 真， false假
  • console.log(''); 可以在控制臺打印出我們想要打印的內(nèi)容
  • console.dir(); 打印出對象身上的屬性和方法
  • document.write() 向文檔寫入 HTML 表達式或 JavaScript 代碼
    如果遇到window.onload會清空頁面
  • 元素.innerHTML=xxxx 設(shè)置或返回表格行的開始和結(jié)束標簽之間的 HTML
  • console.table(); 可以把數(shù)組和對象动遭，以表格的形式打印出來

  var ary2=[
      {
          name:'a',
          age:1,
          sex:'gril'
      },
      {
          name:'王b',
          age:2,
          sex:'boy'
      }
  ];
  console.table(ary2);
  
  

• chrome控制臺
  • Elements:用來調(diào)試html+css的
  • console:用來調(diào)試JS的
  • sources:可以拿到該網(wǎng)站相關(guān)的資源：images ,html ,css, js

體驗JS編程思想

• 需求：鼠標移入div1的時候芬探，div2顯示；鼠標移出div1的時候厘惦，div2隱藏

• 實現(xiàn)思路：

  1. 高度：div2的高度為0偷仿； 移入div1后高度為100;移出div1時div2高度0；
  2. display:block顯示宵蕉，none酝静，隱藏；
  3. 透明度：rgba(); opacity();
  4. 定位：left和top;
  5. margin:margin-left和 margin-top;
  6. overflow:hidden和visible;

• JS獲取元素的方式：

  • document.getElementById('id名字')羡玛；
    因為id是唯一的别智，所以拿到的是一個元素
  • document.getElementsByTagName('標簽名');
    標簽名拿到的是一個元素集合；即使只有一個元素稼稿，也是個集合
    想要取到其中的一個：aDiv[0] aDiv[2]

• JS中的數(shù)據(jù)類型

  • 基本數(shù)據(jù)類型：
    1. 字符串string
    2. 數(shù)字 number
    3. 布爾值 boolean
    4. undefined 現(xiàn)在沒有薄榛，以后也沒有
    5. null 空對象，現(xiàn)在沒有渺杉，以后會有
  • 引用數(shù)據(jù)類型
    1. 對象數(shù)據(jù)類型
       • 數(shù)組
       • 正則
       • 對象{}
    2. 函數(shù)數(shù)據(jù)類型
       function 函數(shù)名(){};

• 數(shù)據(jù)類型檢測的方式

  1. typeof 可以檢測基本數(shù)據(jù)類型（所有經(jīng)過typeof的都是字符串）蛇数，但是對于對象數(shù)據(jù)類型，檢測出來的都是object是越，無法知道具體屬于哪種對象
  2. 對象 instanceof 類耳舅； 比如ary instanceof Array 判斷這個實例是否屬于某個類
  3. 對象.constructor: 比如ary.constructor可以打印出對象所屬的類
  4. Object.prototype.toString.call(ary); 出來的結(jié)果 '[object Array]'

• 基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別：

  • 基本數(shù)據(jù)類型：是對值的操作
  • 引用數(shù)據(jù)類型：是對地址的操作

• 操作屬性用的是"." oDiv.style.display='block'

• 其他數(shù)據(jù)類型轉(zhuǎn)為number數(shù)據(jù)類型

  • 強制轉(zhuǎn)換
    • Number()
    • parseInt()
    • parseFloat()
  • 一個嚴格轉(zhuǎn)換
    • Number()
  • 兩個非嚴格轉(zhuǎn)化
    • parseInt() 只能轉(zhuǎn)化為整數(shù)
    • parseFloat() 可以保留小數(shù)

  如果轉(zhuǎn)換失敗的話，返回的結(jié)果是NaN:not a number 不是數(shù)字；但是NaN是number數(shù)據(jù)類型

• 關(guān)于NaN：

  • NaN是number數(shù)據(jù)類型
  • isNaN() 判斷是否為非有效數(shù)字浦徊； 非有效數(shù)字：true; 有效數(shù)字：false

• 循環(huán)由4部分組成：

  • 1）定義 2）條件 3）語句 4）自增

• 常見的循環(huán)方式：

  • for() :類數(shù)組arguments,htmlCollection,數(shù)組[]馏予，字符串
  • for in():普通對象{}
  • while(){}和for循環(huán)的區(qū)別和聯(lián)系
    • 用while()循環(huán)也可以實現(xiàn)for循環(huán)的四步
    • for循環(huán)一般用在循環(huán)次數(shù)固定； while()循環(huán)次數(shù)不固定
  • do...while() 不管條件是否成立盔性，都會先執(zhí)行一次

• 函數(shù)由兩部分組成：

  • 函數(shù)定義3階段
    • 開辟一個內(nèi)存空間
    • 把函數(shù)體內(nèi)所有的JS代碼霞丧，作為字符串存在這個空間中
    • 把空間地址賦值給函數(shù)名
  • 函數(shù)調(diào)用2階段
    • 當函數(shù)被調(diào)用的時候，會形成一個私有作用域
    • 把內(nèi)存中的字符串作為JS代碼來執(zhí)行
      只定義不調(diào)用冕香，函數(shù)不會執(zhí)行

• 閉包

  • 定義：
    • 當函數(shù)被調(diào)用的時候會形成一個私有作用域蛹尝，保護里面的變量不受外界的干擾，函數(shù)的這種保護機制叫做閉包
    • 閉包就是在提供了一個在外部訪問另一個函數(shù)內(nèi)部局部變量的方式

var add = (function(){
    var count = 0;//外部訪問的計數(shù)器悉尾，局部變量.
    var fun = function(){
        return ++count;
    }
    return fun;
})();
    
    //還可以這樣寫
    var add2 = (function(){
        var count = 0;//外部訪問的計數(shù)器突那，局部變量.
        function plus(){
            return ++count;
    }
    return plus;
})();
    
//還可以這樣寫
var add3 = (function(){
    var count = 0;//外部訪問的計數(shù)器，局部變量.
    return function(){
        return ++count;
    }
})();

• 作用：
  • 避免全局變量名沖突
  • 在閉包中通過“window.xx”去修改全局變量构眯；如果閉包中沒有定義此變量愕难，也可以直接修改變量去影響全局
  • 封裝（閉包中封裝的方法在全局不能使用，只能通過“window.xx=封裝的函數(shù)名”把方法導出）
  • 保存正確的i值
• 特性：
  • 函數(shù)嵌套函數(shù)
  • 函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
  • 參數(shù)和變量不會被收回

• 函數(shù)自帶的參數(shù)機制叫做arguments;
  • arguments:能拿到實參惫霸，并且以類數(shù)組的形式展現(xiàn)猫缭； 類數(shù)組也是對象，是對象都有屬性和方法
  • arguments.callee 拿到的是當前函數(shù)本身
  • arguments.length 拿到實參的長度／個數(shù)
• 數(shù)字常用的方法：
  • toFixed(要保存的位數(shù))四舍五入的保存小數(shù)位數(shù)的
• 屬性和方法的區(qū)別：
  • 屬性沒括號壹店，方法有括號猜丹；方法本質(zhì)就是對函數(shù)的調(diào)用
  • 對象的屬性不會報錯，如果沒有茫打，undefined居触； 方法不存在的話，會報錯
  • 屬性操作：. 和 []
    • 如果遇到變量老赤，屬性名[變量名] 注：千萬不要給變量加引號
    • 如果遇到屬性名為數(shù)字轮洋，屬性名[1]
• 參數(shù)有兩種
  • 形參
    • 形參是私有變量
    • 如果定義了形參，但沒有賦值抬旺，拿到是undefined
    • 形參個數(shù)不確定的話弊予，用arguments來獲取參數(shù)
  • 函數(shù)自帶的參數(shù)機制arguments
    • arguments可以打印出實參，以類數(shù)組的形式打印出來
    • 0,1,2可以找到對應(yīng)的屬性值
    • arguments.callee;代表當前函數(shù)本身
    • arguments.length;打印出實參的個數(shù)
• 函數(shù)返回值：
  • 函數(shù)返回值通過return;來返回
  • 獲取值的時候开财，需要返回值汉柒；設(shè)置值的時候，不需要返回值
• undefined出現(xiàn)的幾種情況：
  • 屬性：當對象的屬性名不存在的話责鳍，拿到的是undefined
  • 參數(shù)：如果定義了形參碾褂，但是沒有傳實參，拿到的是undefined
  • 沒有設(shè)置函數(shù)返回值历葛，即沒有寫return正塌，拿到的函數(shù)返回值為undefined
  • 寫了return但沒有賦值，拿到的函數(shù)返回值也是undefined
• NaN出現(xiàn)的幾種情況：
  • 轉(zhuǎn)化失敗時
  • 無效運算時：null+undefined、undefined+undefined
• 運算符：
  • 算術(shù)運算符：+ - * / %
    • %（取余）：技巧-有幾種情況就%幾
  • 比較運算符：
    > , >= , < , <= , == ,!= ,===, !==
  • 邏輯運算符：
    乓诽！ && ||
    • &&:兩邊都成立才能成立帜羊；但是也可以用它做條件判斷; 9%3==0 && alert('能整除')
    • ||:一般成立就算成立；也可以用它做條件判斷鸠天；9%3!=0 || alert('能整除')
  • 賦值運算符
    =; += ; -= ; *= ; /= ; %=
  • 運算符的優(yōu)先級：算術(shù)》比較》邏輯》賦值
• 條件判斷：
  • if(條件1){....}else if(條件2){...}else{...}
  • 條件?語句1:語句2;
  • switch:用于多條件判斷

  switch(判斷的是可變的值){
      case a:
          語句1讼育；
          break；
      case b:
          語句2稠集；
          break;
      default:
          語句3奶段；
          break；
  }
  

  每一種case情況其實都是相當于在用“===”進行比較
  • 如果只有一種條件巍杈，有三種寫法：
    • if(條件){語句1}
    • 條件忧饭？語句1：null;
    • if(條件) 語句1；
    • 9%3==0 && alert('能整除');
    • 9%3!=0 || alert('能整除');

數(shù)組常用的方法

第一組：增加筷畦，刪除和替換

• push()
  • 作用：給數(shù)組末尾增加一項
  • 需要實參
  • 返回值：新數(shù)組的長度
  • 原數(shù)組發(fā)生改變
• pop()
  • 作用：刪除數(shù)組最后一項
  • 不需要參數(shù)
  • 返回值：被刪除的內(nèi)容
  • 原數(shù)組發(fā)生改變
• unshift()
  • 作用：給數(shù)組開頭增加一項
  • 需要實參
  • 返回值：新數(shù)組的長度
  • 原數(shù)組發(fā)生改變
• shift()
  • 作用：刪除數(shù)組第一項
  • 不需要參數(shù)
  • 返回值：被刪除的內(nèi)容
  • 原數(shù)組發(fā)生改變
• splice()
  1. 插入／增加 splice(index,0,要添加的內(nèi)容)
     • 作用：在指定的索引前面，插入我們要添加的內(nèi)容
     • 參數(shù)：3個
     • 返回值：[]空數(shù)組刺洒，里面沒有內(nèi)容
     • 原數(shù)組發(fā)生改變
  2. 刪除 splice(index,m)
     • 作用：從指定的索引地方開始鳖宾，刪除m個；如果第二個參數(shù)不寫逆航，就從索引一直刪除到結(jié)尾
     • 參數(shù)：2個
     • 返回值：被刪除的內(nèi)容鼎文，以一個新數(shù)組的形式返回
     • 原數(shù)組發(fā)生改變
  3. 替換 splice(index,m,n)
     • 作用：從指定的索引開始，刪除m個因俐，并替換為n的新內(nèi)容
     • 參數(shù)：3個
     • 返回值：被刪除的內(nèi)容拇惋，以一個新數(shù)組的形式返回
     • 原數(shù)組發(fā)生改變

第二組：克隆和截取／查找

• slice(n,m)
  • 作用：從索引n開始抹剩，查找到索引m撑帖，包前不包后
  • 參數(shù)2個
  • 返回值：查找的內(nèi)容
  • 原數(shù)組沒有發(fā)生改變
  • 克隆的功能：slice(0)/slice()
    面試題：請找到數(shù)組中[n,m]項（答案：ary.slice(n-1,m)）
• concat()
  • 作用：數(shù)組拼接 ／ 克隆ary.concat()
  • 參數(shù)：不確定，想拼接幾個數(shù)組澳眷，里面參數(shù)就寫幾個數(shù)組名胡嘿，也可以寫成數(shù)組的形式
  • 返回值：拼接成的新數(shù)組
  • 原數(shù)組沒有發(fā)生改變

第三組：數(shù)組轉(zhuǎn)字符串

• toString()
  • 作用：數(shù)組轉(zhuǎn)字符串
  • 參數(shù)：無
  • 返回值：以逗號分割的新字符串
  • 原數(shù)組沒有發(fā)生改變
• join(拼接形式) 拼接形式可以為任何運算符號
  • 作用：數(shù)組轉(zhuǎn)字符串
  • 參數(shù)：拼接形式可以為任何運算符號
  • 返回值：以指定的拼接形式分割的新字符串
  • 原數(shù)組沒有發(fā)生改變
  • 如果拼接形式為+之類的，想實現(xiàn)運算钳踊，可以用eval()
  • eval():把字符串作為JS代碼來執(zhí)行

第四組：數(shù)組的翻轉(zhuǎn)和排序

• 數(shù)組翻轉(zhuǎn) ary.reverse()
  • 功能：數(shù)組翻轉(zhuǎn)
  • 參數(shù)：沒有
  • 返回值：被翻轉(zhuǎn)后的數(shù)組
  • 原數(shù)組發(fā)生改變
• 數(shù)組排序

ary.sort(function(a,b){
    return a-b;//從小到大排; return b-a 從大到小排
})

第五組：數(shù)組常用但不兼容的方法

• indexOf()
  • 功能：查找內(nèi)容
  • 參數(shù)：要查找的內(nèi)容
  • 返回值：如果找到衷敌，返回內(nèi)容對應(yīng)的索引/位置； 如果沒找到拓瞪，返回-1
  • 原數(shù)組不變
• forEach():遍歷數(shù)組的
  • 作用：遍歷數(shù)組的
  • 參數(shù)有兩個：1）callback 2）context：改變this指向的
  • callback中有三個參數(shù)：item,index,input
  • 返回值：undefined缴罗； 沒有返回值
  • 原數(shù)組不變
• map()：也是遍歷數(shù)組，跟forEach()功能一樣祭埂，只是forEach()沒有返回值面氓；map有返回值

Math常用的方法

• Math.round() 四舍五入
• Math.floor() 向下取整
• Math.ceil() 向上取整
• Math.abs() 絕對值
• Math.sqrt() 開平發(fā)
• Math.pow() 冪次方
• Math.max() 最大值
• Math.min() 最小值
  求n-m之間的隨機整數(shù)：Math.round(Math.random()(m-n)+n);

字符串常用的方法：

• 通過下標找對應(yīng)的字符
  • charAt() 返回指定位置的字符
  • charCodeAt() 返回在指定的位置的字符的 Unicode 編碼
• 通過字符找下標
  • 從前往后找：indexOf()
  • 從后往前找：lastIndexOf()
• 字符串截取
  • slice(n,m) 從索引n截取到索引m；不包含m;包前不包后；但是侧但，slice可以取負值
  • substr(n,m) 從索引n開始矢空，截取m個
  • substring(n,m) 從索引n截取到索引m；不包含m
• 字符串轉(zhuǎn)數(shù)組
  • split(切割形式:字符串或正則表達式) 把字符串分割為字符串數(shù)組,返回一個字符串數(shù)組
• 轉(zhuǎn)大小寫
  • toUpperCase() 把字符串轉(zhuǎn)換為大寫
  • toLowerCase() 把字符串轉(zhuǎn)換為小寫
• 跟正則配合的字符串方法
  • split() 把一個字符串分割成字符串數(shù)組
  • match() 檢查一個字符串是否匹配一個正則表達式
  • replace('a','b') 把a替換為b;替換與正則表達式匹配的子串
  • search() 檢索與正則表達式相匹配的值;找到的情況下禀横，返回對應(yīng)內(nèi)容的索引屁药；找不到的返回-1

• 其他數(shù)據(jù)類型轉(zhuǎn)為number數(shù)據(jù)類型
  • 一個嚴格轉(zhuǎn)換Number()，兩個非嚴格轉(zhuǎn)換parseInt() parseFloat()
  • 轉(zhuǎn)換失敗是NaN
  • [] 默認通過 toString() 轉(zhuǎn)成空字符串柏锄； Number("")===0
  • null默認轉(zhuǎn)為0酿箭；null+10=10; undefined+10=NaN
  • false===0; true===1
• 其他數(shù)據(jù)類型轉(zhuǎn)為布爾數(shù)據(jù)類型
  • Boolean()
    • 假："",0,NaN,null,undefined,false
    • 真：除了假都是真
  • if(一個值) 會轉(zhuǎn)成布爾
  • if(表達式/比較) 會默認轉(zhuǎn)成布爾
  • !
• 其他數(shù)據(jù)類型轉(zhuǎn)成字符串數(shù)據(jù)類型
  • 對象轉(zhuǎn)字符串：toString()
  • 數(shù)字轉(zhuǎn)字符串：""+數(shù)字
• 數(shù)據(jù)類型的比較：
  • 對象==對象 比較的是地址 []==[] false
  • 字符串==對象 轉(zhuǎn)成字符串 ""==[] true
  • 字符串==數(shù)字 轉(zhuǎn)成數(shù)字 ""==0 true
  • 字符串==布爾值 轉(zhuǎn)成數(shù)字 ""==![] true
  • 數(shù)字==對象 轉(zhuǎn)成數(shù)字 0==[]
  • 布爾值==對象 轉(zhuǎn)成數(shù)字 false==[] ![]==[]
  • 數(shù)字==布爾值 轉(zhuǎn)成數(shù)字 false==![]
  • null==undefined true
  • null===undefined false
  • NaN==NaN false ；NaN跟任何值都不相等趾娃，包括自己也不相等
• 給數(shù)組末尾增加一項
  • push()
  • ary[ary.length]=xxx;
  • ary.splice(ary.length,0,xxxx);
• 刪除數(shù)組最后一項
  • pop()
  • ary.length--; ary.length-=1; ary.length=ary.length-1;
  • ary.splice(ary.length-1,1);
• 如何實現(xiàn)克隆
  • ary.slice();/ary.slice(0)
  • ary.concat();
  • ary.splice(0) 注意：如果用splice()進行克隆缭嫡，0不能省略
  • for循環(huán)也可以實現(xiàn)；但for循環(huán)是循環(huán)抬闷，不是方法
• 定時器
  • 隔一段時間爆發(fā)一次：
    • setInterval(callback,毫秒數(shù));
    • 關(guān)閉定時器 clearInterval(定時器的名字)
  • 只爆發(fā)一次：
    • setTimeout(callback,毫秒數(shù));
    • 關(guān)閉定時器 clearTimeout(定時器的名字)
• n++ 和 ++n的區(qū)別
  • ++n 先++妇蛀，再運算；累加后的結(jié)果參與了運算
  • n++ 先運算笤成，再++评架； 累加后的結(jié)果不參與運算
• 創(chuàng)建數(shù)組的兩種方式
  • var ary=[1,2,3]; 字面量方式創(chuàng)建
  • var ary2=new Array(1,2,3); 實例創(chuàng)建

• DOM樹：由一大堆的元素和標簽組成；所以DOM就是用來操作頁面中的標簽的
• DOM中的獲取方式有以下幾種：
  • id
  • className
  • tagName
  • name
  • 可視區(qū)的寬度：document.documentElement.clientWidth||document.body.clientWidth;
  • 可視區(qū)的高度：document.documentElement.clientHeight||document.body.clientHeight;
  • querySelector() #id .class div 拿到的是一個元素
  • querySelectorAll() #id .class div 拿到的是一組元素
• 節(jié)點：

• DOM動態(tài)操作

  • 創(chuàng)建新標簽
    • document.createElement(標簽名) 創(chuàng)建
    • 克隆 obj.cloneNode(false/true);//false:只克隆表面； true:深度克隆
  • 動態(tài)插入
    • 父級.appendChild(新元素) 插入到父容器的末尾
    • 父級.insertBefore(newEle,oldEle) 插入到指定元素的前面
  • 刪除標簽
    • 父級.removeChild(獲取到的元素名)

• 屬性操作

  • . 和 []
  • attribute
    • setAttribute(屬性名籽腕，屬性值) 設(shè)置屬性
    • getAttribute(屬性名) 獲取屬性
    • removeAttribute(屬性名) 移除屬性
  • 1）通過點來設(shè)置自定義屬性嗡呼，看不到；但是通過setAttribute()可以看到节仿；
    2）通過點獲取元素身上已經(jīng)定義好的的自定義屬性晤锥，獲取不到；但是通過getAttribute()可以拿到廊宪；
    注意：用"."都用點矾瘾，用attribute，都用attribute箭启；千萬不要混搭壕翩！

• 判斷屬性是否存在的方法

  • in: "屬性名" in 對象 如果支持，返回true傅寡；不支持返回false
  • ".": 對象.屬性名 如果不支持放妈，返回undefined

• 預解釋：當前作用域下北救，在JS代碼執(zhí)行之前瀏覽器會對帶var和帶function的進行提前聲明或定義

• 帶var和帶function的聲明和定義不同：

  • 帶var的，只聲明不定義
  • 帶function芜抒，聲明+定義

• 函數(shù)定義三步驟：

  1. 開辟一個空間地址
  2. 把函數(shù)體內(nèi)所有JS代碼作為字符串放在這個空間中
  3. 把空間地址賦值給函數(shù)名=

• 函數(shù)調(diào)用四步驟：

  1. 形成一個私有作用域
  2. 形參賦值
  3. 預解釋
  4. 代碼從上到下的執(zhí)行

• 上級作用域
  上級作用域跟函數(shù)在哪里調(diào)用無關(guān)珍策，只跟函數(shù)對應(yīng)的堆內(nèi)存在哪里開辟有關(guān)

• 作用域鏈

  1. 當函數(shù)被調(diào)用的時候，會形成一個私有作用域宅倒；在這個作用域中查找是否有私有變量a
  2. 如果有私有變量a：那么整個函數(shù)體內(nèi)的所有a都是私有變量攘宙，跟外界沒有任何關(guān)系
  3. 如果沒有私有變量a：去上級作用域找，找不到拐迁，繼續(xù)往上級找蹭劈，如果找到window還沒有的話，報錯线召！

• 私有變量主要有兩種

  • 函數(shù)體內(nèi)帶var的
  • 形參

• 內(nèi)存包含：堆內(nèi)存和棧內(nèi)存
• 堆內(nèi)存：用來存放數(shù)據(jù)
  • 對象數(shù)據(jù)類型的
    • 存的是鍵值對 key=value
  • 函數(shù)數(shù)據(jù)類型的
    • 代碼字符串
• 堆內(nèi)存的釋放：
  var a=[1,2,3,4]
  釋放：a=null
• 棧內(nèi)存：本身提供了一個供JS代碼執(zhí)行的環(huán)境
  • 包含：全局作用域 和 私有作用域
• 全局作用域的形成和銷毀：
  • 形成：當一個頁面被瀏覽器加載完成的時候铺韧，全局作用域就形成了
  • 銷毀：1）關(guān)閉頁面 2）關(guān)閉瀏覽器
• 私有作用域的形成和銷毀：
  • 形成：當函數(shù)被調(diào)用的時候，會形成私有作用域
  • 銷毀：一般情況下缓淹，當函數(shù)執(zhí)行完成的時候哈打，默認就被銷毀了；但是兩種情況下不銷毀：
    • 不銷毀：當函數(shù)體內(nèi)的東西被外面的變量或者其他占用的話割卖，就不銷毀
    • 不立即銷毀：當函數(shù)執(zhí)行完成的時候前酿，會返回一個函數(shù)，被返回的函數(shù)還需要再執(zhí)行一次鹏溯；只有所有的調(diào)用都完成的時候，這個函數(shù)才能銷毀

• 預解釋無節(jié)操
  • 只對等號左邊帶var的淹仑，聲明但不定義
  • 自執(zhí)行函數(shù)不會進行預解釋丙挽，只有，執(zhí)行到他的時候匀借，聲明+定義+調(diào)用同步完成
  • 已經(jīng)聲明過的不會進行重復聲明颜阐，但會重新賦值
  • return下面的語句雖然不會執(zhí)行，但會進行預解釋
  • 函數(shù)的聲明早于變量的聲明
  • （在IE10及10以下瀏覽器下）在條件判斷語句中吓肋，無論條件是否成立凳怨，都會進行預解釋
    不要在條件判斷語句中寫函數(shù)的定義階段；否則是鬼，各大瀏覽器對其的兼容性不同

全局變量肤舞，都是window的全局屬性；
全局函數(shù)均蜜，都是window的全局方法李剖。
比如：

  setInterval()
  setTimeout()
  alert()
  confirm()

• 關(guān)于this
  • 當一個元素身上的事件被觸發(fā)的時候，會執(zhí)行一個函數(shù)囤耳，函數(shù)中的this指向當前這個元素
  • 自執(zhí)行函數(shù)中的this篙顺，永遠都是window
  • 回調(diào)函數(shù)中的this偶芍，一般都是window
    setInterval(函數(shù)名,1000) ; ary.sort(function(){}) ;
  • 當函數(shù)被調(diào)用的時候，看前面是否有"."德玫，"."前面是誰匪蟀，this就是誰
  • 當遇到call、apply宰僧、bind時材彪，以上規(guī)律失效；因為他們可以改變this指向
  • 箭頭函數(shù)中的this指向父函數(shù)中的this

• 改變this指向的函數(shù):
  • call(arg1,arg2,arg3,arg4......)
    • call的一個參數(shù)用來改變call前面的函數(shù)中的this關(guān)鍵字
    • call從第二個參數(shù)開始撒桨，相當于給call前面的函數(shù)從左往右一個個的賦值查刻；
    • call當改完this指向，傳完參數(shù)后凤类，立即執(zhí)行了
  • apply(arg1,arg2) arg2可傳可不傳
    • arg1用來改變this指向穗泵，具體跟call一樣
    • 區(qū)別：apply的第二個參數(shù)是個數(shù)組，存放所有需要給形參的值谜疤；
      雖然apply的第二個參數(shù)是個數(shù)組佃延，但是對于形參來說，也是從左往右一個個的賦值
  • bind(預處理機制)
    • bind的傳參形式跟call一樣
    • 注：bind屬于預處理機制夷磕，當調(diào)用bind的時候履肃，會返回一個已經(jīng)改好this，傳好參數(shù)的函數(shù)坐桩，你只需要在需要的時候尺棋，調(diào)用即可

• 帶var和不帶var的區(qū)別：
  • 帶var：
    1)會進行預解釋
    2）如果在全局作用域下，他就是window的全局屬性
  • 不帶var：
    1）不會進行預解釋
    2）不帶var在"賦值"的時候绵跷，相當于window添加全局屬性

面向?qū)ο?/h3>

• 對象兩大特征：屬性 和 方法

• 面向?qū)ο?oop,oo)思想的特點：

  • 封裝：對于同一個功能膘螟，只需要封裝一次，以后再使用的時候碾局，只需要調(diào)用即可荆残，無需重寫；低耦合高內(nèi)聚
  • 繼承：子類可以繼承父類的屬性和方法
  • 多態(tài)：重載 和 重寫
    • 重載：JS上沒有嚴格意義上的重載净当；但有類似重載的功能内斯，就是傳不同的參數(shù)，有不同的返回值
    • 重寫：子類可以重寫父類的屬性和方法

• 面向?qū)ο蟮乃姆N常見設(shè)計模式：

  • 單例模式
    • 把同一個對象上的屬性和方法像啼，都放在同一個命名空間
    • 單例模式的本質(zhì)：普通對象
    • 模塊化開發(fā)：對于一個復雜的大項目俘闯，可以分配給不同的工程師同步進行開發(fā)；等項目完成的時候埋合，合并即可
      • 各個模塊之間的相互調(diào)用：對象名.屬性名
      • 本模塊之間的相互調(diào)用：this.屬性名
        ** 缺點：造成大量冗余代碼**
  • 工廠模式
    • 工廠模式有3步：
      • 引進原材料 創(chuàng)建一個空對象{}
      • 加工原材料 加工對象：給對象添加屬性和方法
      • 輸出產(chǎn)品成 輸出對象： return
    • 工廠模式备徐，為了讓他長的像系統(tǒng)的類 new Array()
    • 工廠模式和構(gòu)造函數(shù)模式的區(qū)別：
      1. 在調(diào)用的時候：
         工廠模式 person()
         構(gòu)造函數(shù)模式 new Person()
      2. 在函數(shù)體內(nèi)
         工廠模式三步：1）創(chuàng)建對象 2）給對象添加屬性和方法 3）返回對象
         構(gòu)造函數(shù)模式只有一步：2）給對象添加屬性和方法 ； 第一步和第三步系統(tǒng)幫做了甚颂，系統(tǒng)提供了一個對象叫this
  • 構(gòu)造函數(shù)模式
    1.構(gòu)造函數(shù)首字母一定大寫
    2.構(gòu)造函數(shù)中放的都是私有的屬性和方法
    3.原型上放的都是公有的屬性和方法
    4.系統(tǒng)默認會創(chuàng)建一個對象蜜猾，this
    5.系統(tǒng)默認會返回一個對象 this
    6.構(gòu)造函數(shù)中的this秀菱，指向當前這個實例（構(gòu)造函數(shù)new給誰，this就指向誰）
  • 原型模式
    • 原型模式基礎(chǔ)：
      1. 每個函數(shù)數(shù)據(jù)類型(普通函數(shù)蹭睡，類)衍菱，都有一個屬性，叫做prototye肩豁，prototype是個對象
      2. prototype這個對象上脊串，天生自帶一個屬性，叫做constructor清钥，指向當前所屬類
      3. 每個對象（普通對象琼锋，實例，prototype）身上祟昭，都有一個屬性缕坎，叫做__proto__，指向當前對象所屬類的原型
    • 原型鏈：__proto__
      如果要查找 對象.屬性名 比如f1.showX
      1. 先在自己的私有作用域中查找篡悟；如果找到谜叹，那么這個屬性是私有屬性
      2. 如果沒找到，到當前實例所屬類的原型上找(f1.__proto__)搬葬，如果找到屬于公有的屬性或方法
      3. 如果沒找到荷腊，繼續(xù)通過__proto__往上找，一直找到Object.prototype上還沒有的話急凰，undefined
    • 要形成的幾個條件反射：
      1. 一看到構(gòu)造函數(shù)：存的都是私有的屬性和方法
      2. 一看到prototype：存的都是公有的屬性和方法
      3. __proto__原型鏈

• 兩大boss：Object 和Function
  1 Function 是 Object 的爹
  2 Object 是 Function 的爹
  3 Object 是 Function.prototype的爹
  4 Object.prototype 是 Function.prototype的爹

• 函數(shù)的三種角色：

  • 普通函數(shù)：形成一個私有作用域女仰，形參賦值，預解釋抡锈，代碼執(zhí)行董栽，內(nèi)存和內(nèi)存釋放,作用域鏈
  • 類：實例，prototype,constructor企孩，類匣距，原型鏈__proto__
  • 普通對象:具有普通對象的特征：屬性和方法

• 如果給原型自定義了一個對象衷恭，那么自定義的這個對象上，沒有constructor

• 屬性判斷

  • in:判斷某個屬性是否在元素上（包含了私有+公有）
  • hasOwnProperty判斷某個屬性是否為元素身上的私有屬性
    使用 obj.hasOwnProperty(屬性名)
  • 寫一個方法：判斷是否為公有屬性
    • isPrototypeOf：判斷前一個對象是否在后一個對象的原型鏈上狮斗；返回的布爾值
    • propertyIsEnumerable：他的作用跟hasOwnProperty類似推汽；返回的布爾值

• 繼承：子類繼承父類的屬性和方法

  • call繼承：子類只繼承父類私有的屬性和方法补疑；父類私有的屬性和方法，都在父類的構(gòu)造函數(shù)里
  • 拷貝繼承：私有通過call來繼承歹撒，公有通過extend() 來繼承
  • 原型繼承：
    • 私有繼承：call繼承
    • 公有繼承：父類原型上的屬性和方法莲组，只有父類中的實例可以使用
    • 子類原型可以使用父類原型上的屬性和方法；子類原型作為父類的實例

---

• 類數(shù)組轉(zhuǎn)數(shù)組
  • 類數(shù)組有兩種：
    1. arguments
    2. htmlCollection 元素集合
  • 瀏覽器異常捕獲
    try....catch(e){}...finally{..}
    平常用的暖夭，只有 try...catch...
    使用場景：只要有報錯的情況锹杈，建議用try...catch....
  • JSON: JOSN 是系統(tǒng)window的屬性
    • JSON.parse() 把JSON格式的字符串撵孤，轉(zhuǎn)成JSON格式的對象
    • JSON.stringify() 把JSON格式的對象，轉(zhuǎn)成JSON格式的字符串
      注意JSON,屬性名一定是雙引號"";屬性值竭望，如果是數(shù)字邪码，可以沒有引號
  • eval() 容易引起"注入攻擊"

---

• sort排序
  • DOM映射：html頁面中的DOM結(jié)構(gòu)，跟通過JS獲取到的元素集合htmlCollection之間咬清，存在一一對應(yīng)的關(guān)系
    • appendChild() 有類似剪切的功能
  • sort排序三步驟：
    1 類數(shù)組轉(zhuǎn)數(shù)組
    2 sort排序
    3 把排好序的內(nèi)容闭专，重新插入頁面
  • 把數(shù)據(jù)插入頁面的幾種方式
    1. 字符串拼接； _插入頁面用innerHTML
    2. 動態(tài)創(chuàng)建和插入旧烧； document.createElement() 父級.appendChild(元素)
    3. 文檔碎片：
       1）先把創(chuàng)建好的每個元素影钉，放入文檔碎片
       2）最后把文檔碎片放入父元素中
       3）釋放文檔碎片

---

• 前端往后臺的請求方式：
  1. GET 請求數(shù)據(jù)
  2. POST 發(fā)送數(shù)據(jù)
  3. DELETE 刪除數(shù)據(jù)
  4. PUT 提交數(shù)據(jù)
• 同步和異步：
  • 同步：每次只能完成一個任務(wù)，必須等這個任務(wù)完成之后掘剪，才能開始下個任務(wù)
  • 異步：當前的任務(wù)沒完成平委，不用等待，繼續(xù)開始下個任務(wù)杖小，也就是肆汹，可以多個任務(wù)并行
    • 回調(diào)異步
    • 事件
    • 定時器
    • ajax
• http響應(yīng)狀態(tài)碼
  • 2xx 成功
  • 3xx 重定向
  • 4xx 請求錯誤
    • 400 請求的參數(shù)錯誤
    • 404 文件沒找到
  • 5XX 服務(wù)器錯誤

---

• 正則(手冊:http://tool.oschina.net/uploads/apidocs/jquery/regexp.html)

  • 作用：玩字符串的
  • 定義：通過制定一系列的規(guī)則來操作(校驗/匹配、捕獲)字符串
    • 校驗： reg.test() ;/^2\d{2}/.test(xml.status);
    • 捕獲：1）str.match(reg) 2)reg.exec(str); 3)str.replace(reg);
      正則的方法： reg.test() reg.exec()
      字符串的方法：str.match() str.replace() str.split() str.search();

• 創(chuàng)建正則的方式：

  • var reg=/^2\d{2}/; 字面量的創(chuàng)建方式
  • var reg=new RegExp(); 實例創(chuàng)建

• 字面量創(chuàng)建和實例創(chuàng)建的區(qū)別：

  1. 字面量創(chuàng)建無法拼接變量予权，實例創(chuàng)建可以拼接變量
  2. 字面量創(chuàng)建不需要轉(zhuǎn)義昂勉，實例創(chuàng)建需要轉(zhuǎn)義

• 正則由元字符和修飾符兩部分構(gòu)成： var reg=/^2\d{2}/g;

  • 元字符：就是包含在兩個斜杠之間，陌生的字符
  • 修飾符：就是斜杠外面的

• 元子符包含：特殊含義的元字符和量詞元字符

  • 特殊含義的元字符：
    \ 轉(zhuǎn)義
    | 或
    () 分組
    . 除了\n以外的其他字符
    \n 換行
    \b 開頭結(jié)尾和空格
    ^ 開頭
    $ 結(jié)尾
    \s 空格 \d 數(shù)字 \w 數(shù)字扫腺，字母岗照，下劃線
    \S 非空格 \D 非數(shù)字 \W 非數(shù)字，非字母笆环，非下劃線
    [a-z] 任意一個小寫字母
    [^a-z] 除了字母以外的任何一個字符
    [abc] “a,b,c”中的任意一個字母
    [^abc] 除了“a,b,c”以外的任意一個字母
  • 量詞元字符
    • * 重復0次或多次
    • + 重復1次或多次
    • 攒至？ 0 或1,可有可無
    • {n} 正好n次
    • {n,} 最少n次；n次到多次
    • {n,m} n次到m次

• 修飾符：

  • g 全局
  • m 換行
  • i 忽略大小寫躁劣；ignore

• ()小括號的用法：

  1. 提高優(yōu)先級 /^(18|19)$/
  2. 分組的作用

• []中括號的用法：

  1. 中括號中不會出現(xiàn)兩位數(shù)
  2. 像類似于.-之類的，在中括號中都沒有特殊函數(shù)

• ?問號的作用：

  1. 可有可無
  2. 解決正則捕獲的貪婪性

• 捕獲

  • 正則中的捕獲账忘，主要講三點：
    • exec: reg.exec(str);
    • match: str.exec(reg);
    • replace:str.replace(reg,xxxxxx)
  • 正則捕獲有兩大特點：
    1. 懶惰性：
       • 解決措施:添加全局g
       • 加了全局g鳖擒，會影響lastIndex(從你找到內(nèi)容 的 下一項內(nèi)容的 索引 開始查找)
    2. 貪婪性：
       • 解決措施:在量詞元字符后面加上?
  • exec,是正則的方法溉浙，每次只能拿到一個值蒋荚；返回的結(jié)果是個數(shù)組，默認情況下期升，數(shù)組有3項：
  1. 符合大正則的內(nèi)容
  2. index:找到的內(nèi)容所對應(yīng)的索引惊奇；（位置）
  3. input:原始字符串吨铸；
     如果有小分組的情況下竭缝，小分組從數(shù)組的第二項開始；數(shù)組的長度也會因為小分組而增加
  • match：是字符串的方法，每次能到所有符合正則的內(nèi)容，并且以一個新數(shù)組的形式返回
  • exec和match的區(qū)別：
    1. exec每次只能拿到一個值就斤；match能拿到所有值，并以新數(shù)組的形式返回
    2. exec能拿到小分組刁标； match只能拿到大正則谨垃，無法拿到小分組

• replace

  • replace中的回調(diào)函數(shù)，默認接收三個參數(shù)熏版，如果有小分組挺勿，arguments的長度會擴充
  • replace回調(diào)函數(shù)中第一個參數(shù)的運用：敏感詞過濾
  • replace回調(diào)函數(shù)中第2個參數(shù)的運用:把數(shù)字作為數(shù)組的索引蚊丐，找到對應(yīng)的值

• 統(tǒng)計出現(xiàn)次數(shù)最多的單詞
  思路1：
  1） 利用對象不重名的特性
  2） 假設(shè)法
  3） 字符串拼接
  思路2：
  1）字符串排序：字符串轉(zhuǎn)數(shù)組-數(shù)組排序-數(shù)組轉(zhuǎn)字符串
  2）假設(shè)法+重復子項 /(\w)\1+/gi;

• 解析URL地址： /([^&?=]+)=([&?=]+)/g;

• 日期格式化：
  重點泥兰，字符串轉(zhuǎn)成數(shù)組削彬，三種思路：
  1）嚴格匹配雁刷；

var reg=/^(\d{4})[/-](\d{2})[/-](\d{2}) (\d{2}):(\d{2}):(\d{2})$/;
    var ary=null;
    str.replace(reg,function(){
        ary=Array.prototype.slice.call(arguments,1,arguments.length-2)
    });

2. split 切
   var ary=str.split(/[^\d]+/g);
3. match 捕獲
   var ary=str.match(/\d+/g);

• ?的用法
  1） 0或1
  2） 解決正則捕獲的貪婪性 +?
  3） 只匹配不捕獲 (?:\d+)
• 小括號的用法：
  1）分組
  2）提高優(yōu)先級
  3）只匹配不捕獲 (?:\d+)
• var reg=new RegExp();
• 在有全局g的情況下坤候，能影響lastIndex的值的屬性有兩個：
  1）reg.test()
  2. reg.exec()
• 回調(diào)函數(shù)需要注意的幾點：
  1. 回調(diào)函數(shù)被調(diào)用的次數(shù)遍蟋；比如，map中回調(diào)函數(shù)被調(diào)用的次數(shù)奢人，取決于數(shù)組的長度
  2. 回調(diào)函數(shù)是否需要傳參支救；比如贬堵，map中回調(diào)函數(shù)接收三個參數(shù)
  1. item
  2. index
  3. input

3. 回調(diào)函數(shù)中this默認指向window蒸殿，可以通過call來改變this指向
4. 回調(diào)函數(shù)是否有返回值楣铁；比如 forEach()沒有返回值溃列； map()有返回值风范，他是把每個回調(diào)函數(shù)的返回值保存在一個數(shù)組中寇漫，最后返回出map

• CSS盒子模型
  • 構(gòu)成：手動設(shè)置的寬高+padding+border+margin
• JS盒子模型
  • 主要通過元素身上提供的屬性和方法，來獲取元素身上的樣式值
• JS中盒子模型所設(shè)計的屬性和方法肛响，主要包含以下幾類：
  1. client系列：clientWidth clientHeight clientLeft clientTop
  • clientWidth／clientHeight: 手動設(shè)定的寬度／高度+左右／上下padding
  • clientLeft/clientTop: 左邊框的寬度 / 上邊框的寬度
  2. offset系列：offsetWidth offsetHeight offsetLeft offsetTop offsetParent
  • offsetWidth/offsetHeight:手動設(shè)定的寬度／高度+左右／上下padding+左右／上下的border寬度
    （clientWidth+左右border clientHeight+上下border）
  • offsetLeft/offsetTop:當前元素的外邊框距離他定位父級的內(nèi)邊框之間的距離
  • offsetParent: 定位上的父級

3. scroll系列：scrollWidth scrollHeight scrollLeft scrollTop

• scrollWidth／scrollHeight：
  • 在內(nèi)容沒有溢出的情況下角塑，
    scrollWidth/scrollHeight等于clientWidth/clientHeight;
  • 如果內(nèi)容溢出的情況下蒲列，
    scrollHeight約等于上padding+真實內(nèi)容的高度
    為什么是約等于：
    1）當內(nèi)容溢出的情況下蝗岖，不同瀏覽器拿到的值不同
    2）同一瀏覽器下抵赢，內(nèi)容是否溢出拿到的值也不同
• scrollTop:指當前頁面被瀏覽器卷去高度

• JS盒子模型遇到的問題
  1. JS盒子模型中求出來的都是四舍五入的整數(shù)瓣俯，無法拿到小數(shù) --不解決
  2. JS盒子模型中拿到的值都是復合值彩匕，無法拿到單獨的寬或高驼仪； --解決：封裝getCss
  3. 關(guān)于盒子模型的偏移量绪爸，我們只能求出當前容器的外邊框到定位父級的那邊框之間的距離奠货，無法求出當前定位元素到body的距離递惋；--解決：封裝offset
  4. 求可視區(qū)的寬高或被瀏覽器卷去的高度和寬度睛廊，太麻煩了超全；-- 封裝win

---

• 箭頭函數(shù)
  • 表達式
    1. var fn=p=>p;
    2. var fn=()=>'我沒有參數(shù)';
    3. var fn=(n,m)=>n+m;
  • 函數(shù)體
    1. var fn=p=>{return p};
    2. var fn=()=>{return '我沒有參數(shù)'};
    3. var fn=(n,m)=>{return n+m}
       注：箭頭函數(shù)中的this嘶朱，指向父函數(shù)的this
• 類的創(chuàng)建和繼承
  • 類的創(chuàng)建

class 類名{
    constructor(){//寫私有的屬性和方法
    }
    getName(){//公有的屬性和方法
    }
    static getAge(){//類的靜態(tài)方法疏遏；也是類的私有方法改览，實例不能使用
    }
}
類.xxxx=xxxx;//類的私有屬性

• 類的繼承

class S extends F{
    constructor(name,age,color){
        super(name,age);
        this.color=color;
    }
    //下面正常寫子類公有的
}

• 解構(gòu)賦值：{屬性名}=persion;//實際拿到的是對象身上該屬性名對應(yīng)的值
• let 和 const
  1. 他兩都不能進行預解釋
  2. let會形成塊級作用域
  3. const 是個常量，不能進行更改

---

• $(document).ready() 和 window.onload的區(qū)別：
  • window.onload 是等頁面所有的內(nèi)容（圖片庆揩，音頻订晌，視頻锈拨，DOM結(jié)構(gòu).....）都加載完成的時候奕枢，才執(zhí)行JS代碼
  • $(document).ready(function(){...代碼}) 只要DOM結(jié)構(gòu)加載完成，就開始執(zhí)行JS 代碼

---

• jQuery選擇器
  • 基本選擇器：
    ('#div')('.div') ('div')('.div1,.div2');
• JS和jquery只能共存谷浅，不能混淆
  • JS 轉(zhuǎn)成jquery：只需要被包裹即可一疯；(this) $(oDiv)
  • jquery轉(zhuǎn)JS: [index] get(index)
• jquery中DOM常用方法
  • append 和 appendTo
    聯(lián)系：功能相同违施，但是針對的主體不同
  • 創(chuàng)建元素 ('
    ')('<div></div>')

---

• 運動

  • show() 顯示隱藏的元素
    hide() 隱藏顯示的元素
  • slideDown() 通過使用滑動效果留潦，顯示隱藏的被選元素
    slideUp() 通過使用滑動效果兔院，隱藏被選元素坊萝，如果元素已顯示出來的話
  • fadeIn() 使用淡入效果來顯示一個隱藏的元素
    fadeOut() 使用淡出效果來隱藏一個元素
  • animate(target,time,effect,callback) 執(zhí)行 CSS 屬性集的自定義動畫
    stop() 停止當前正在運行的動畫

• ajax前后端數(shù)據(jù)交互

ajax({
     type:'get/post',
     url:'xxxx?'+Math.random()*1000000+new Date().getTime(),
     async:true/false,
     dataType:'json',//解決了jsonParse()
     data:$('form').serialize()//表單序列化：就是把前端要傳后臺的數(shù)據(jù)十偶，以k=v&k=v拼成字符串
     success:function(){//成功之后的回調(diào)
     }惦积，
     error:function(){//失敗之后的回調(diào)
     }
})

---

• 事件和事件綁定
  • 事件綁定：2個
    on(type,fn) //可以執(zhí)行多次
    one(type,fn) //只能執(zhí)行一次
  • 解除綁定
    off(type,fn);//注意：只能解除有名字的函數(shù)

---

• each和map
  • ().each() 和.each()的區(qū)別：
    • $().each() 只能遍歷jquery獲取到的元素
    • $.each() 既可以遍歷jquery元素也可以遍歷原生數(shù)組和原生對象
  • ().map() 和.map() 他們 與 each的區(qū)別
    • map的回調(diào)函數(shù)接收的參數(shù)，跟each的順序正好相反
    • map可以返回一個新的數(shù)組睦柴；而each拿到的還是原來的數(shù)組

---

• 事件
  • 鼠標事件：
    onclick ondbclick onmouseover onmouseout onmouseenter onmouseleave
  • 系統(tǒng)事件：
    onload resize onscroll
  • 鍵盤事件：
    onkeydown onkeyup onkeypress
  • 表單事件：
    onfocus onblur autofocus=true/false;
• 事件分類：DOM0級事件 和 DOM2級事件
  • DOM0級事件 和 DOM2級事件的區(qū)別：
    1. DOM0級事件：
       1）在元素的私有屬性上
       2）同一個元素，同一個行為恬试，只能綁定同一個方法训柴；如果多次綁定幻馁，后面的方法會覆蓋前面的方法
       3）只能發(fā)生在事件流的冒泡階段
    2. DOM2級事件：
       1）在元素所屬的EventTarget這個類的原型上
       2）同一個元素仗嗦，同一個行為，可以綁定多個不同的方法
       3）可以人為的控制發(fā)生事件流的哪個階段（捕獲德撬，冒泡）

---

• 標準瀏覽器下:
  addEventListener(type,fn,useCapture);

  • 解綁:
    removeEventListener(type,fn,useCapture);
    注意：所有的行為蜓洪，都不加on

• IE6-8下：
  attachEvent('on'+type,fn)

  • 解綁：
    detachEvent('on'+type,fn);
    attachEvent只能發(fā)生在冒泡階段

---

• 事件流
  • 由三部分構(gòu)成：捕獲隆檀，target事件源泉坐，冒泡
  • 由兩部分構(gòu)成：捕獲坚冀，冒泡
    注意順序：先捕獲，后冒泡
• 一個元素的層級嵌套：
  元素自己->HTMLDivElement ->HTMLElement->Element->Node->EventTarget->Object
• 事件對象
  • 事件對象的兼容處理：e=e||window.event
  • 事件源：e.target=e.target||e.srcElement;
  • 坐標：距離當前可視區(qū)左上角的坐標-兼容：e.clientX; e.clientY;
  • 坐標：距離第一屏左上角的坐標：e.pageX;e.pageY;
    不兼容：
    e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+ e.clientY;
    e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;
  • 事件類型：e.type
  • 鍵碼:e.keyCode
  • 阻止默認事件： e.preventDefault?e.preventDefault():e.returnValue=false;
  • 阻止冒泡 e.stopPropagation? e.stopPropagation():e.cancelBubble=true;
• 熟悉標準瀏覽器中的DOM2級事件綁定
  • addEventListener特點：（標準瀏覽器）
    1. 按"綁定的"先后循序執(zhí)行的
    2. this指向當前被綁定事件的這個"元素"
    3. 如果給同一個元素，同一個行為綁定多次同一個方法勾徽，實際上只執(zhí)行一次
  • attachEvent的問題：
    1. 順序不對
    2. this不對喘帚，attachEvent中的this吹由，默認指向window
    3. 如果給同一個元素，同一個行為綁定多次同一個方法乌昔，執(zhí)行的是多次磕道；也不對

---

補充

• null和undefined區(qū)別：

  1. 定義變量時：null現(xiàn)在沒有溺蕉，以后會有撵割；undefined：現(xiàn)在沒有啡彬，以后也沒有
  2. null轉(zhuǎn)為數(shù)值為0庶灿，undefined轉(zhuǎn)為數(shù)值為NaN
  3. 報錯時：undefined表示“缺少值”，即 此處應(yīng)該有一個值峻呕，但沒定義瘦癌；null表示“沒有對象”讯私，即 此處不該有值

• 性能優(yōu)化

  • 網(wǎng)頁內(nèi)容
    • 減少 http請求次數(shù)
    • 減少 DNS查詢次數(shù)
    • 避免頁面跳轉(zhuǎn)
    • 緩存 Ajax
    • 延遲加載
    • 提前加載
    • 減少 DOM元素數(shù)量
    • 避免 404
  • 服務(wù)器
    • 使用CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))
    • 添加Expires或Cache-Control報文頭
    • Gzip壓縮傳輸文件
  • CSS
    • 將樣式表置頂
    • 用代替@import
  • JavaScript
    • 把腳本置于頁面底部
    • 使用外部JavaScript和CSS
    • 精簡JavaScript和CSS
    • 去除重復腳本
    • 減少DOM訪問
  • 圖片
    • 優(yōu)化圖像
    • 優(yōu)化CSS Spirite
    • 不要在HTML中縮放圖片
    • favicon.ico要小而且可緩存

• 如何解決跨域問題
  jsonp 原理：動態(tài)插入script標簽

• JavaScript同源策略
  這里的同源策略指的是：協(xié)議，域名娘锁，端口相同。同源策略是一種安全協(xié)議馏锡，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性杯道。

• 哪些操作會造成內(nèi)存泄漏党巾？
  1驳规、內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在
  2吗购、垃圾回收器定期掃描對象捻勉，并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象）埠偿，那么該對象的內(nèi)存即可回收
  3、setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏胚吁。閉包腕扶、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時窿侈，就會產(chǎn)生一個循環(huán)）

• 事件代理（Event Delegation） 即 事件委托

• 定義：把原本需要綁定的事件委托給父元素史简，讓父元素擔當事件監(jiān)聽的職務(wù)

• 原理：DOM元素的事件冒泡

• 優(yōu)點：提高性能