摘要：相當于繞過了瀏覽器端，自然就不存在跨域問題。三者的區別與服務器的交互數據始終在同源的請求中攜帶即使不需要，即在瀏覽器和服務器間來回傳遞。而和不會自動把數據發給服務器，僅在本地保存。和雖然也有存儲大小的限制，但比大得多，可以達到或更大。

本文提供最簡便的解答方式，方便快速記憶，復盤，詳細答案可自己再搜一下。

object,string,undefined,number,function,boolean

基本數據類型：
string,number,boolean,undefined,null

parseInt(),parseFloat(),Number()
==,!!

var array = new Array()
var array = []

Array.of(1,2) //[1,2]
這是es6新增的一個Array方法，創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。
（感謝 haru 的寶貴建議）

console.log(arr instanceof Array)

console.log(arr.construct === Array)

console.log(Array.isArray(arr))

pop()尾部刪除

push()尾部插入

unshift()頭部插入

shift()頭部刪除

dom0級

不支持添加多個事件，后面的會覆蓋前面的

無法取消

var btn = document.getElementById("button");
btn.onclick = function(){
    alert(1);
}
btn.onclick = function(){
    alert(2);
}       //只彈出2

dom2

可以添加多個事件

不兼容低版本IE

支持事件冒泡，事件捕獲

var btn = document.getElementById("button");
btn.addEventListener("click",function(){
    alert("1");
})
btn.addEventListener("click",function(){
    alert("2");
})              //先彈出1，再彈出2

執行順序不一樣

參數不一樣 低版本ie沒有回調函數，只能進行冒泡

第一個參數是否加"on",低版本IE不支持addEventListener(),支持attachEvent,第一個參數需要加"on"

this指向問題，IE指向windows,不指向觸發的函數

var ev = ev||window.event

document.documentElement.clientWidth||document.body.clientWidth

var target = ev.srcElement||ev.target

改變this的指向，
其中call的寫法

function add(a,b)  
{  
    alert(a+b);  
}  
function sub(a,b)  
{  
    alert(a-b);  
}  
  
add.call(sub,3,1);   

這個例子中的意思就是用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運行結果為：alert(4); // 注意：js 中的函數其實是對象，函數名是對 Function 對象的引用。
apply寫法

function add(a,b)  
{  
    alert(a+b);  
}  
function sub(a,b)  
{  
    alert(a-b);  
}  
add.apply(sub,[4,2]);　

不同就在于第二個參數，apply寫成數組

bind寫法

function add(a,b)  
{  
    alert(a+b);  
}  
function sub(a,b)  
{  
    alert(a-b);  
}  
add.bind(sub,4,2)();　

bind是返回了一個改變上下文的一個函數，可以稍后調用，而apply，call是立即執行函數

原型鏈繼承

構造函數繼承

實例繼承

組合繼承

拷貝繼承

寄生組合繼承

cancelBubble(IE),

return false,

event.preventDefault,

event.stopPropagation()

obj.appendChild()

obj.insertBefore()

obj.replace()

obj.remove()

window.onload只能出現一次，$(document).ready能出現多次

window.onload需要等所有文件都加載完才開始加載，$(document).ready只需等文檔結構加載完了就開始加載

前者會自動轉換類型
后者不會

跨域是什么：實際上就是一個網站不能執行其他網站上的網址，是由瀏覽器同源策略造成的，是瀏覽器對js施加的安全限制
所謂同源，實際上是指域名，協議，端口都相同
也就是說當，域名或者協議，或者端口不同的時候，就是跨域，

jsonp

json with padding,是一種json的一種使用模式
產生的原因，ajax不支持跨域，由于瀏覽器的同源策略，但是script的src支持跨域
主要的原理是動態創建一個script標簽的，通過src調用服務器提供的js腳本，該腳本的內容是一個函數調用，該函數在本地js文件中進行定義，其中的參數就是，本地函數請求的數據，也就是服務器所將返回的數據

與ajax的不同，ajax是通過xhr獲取非本頁面的數據內容，而jsonp獲取的是服務器提供js腳本

代理

例如www.123.com/index.html需要調用

www.456.com/server.php，可以寫一個接口

www.123.com/server.php，由這個接口在后端去調用

www.456.com/server.php并拿到返回值，然后再返回給 index.html，這就是一個代理的模式。相當于繞過了瀏覽器端，自然就不存在跨域問題。

PHP端修改header（XHR2方式）
在php接口腳本中加入以下兩句即可：
header("Access-Control-Allow-Origin:*");//允許所有來源訪問
header("Access-Control-Allow-Method:POST,GET");//允許訪問的方式

解釋性腳本語言，代碼不進行預編譯

主要用來向HTML頁面添加交互行為

可以直接嵌入HTML頁面，但多帶帶寫成js文件有利于結構和行為的分離

跨平臺性，在絕大多數瀏覽器支持下，可以在多種平臺下運行，linux,windows

基本類型 undefind null number string boolean

基本類型的值是不能改變的

基本類型不能添加屬性和方法

基本類型的比較是值的比較

基本類型變量存放在棧區（棧內存）

也就是說基本類型在賦值操作后，兩個變量是相互不受影響的。

引用類型 object Function Array

引用類型可以添加屬性和方法，屬性方法內又可以添加基本類型

引用類型的值是可變的

引用類型的值時同時保存在棧內存和堆內存里的對象，準確地說，引用類型的存儲需要內存的棧區和堆區（堆區是指內存里的堆內存）共同完成，棧區內存保存變量標識符和指向堆內存中該對象的指針，

引用類型的比較是引用的比較 引用類型時按引用訪問的，換句話說就是比較兩個對象的堆內存中的地址是否相同，那很明顯，person1和person2在堆內存中地址是不同的

引用類型的賦值其實是對象保存在棧區地址指針的賦值，因此兩個變量指向同一個對象，任何的操作都會相互影響

document.getELementById("ID").value

獲取值的時候原生不是方法，不帶括號

獲取所有checkbox

var boxs =document.getELementsByTagName("input");
var boxArray = [];
var len = boxs.length;
while(len--){
    if(boxs[len].type == "checkbox"){
        boxArray.push(boxs[len]);
    }
}

設置div html內容以及設置樣式

var dom = document.getElementById("ID");
dom.innerHTML = "xxxx"
dom.style.color="#000"

javascript由ECMAScript,DOM,BOM三部分組成，

ECMAScript也是一種語言，也就是對規定的語法，操作，關鍵字，語句等的一個描述，javascript實現了ECMAScript

DOM是文檔對象模型，包括了獲取元素，修改樣式，操作元素三方面內容，也是我們進行最多的操作，有很多兼容性寫法

BOM是瀏覽器對象模型，包括瀏覽器的一些操作，window.onload,window.open等還有瀏覽器事件，監聽窗口的改變onresize,監聽滾動事件onscroll等

null是表示一個空的對象，轉為數值為0，undefind表示一個空的原始值，轉為數值為NAN

undefind指本該有一個值，但卻并有定義，null表示沒有對象，不應該有值

JSON相對于XML來講傳遞速度更快，因為光看代碼量就能看出

JSON與js的交互更容易，解析更方便

調用localStorage,cookies等本地存儲進行存儲相關信息
三者的共同點：都保存在瀏覽器。
三者的區別：

與服務器的交互

cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。

而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。

存儲大小限制也不同，

cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

數據有效期不同，

sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；

localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；

cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。

作用域不同，

sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；

localStorage 在所有同源窗口中都是共享的；

cookie也是在所有同源窗口中都是共享的。

內存泄露指任何對象在不再擁有或不再需要它之后依然存在

setTimeout第一個參數是字符串而不是函數的時候就會造成內存泄露

閉包

控制臺日志

循環（兩個對象彼此引用且彼此保留）

標記清除：這是js最常用的垃圾回收方法，當一個變量進入執行環境時，例如函數中聲明一個變量，將其標記為進入環境，當變量離開環境時，（函數執行結束），標記為離開環境

引用計數: 跟蹤記錄每個值被引用的次數，聲明一個變量，并將引用 類型賦值給這個變量，則這個值的引用次數+1，當變量的值變成了另一個，則這個值的引用次數-1，當值的引用次數為0的時候，就回收

函數嵌套函數

子級函數調用父級函數的參數或變量

經典閉包

function outer(){
    var a = 1;
    function inner(){
        alert(a);
    }
    return inner
}
var inn = outer();
inn();

點擊li返回li下標

    
1
    
2
    
3

普通函數調用，指向windows

window.value=1;
function getValue(){
 console.log(this.value);
}
getValue();//輸出1，此時的this指向window

對象的方法調用，指向對象

var Obj={
  value:2,
  getValue:function(){
       console.log(this.value);//輸出2,this指向Obj
  }   
}

構造器方法調用，指向構造函數實例出來的對象

function main(val){
  this.value=val;
}
main.prototype.getValue=function(){
  console.log(this.value);
}

var fun=new main(3);
fun.getValue();
fun.value;//輸出3，this指向main的實例對象fun

call,apply,bind可以自定義this指向第一個參數

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
showValue.call(obj)//輸出4，this指向了obj對象

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
var showValue2=showValue.bind(obj);
showValue2()//輸出4，this指向了obj對象

函數作為參數傳遞，

函數作為返回值輸出

創建一個新對象

將構造函數的作用域賦值給新對象（所以this指向了這個新對象）

執行構造函數的代碼（為這個新對象添加屬性）

返會新對象

"use strict"
消除js一些不合理的用法
消除代碼運行的一些不安全之處
增加運行速度
為未來新版本js做鋪墊

變量必須聲明

對象不能出現重復屬性名

arguments改變，不會影響函數參數

eval，arguments變為關鍵字，不能作為變量名

不允許使用with

不用call，apply，bind改變this指向，一般函數調用指向null

原理是使用dom的冒泡，將事件綁定到父元素上，讓父元素進行監聽，提高性能

版本控制是一種記錄一個或若干文件內容變化，以便將來查閱修改以及更新。

ajax請求四步

創建一個xhr對象 var xhr = new XmlHttpRequest()

判斷就緒狀態為4時執行代碼

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        console.log(responseText);
    }
}

創建請求 xhr.open("get","url",true)

發送請求 xhr.send(null)

DNS解析

TCP連接

發送HTTP請求

服務器處理請求并返回HTTP報文

瀏覽器解析渲染頁面

連接結束

首先根據url中的域名，在遠程服務器中查詢對應

ajax用于web頁面中實現異步數據交互，實現頁面局部內容刷新

優點：能夠進行內容局部加載刷新，減少帶寬，避免用戶不斷刷新以及頁面跳轉，提高用戶體驗

缺點：對搜索引擎不友好；瀏覽器不支持ajax的后退；

json是一種請求輕量級的數據交互格式

優點：輕量級，便于人的閱讀理解，便于機器解析

GET:
POST:
PUT:
DELETE:

get主要是從服務器獲取資源，post主要是像服務器發送數據

get傳輸數據通過url請求，利用k=v的形式放在url后面，用?連接，多個用&連接而post是存放在，ajax中的data中的，get傳輸的過程使用戶可見 的，而post是對用戶不可見的。

get傳輸的數據量小，因為受url的長度限制，但是效率高，post能上傳的數據量大

post較get更安全一些

get方式傳遞的中文字符可能會亂碼，post支持標準字符集，可以正確傳遞中文字符

請求報文包含三部分：

請求行：包含請求方法、URI、http版本信息

請求首部字段

請求內容實體

響應報文包含三部分：

狀態行：包含HTTP版本、狀態碼、狀態碼的原因短語

響應首部字段

響應內容實體

100-199：成功接收請求，但需要進行下一步請求

200-299：成功接收請求，并完成整個處理過程

300-399：為完成全部請求，客戶需近一步細化需求

400-499：客戶端請求有錯誤，包括語法錯誤或不能正常執行

500-599：服務器端出現錯誤

通信使用明文不加密，內容可能被竊聽

不驗證通信方身份，可能遭到偽裝

無法驗證報文完整性，可能被篡改

https就是加上加密處理（一般是SSL安全通信線路）+認證+完整性保護

常用：

200 正常，表示一切正常，返會的是正常請求結果

302/307 臨時重定向，表示請求的文檔，已被臨時移動到別處

304 未修改，調用緩存的數據

403 服務器拒絕客戶請求

404 服務器不存在客戶想要找的資源

500 服務器內部錯誤

利用indexOf方法的去重

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

var arr = [1,1,2,3,4,2,6,4,5,7];
var nArr = [];
function removeItem(arr){
    for(var i=0;i
es6
let const

let相當于給js新增了塊級作用域，聲明的變量只在let命令所在的代碼塊內有效
const也是聲明變量，它聲明的變量，不能改變，可以用來聲明第三方庫變量的應用

class extends super

class定義一個類，其中有一個construct方法，construct方法中的this代表實例對象，construct以外還有其他的方法，construct內定義的方法屬性是實例對象自己的，construct外的方法屬性是所有實例對象共享的
class之間可以通過extends實現繼承
super指代父類的實例，子類construct中必須先調用super()方法，因為子類沒有自己的this對象，是繼承父類的this對象

arrow function(箭頭函數)
除了書寫簡潔了很多，最大的優點是this指向，使用箭頭函數，函數內部的this就是定義時所在的對象。箭頭函數根本沒有自己的this，this是繼承外面的，它內部的this就是外層代碼塊的this
template string(模板字符串)
ajax調用數據庫，需要向文檔中插入大段html的時候，傳統的字符串拼接太麻煩，引入模板工具庫會稍微好點，不過還是沒有es6的template string簡單，可以直接用反單引號包括代碼塊``,用${}來引用變量，所有的空格縮進都會保留到輸出中
destructuring(解構賦值)
es6按照一定模式，從數組和對象中提取值，對變量進行賦值，這就成為解構，也就是說，運用es5的方法，數組和對象中的變量需要，一個個進行賦值，而es6可以一步到位
default,rest(默認值，擴展語法)
當函數忘記傳參的時候，給它一個默認值，傳統方法是在函數中運用||，es6可以直接在參數中寫上
function animal(type){
    type = type || "cat"  
    console.log(type)
}
animal()
function animal(type = "cat"){
    console.log(type)
}
animal()
function animals(...types){
    console.log(types)
}
animals("cat", "dog", "fish") //["cat", "dog", "fish"]
gulp
gulp是一種自動化構建工具，前端工程化開發的一種工具，增強開發流程
使用方便，npm安裝，新建gulpfile.js,導入gulp模塊，let gulp = require("gulp")
通過default任務去定義工作流
最后在終端執行gulp來進行自動化操作
api很簡單只有四種

gulp.task 創建任務 ：參數任務名稱，前置任務數組，回調函數
gulp.src  尋找文件：通過路徑找到一個或多個文件
gulp.dest 輸出到指定目錄：如果沒有就新建一個
gulp.watch 監聽文件變化，執行任務
pipe具體不清楚，總之，除了gulp.src之外，其他執行條件都要放在.pipe()中

Bootstrap
Bootstrap和Foundation的比較
UI元素的不同

Bootstrap給出了能想到的一切元素，也就是試圖提供所有定義好的UI，比如一個導航，給予一個默認導航的樣式
Foundation只給定了限定的幾種元素，可以自己自定義，更適合創造

尺寸單位不一樣，

Bootstrap是px
Foundation是rem

網格布局有所不同

Foundation 的網格可以自動適配當前瀏覽器的寬度，Foundation 則會靈活適配當前的瀏覽器寬度, 這是一種新的技術手段, 自動適配的同時, 可以表現的與 Transformer 一樣的效果.
Boostrap 則是預定義了幾種網格尺寸來適配主流的設備和屏幕.Bootstrap 會在你改變瀏覽器寬度的時候突然改變它的網格.

移動設備

Foundation移動設備優先
Bootstrap也支持移動設備

社區

Bootstrap有一個完備的社區,有什么問題幾乎都可以迅速解決
Foundation則沒有，需要自力更生