1
js基礎知識
1. javascript typeof返會的數據類型有哪些
object,string,undefined,number,function,boolean
“數字”尚卫、“字符串”祠挫、“布爾值”八孝、“對象”、“函數”和“未定義”找蜜。
Object 對象或者null返回的是object,數組也返回object
-
基本數據類型：
字符串String、數字Number稳析、布爾Boolean洗做、數組Array、對象Object迈着、Null竭望、Undefined
因為NaN的數據類型就是數字，就是number裕菠；他是一個特殊的number咬清。因為在js中數據類型之間都是
可以相互轉化的，這方便了其他數據類型轉化為number(非數字轉化為number類型便是NaN)
2. 列舉三種強制類型轉換和兩種隱式類型轉換
parseInt(),parseFloat(),Number()
==,!!（各種比較和計算的運算符）
強制類型轉換是得到一個新的東西（你想轉換的類型）奴潘。
隱式類型轉換只是在運算或者比較時轉換一下（轉換成數值）旧烧，不產生新東西。
強制是我們需要它轉換 画髓，調用函數主動轉換掘剪；隱式是被動轉換，自動進行奈虾。
3. 數組相關集合
-
3.1. 創(chuàng)建數組方法
var array = new Array()
var array = []
Array.of(1,2) //[1,2]
這是es6新增的一個Array方法夺谁，創(chuàng)建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型肉微。
Array.of()方法用于將一組值匾鸥，轉換為數組。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
這個方法的主要目的碉纳，是彌補數組構造函數Array()的不足勿负。因為參數個數的不同，會導致Array()的
行為有差異劳曹。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
上面代碼中奴愉，Array方法沒有參數琅摩、一個參數、三個參數時锭硼，返回結果都不一樣房资。只有當參數個數不少
于 2 個時，Array()才會返回由參數組成的新數組账忘。參數個數只有一個時志膀，實際上是指定數組的長度
。
4. 判斷是否為數組的方法
console.log(arr instanceof Array)
instanceof 是一個二元運算符鳖擒，左邊操作數是一個對象溉浙，不是的話返回false，右邊操作數是一個
函數對象或者函數構造器蒋荚，不是的話返回false戳稽。原理是通過判斷左操作數的對象的原型鏈上是否
具有右操作數的構造函數的prototype屬性。
JavaScript中的雙目判斷運算符期升，a instanceOf b ,判斷a的構造器是否為b（其實只要a與b在一個
原型鏈中就會返回true惊奇，具體請參考：javaaceipt原型鏈相關內容）。
console.log(arr.constructor === Array)
constructor屬性的值是一個函數對象播赁，而且函數指向的正式構造函數(即創(chuàng)建該對象的那個函數)
颂郎，所以可以這樣判斷某個對象是否是某個構造函數的實例。但是對象的constructor屬性可以被改
寫容为，改寫后用改方法判斷就不行了
console.log(Array.isArray(arr))
Array.isArray(obj);ES5出的一個API乓序，專門用來判斷一個對象是不是數組的
5. pop(),push(),unshift(),shift()
pop()刪除并返回數組最后一個元素
push()向數組末尾添加一個或多個元素，并返回數組新長度
unshift()向數組的開頭添加一個或多個元素坎背，并返回數組新長度
shift()刪除并返回數組的第一個元素
6. DOM0 DOM2
-
dom0級
不支持添加多個事件替劈，后面的會覆蓋前面的
無法取消
var btn = document.getElementById("button");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
} //只彈出2
-
dom2
可以添加多個事件
不兼容低版本IE
IE8以及更早版本不支持DOM事件流
event.stopPropagation()阻止事件的進一步傳播。
stopImmediatePropagation()不僅阻止事件的傳播得滤，還阻止該元素上綁定的其他函數的執(zhí)行
支持事件冒泡陨献，事件捕獲
var btn = document.getElementById("button");
btn.addEventListener("click",function(){
alert("1");
})
btn.addEventListener("click",function(){
alert("2");
}) //先彈出1，再彈出2
w3c標準來說懂更，并沒有0級ｄｏｍ的標準眨业。只不過，事實上的適用總會成慢慢成為約定成俗的規(guī)
則沮协。所謂的0級ｄｏｍ與２級ｄｏｍ事件就是不同版本間的差異坛猪，具體的說就是，對于不同的DOM
級別皂股，如何定義事件處理，以及使用時有什么不同命黔。
DOM0就是直接通過 onclick寫在html里面的事件, 比如:
<input onclick="alert(1)" />
DOM2是通過addEventListener綁定的事件, 還有IE下的DOM2事件通過attachEvent綁定;
DOM3是一些新的事件, 區(qū)別DOM3和DOM2的方法我感覺是DOM3事件有分大小寫的,DOM2沒有;
0級DOM
主要分為2個：
一是在標簽內寫onclick事件
二是在JS寫onlicke=function（）{}函數
1）
<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >
2）
document.getElementById("myButton").onclick = function () {
alert('thanks');
}
-----------------------------------------------------------------------------------------------
2級DOM–(為什么沒有1級DOM)
DOM級別1于1998年10月1日成為W3C推薦標準呜呐。1級DOM標準中并沒有定義事件相關的內容就斤，所以沒有所
謂的1級DOM事件模型。在2級DOM中除了定義了一些DOM相關的操作之外還定義了一個事件模型 蘑辑，這個標
準下的事件模型就是我們所說的2級DOM事件模型
2級DOM只有一個：
監(jiān)聽方法洋机，有兩個方法用來添加和移除事件處理程序：addEventListener()和removeEventListener()。
它們都有三個參數：第一個參數是事件名（如click）洋魂；
第二個參數是事件處理程序函數绷旗；
第三個參數如果是true則表示在捕獲階段調用，為false表示在冒泡階段調用副砍。
addEventListener():可以為元素添加多個事件處理程序衔肢，觸發(fā)時會按照添加順序依次調用。
removeEventListener():不能移除匿名添加的函數豁翎。
document.getElementById(“myTest”).attachEvent(“onclick”, function(){alert(1)});
//等價于
document.getElementById(“myTest”).addEventListener(“click”, function(){alert(1)}, false);
只有2級DOM包含3個事件：事件捕獲階段角骤、處于目標階段和事件冒泡階段
點擊a后capturing(捕捉)階段事件傳播會從document-> span->a，然后發(fā)生在a心剥，最后bubbling(冒泡)階段事件傳播會從a->span->document 邦尊。
1.事件冒泡（常用）
IE中采用的事件流是事件冒泡，先從具體的接收元素优烧，然后逐步向上傳播到不具體的元素 蝉揍。
2.事件捕獲（少用）
Netscapte采用事件捕獲，先由不具體的元素接收事件畦娄，最具體的節(jié)點最后才接收到事件又沾。
3.DOM事件流
7. IE和DOM事件流的區(qū)別
- 1.執(zhí)行順序不一樣
事件流的區(qū)別
IE采用冒泡型事件 Netscape使用捕獲型事件 DOM使用先捕獲后冒泡型事件
示例：
<body>
<div>
<button>點擊這里</button>
</div>
</body>
冒泡型事件模型： button->div->body (IE事件流)
捕獲型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕獲后冒泡)
2.參數不一樣 低版本ie沒有回調函數，只能進行冒泡
3.第一個參數是否加"on",低版本IE不支持addEventListener(),支持attachEvent,第一個參數需要加"on"
element.addEventListener('click', observer, useCapture);
addEventListener方法接受三個參數纷责。第一個參數是事件名稱捍掺，值得注意的是，這里事件名稱與IE
的不同再膳，事件名稱是沒’on’開頭的;第二個參數observer是回調處理函數;第三個參數注明該處理回調
函數是在事件傳遞過程中的捕獲階段被調用還是冒泡階段被調用
2.事件偵聽函數的區(qū)別
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //綁定函數
[Object].detachEvent("name_of_event_handler", fnHandler); //移除綁定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //綁定函數
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除綁定
bCapture參數用于設置事件綁定的階段挺勿，true為捕獲階段，false為冒泡階段喂柒。
- 4.this指向問題不瓶，IE指向windows,不指向觸發(fā)的函數
還有一點要注意的是：元素點擊里面的this有問題哦, 在IE8和和IE8以前, 通過attachEvent綁定的事件里面的this是window;
element.attachEvent('onclick', observer);
attachEvent接受兩個參數。第一個參數是事件名稱灾杰，第二個參數observer是回調處理函數蚊丐。這里得
說明一下，有個經常會出錯的地方艳吠，IE下利用attachEvent注冊的處理函數調用時this指向不再是先
前注冊事件的元素麦备，這時的this為window對象了
8. IE標準下有哪些兼容性寫法
var ev = ev||window.event//獲得event對象兼容性寫法
以上第一個ev是變量。
ev是事件的參數！在ev中包含了事件觸發(fā)時的參數凛篙，比如click事件的ev中包含著.e.pageX,e.pageY,
keydown事件中包含著ev.keyCode等黍匾，在ie中，ev是全局的可以通過window.event來獲取呛梆，在其他瀏
覽器中都是作為參數傳入的锐涯。
ev儲存著事件明細（位置、時間填物，鍵盤狀態(tài)纹腌、元素等），以及影響后續(xù)的事件流向和結果
（stoppropagation,prevenrdefault 等）
obj.onclick = function(ev) { ...}該事件的回調函數是function（ev）滞磺，這個ev是用來捕捉事件對象的升薯。
在IE/Opera中，是window.event雁刷，而在Firefox中覆劈，是event
而事件的對象，在IE中是window.event.srcElement沛励，在Firefox中是event.target责语，而在Opera中則
兩者都支持。
你想像一下, 如果一個鍵盤事件想對 Enter 和 E 和 Ctrl+Enter 進行不同的處理, 你能怎樣知道按下的
是那一個? 靠的就是事件參數了目派±ず颍滑鼠等亦然。
document.documentElement.clientWidth||document.body.clientWidth
1企蹭、當文檔有了標準聲明白筹，IE6在頁面內容超出窗口大小時將寬度屬性scrollWidth、clientWidth谅摄、offsetWidth
都解釋為內容實際寬度徒河。比如我們用document.body.clientHeight原本想取得“頁面可見區(qū)域高度”，可實際上返
回的是“頁面實際內容高度”送漠。這時顽照，我們可以用document.documentElement代替document.body來獲取我們想要
的結果，將代碼中的document.body替換為document.documentElement闽寡，再來看看各瀏覽器下的實際結果：
ii 測試結果表明代兵，IE系列瀏覽器對document.documentElement屬性的解釋是正確的，其它標準瀏覽器將offsetHeight
解釋成 了scrollHeight爷狈≈灿埃火狐和netscape更是把這兩個屬性調換了過來。不過總的來說各屬性都可以有個相應的解釋涎永。
2思币、文檔有了標準聲明時鹿响，用document.body.scrollTop會失效，總顯示為0支救，使用document.documentElement.scrollTop
抢野，才會獲得正確的值。相反各墨，如果不做標準聲明的話，document.documentElement.scrollTop反而會顯示為0启涯。
var target = ev.srcElement||ev.target//獲得target兼容型寫法
IE瀏覽器支持window.event.srcElement 贬堵， 而firefox支持window.event.target；
event.srcElement(獲得觸發(fā)事件的元素（IE 瀏覽器不支持）结洼。)從字面上可以看出來有以下關鍵字：
事件,源 他的意思就是：當前事件的源黎做， 我們可以調用他的各種屬性 就像:document.getElementById("")
這樣的功能， 經常有人問 firefox 下的 event.srcElement 怎么用松忍，在此詳細說明： [IE]下,event
對象有srcElement屬性,但是沒有target屬性;Firefox下,event對象有target屬性,但是沒有srcElement
屬性.但他們的作用是相當的蒸殿，即： firefox 下的 event.target = IE 下的 event.srcElement
Event 對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素鸣峭、鍵盤按鍵的狀態(tài)宏所、鼠標的位置、鼠標按鈕的狀態(tài)摊溶。
文檔document爬骤，元素element，屬性attribute莫换，事件event霞玄。
獲得需要的文檔，元素拉岁，屬性坷剧，然后利用event操控它們。
9. call apply bind
改變this的指向喊暖，
call函數的功能就是把當前的this指向作為函數來執(zhí)行惫企，并且該函數的this指向傳入call的參數
call 和 apply 都是為了改變某個函數運行時的上下文（context）而存在的，換句話說哄啄，就是為了改變函數體內部 this 的指向雅任。
JavaScript 的一大特點是，函數存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念咨跌。
var Pet = {
words : '...',
speak : function (say) {
console.log(say + ''+ this.words)
}
}
Pet.speak('Speak'); // 結果：Speak...
var Dog = {
words:'Wang'
} //將this的指向改變成了Dog
Pet.speak.call(Dog, 'Speak'); //Pet.speak('Speak')結果： SpeakWang
this 指向所屬的對象
這里的this指向必須是引用類型沪么。
如果this被強行改變?yōu)橹殿愋停敲茨軌蜣D為對應包裝類型的都會轉锌半，不能轉的 指向window
設置方法的調用對象(方法的this)時用;
需要注意的是兩者傳參方式不同：
call()：參數直接傳入
apply()：數組格式傳入
其中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是立即執(zhí)行函數
call調用apply應用，都是為了使用其他函數或對象的方法碗硬，立即執(zhí)行瓤湘。bind（綁定，結合）稍后調用恩尾。
當你的參數是明確知道數量時用 call 弛说。而不確定的時候用 apply，然后把參數 push 進數組傳遞進去翰意。
當參數數量不確定時木人，函數內部也可以通過 arguments 這個數組來遍歷所有的參數。
10. b繼承a的方法（js面向對象復習）
原型鏈繼承
實現的本質是重寫原型對象冀偶，代之以一個新類型的實例醒第。
構造函數繼承
- 借用構造函數繼承
用.call()和.apply()將父類構造函數引入子類函數（在子類函數中做了父類函數的自執(zhí)行（復制））
實例繼承
- 原型式繼承
Objcet.create()；兩個參數：一個用作新對象原型的對象蔫磨，一個為新對象定義額外屬性的對象（可選）淘讥。
相當于下面的函數function object(o){
function F(){}
F.prototype = o;
return new F();
}
組合繼承
結合了兩種模式的優(yōu)點，傳參和復用。
實現的本質：把實例函數都放在原型對象上，以實現函數復用檬姥。同時還要保留借用構造函數方式的優(yōu)點岩遗。
（使用原型鏈實現對原型屬性和方法的繼承（一般不在原型上寫引用屬性），而通過借用構造函數來實
現對實例屬性的繼承）。即在原型上定義方法實現了函數復用，又能保證每個實例都有它自己的屬性。
注：組合繼承需要修復構造函數的指向抵赢。因為重寫了原型對象Sub.prototype，這里
Sub.prototype.constructor便指向了構造函數Super唧取，需要修復Ｇ稹！枫弟！
拷貝繼承
- 寄生式繼承
實現的本質： 給原型式繼承穿了個馬甲而已邢享，看起來比較像繼承。同樣是基于某個對象或某個信息創(chuàng)建
一個對象淡诗，然后增強對象骇塘，最后返回對象伊履。
優(yōu)缺點：
同原型式繼承。
寄生組合繼承（最優(yōu)）
function inheritPrototype(subType,superType) {
var prototype = Object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}//等于是創(chuàng)建一份superType的原型的副本款违，為副本添加constructor屬性唐瀑，然后把副本賦值給到subType的原型。而不是像這樣SubType.prototype = new SuperType();
//SubType.prototype.constructor = SubType;調用
優(yōu)點：同組合繼承插爹。但解決了組合繼承的缺點哄辣，只調用了一次父類構造函數，避免了在子類構造函數的
原型上創(chuàng)建不必要的赠尾、多余的屬性柔滔。
缺點：理論上沒有。
有缺陷的寄生式繼承 + 不完美的組合繼承 = 完美的寄生組合式繼承
對象冒充
這里存在一個弊端萍虽，如果存在兩個類 ClassX 和 ClassY 具有同名的屬性或方法，ClassY 具有高優(yōu)先級形真。因為它從后面的類繼承杉编。除這點小問題之外，用對象冒充實現多重繼承機制輕而易舉咆霜。
_proto_指向prototype
用構造方法創(chuàng)建一個新的對象之后邓馒，這個對象中默認會有一個不可訪問的屬性 [[prototype]] (也
就是_proto_), 這個屬性就指向了構造方法的原型對象。
在訪問屬性和方法的時候蛾坯，查找的順序是這樣的：對象->原型->原型的原型->…->原型鏈的頂端光酣。
就像一個鏈條一樣，這樣由原型連成的”鏈條”脉课，就是我們經常所說的原型鏈救军。
組合模式和動態(tài)原型模式是JavaScript中使用比較多的兩種創(chuàng)建對象的方式。
建議以后使用動態(tài)原型模式倘零。他解決了組合模式的封裝不徹底的缺點唱遭。
11. 如何阻止事件冒泡和默認事件
JS阻止事件冒泡的3種方法之間的不同
https://www.cnblogs.com/julin-peng/p/3991522.html
cancelBubble(IE),
IE中的方法，和e.stopPropagation()差不多
event.stopPropagation()
event.stopPropagation();可以阻止捕獲和冒泡階段中當前事件的進一步傳播呈驶。（防止冒泡和捕獲）
根據DOM事件的機制拷泽，在當前元素上觸發(fā)的大多數事件都會冒泡傳遞到該元素的所有祖輩元素上，如果
不在這些祖輩元素上相應的阻止事件袖瞻，那么在祖輩元素上也會觸發(fā)這些事件司致，通過event.stopPropa
gation()的阻止，事件則不會傳播到任何的祖輩元素上去聋迎。
return false,
javascript的return false只會阻止默認行為脂矫，而是用jQuery的話則既阻止默認行為又防止對象冒泡。(0級DOM有效)
event.preventDefault,
event.preventDefault()可以取消默認事件砌庄。（2級DOM有效）
同時阻止事件冒泡和默認行為羹唠。
可以在事件處理函數中返回false奕枢。
這是對事件對象同時調用stopPropagation()方法和preventDefault()方法的一種簡寫方式。
12. 添加 刪除 替換 插入到某個接點的方法
obj.appendChild()
obj.insertBefore()
obj.replace()
obj.remove()
appendChild() 方法向節(jié)點添加最后一個子節(jié)點佩微。
insertBefore() 方法在您指定的已有子節(jié)點之前插入新的子節(jié)點缝彬。
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串哺眯。
* 參數 描述
regexp/substr谷浅；必需。規(guī)定子字符串或要替換的模式的 RegExp 對象奶卓。
請注意一疯，如果該值是一個字符串，則將它作為要檢索的直接量文本模式夺姑，而不是首先被轉換
為 RegExp 對象墩邀。
replacement；必需盏浙。一個字符串值眉睹。規(guī)定了替換文本或生成替換文本的函數。
remove() 方法用于從下拉列表select刪除選項废膘。
13. window.onload和$(document).ready的區(qū)別
window.onload需要等所有文件都加載完才開始加載竹海，$(document).ready只需等文檔結構加載完了就開始加載
所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題丐黄，可以使用 Jquery 中另一個關于頁面加載的方法 ---load() 方法斋配。 Load() 方法會在元素的 onload 事件中綁定一個處理函數。如果處理函數綁定給 window 對象灌闺，則會在所有內容 ( 包括窗口艰争、框架、對象和圖像等 ) 加載完畢后觸發(fā)菩鲜，如果處理函數綁定在元素上园细，則會在元素的內容加載完畢后觸發(fā)。
Jquery 代碼如下：
$(window).load(function (){
// 編寫代碼
});等價于 JavaScript 中的以下代碼
Window.onload = function (){
// 編寫代碼
}
14. == 和 === 區(qū)別
前者會自動轉換類型
后者不會
15. javascript的同源策略（跨域問題）
跨域是什么：實際上就是一個網站不能執(zhí)行其他網站上的網址接校，是由瀏覽器同源策略造成的猛频，是瀏覽器對js施加的安全限制
所謂同源，實際上是指域名蛛勉，協議鹿寻，端口都相同
也就是說當，域名或者協議诽凌，或者端口不同的時候毡熏，就是跨域，
-
15.1. 解決方法：
jsonp
json with padding,是一種json的一種使用模式
產生的原因侣诵，ajax不支持跨域痢法，由于瀏覽器的同源策略狱窘，但是script的src支持跨域
主要的原理是動態(tài)創(chuàng)建一個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');//允許訪問的方式
16. javascript是一種什么樣的語言
解釋性腳本語言，代碼不進行預編譯
主要用來向HTML頁面添加交互行為
可以直接嵌入HTML頁面躲胳，但單獨寫成js文件,有利于結構和行為的分離
跨平臺性摇天，在絕大多數瀏覽器支持下粹湃，可以在多種平臺下運行泉坐，linux,windows
17. javascript基本數據類型和引用數據類型
基本類型 undefind null number string boolean
基本類型的值是不能改變的
基本類型不能添加屬性和方法
基本類型的比較是值的比較
基本類型變量存放在棧區(qū)（棧內存）
也就是說基本類型在賦值操作后为鳄，兩個變量是相互不受影響的偏形。
引用類型 object Function Array
引用類型可以添加屬性和方法萨惑，屬性方法內又可以添加基本類型
引用類型的值是可變的
引用類型的值時同時保存在棧內存和堆內存里的對象倾鲫，準確地說行冰，引用類型的存儲需要內存的棧區(qū)和堆區(qū)（堆區(qū)是指內存里的堆內存）共同完成，棧區(qū)內存保存變量標識符和指向堆內存中該對象的指針旺遮，
引用類型的比較是引用的比較 引用類型時按引用訪問的，換句話說就是比較兩個對象的堆內存中的地址是否相同娘锁，那很明顯用狱，person1和person2在堆內存中地址是不同的
引用類型的賦值其實是對象保存在棧區(qū)地址指針的賦值，因此兩個變量指向同一個對象吻氧，任何的操作都會相互影響
18. js原生不要與jq搞混
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"
19. DOM,BOM
javascript由ECMAScript,DOM,BOM三部分組成，
ECMAScript也是一種語言医男，也就是對規(guī)定的語法，操作捻勉，關鍵字镀梭，語句等的一個描述，javascript實現了ECMAScript
DOM是文檔對象模型踱启，包括了獲取元素报账，修改樣式，操作元素三方面內容埠偿，也是我們進行最多的操作透罢，有很多兼容性寫法
BOM是瀏覽器對象模型，包括瀏覽器的一些操作冠蒋，window.onload,window.open等還有瀏覽器事件羽圃，監(jiān)聽窗口的改變onresize,監(jiān)聽滾動事件onscroll等
20. null和undefind的區(qū)別
null是表示一個空的對象，轉為數值為0抖剿，undefind表示一個空的原始值朽寞，轉為數值為NAN
undefind指本該有一個值识窿，但卻并有定義，null表示沒有對象脑融，不應該有值
21. XML和JSON的區(qū)別
JSON相對于XML來講傳遞速度更快喻频，因為光看代碼量就能看出
JSON與js的交互更容易，解析更方便
22. 實現多個標簽之間的通信
調用sessionStorage,localStorage,cookies等本地存儲進行存儲相關信息
三者的共同點：都保存在瀏覽器肘迎。
三者的區(qū)別：
與服務器的交互
cookie數據始終在同源的http請求中攜帶（即使不需要）甥温，即cookie在瀏覽器和服務器間來回傳遞。
而sessionStorage和localStorage不會自動把數據發(fā)給服務器妓布，僅在本地保存姻蚓。cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下秋茫。
存儲大小限制也不同史简，
cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie肛著，所以cookie只適合保存很小的數據圆兵，如會話標識。
sessionStorage和localStorage 雖然也有存儲大小的限制枢贿，但比cookie大得多殉农，可以達到5M或更大。
數據有效期不同局荚，
sessionStorage：僅在當前瀏覽器窗口關閉前有效超凳，自然也就不可能持久保持；
localStorage：始終有效耀态，窗口或瀏覽器關閉也一直保存轮傍，因此用作持久數據；
cookie只在設置的cookie過期時間之前一直有效首装，即使窗口或瀏覽器關閉创夜。
作用域不同，
sessionStorage不在不同的瀏覽器窗口中共享仙逻，即使是同一個頁面驰吓；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的系奉。
23. 哪些操作會造成內存泄露
內存泄露是指一塊被分配的內存既不能使用檬贰，又不能回收，直到瀏覽器進程結束缺亮。
內存泄露指任何對象在不再擁有或不再需要它之后依然存在
setTimeout第一個參數是字符串而不是函數的時候就會造成內存泄露
閉包
控制臺日志
循環(huán)（兩個對象彼此引用且彼此保留）
24. js垃圾回收方式
標記清除：這是js最常用的垃圾回收方法翁涤，當一個變量進入執(zhí)行環(huán)境時，例如函數中聲明一個變量，將其標記為進入環(huán)境迷雪，當變量離開環(huán)境時限书，（函數執(zhí)行結束），標記為離開環(huán)境
引用計數: 跟蹤記錄每個值被引用的次數章咧，聲明一個變量倦西，并將引用 類型賦值給這個變量，則這個值的引用次數+1赁严，當變量的值變成了另一個扰柠，則這個值的引用次數-1，當值的引用次數為0的時候疼约，就回收
25. 閉包
閉包的最大用處有兩個：一個是可以讀取函數內部的變量卤档，另一個就是讓這些變量的值始終保持在內存中。
函數嵌套函數
子級函數調用父級函數的參數或變量
經典閉包
function outer(){
var a = 1;
function inner(){
alert(a);
}
return inner
}
var inn = outer();
inn();
點擊li返回li下標
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var oUL = document.getElementById("test");
var oLi = oUl.getElementByTagName("li");
for(var i=0;i<oLi.length;i++){
oLi[i].index = i;
oLi[i].onclick = function(){
alert(this.index);
}
}
</script>
<script>
var oUL = document.getElementById("test");
var oLi = oUl.getElementByTagName("li");
for(var i=0;i<oLi.length;i++){
oLi[i].index = i;
oLi[i].onclick = (function(a){
return function(){
alert a;
}
})(i)
}
</script>
26. this指向問題
普通函數調用程剥，指向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對象
27. 高階函數
函數作為參數傳遞稳诚，
函數作為返回值輸出
28. new操作符到底干了什么
創(chuàng)建一個新對象
將構造函數的作用域賦值給新對象（所以this指向了這個新對象）
執(zhí)行構造函數的代碼（為這個新對象添加屬性）
返會新對象
29. js嚴格模式
"use strict"
消除js一些不合理的用法
消除代碼運行的一些不安全之處
增加運行速度
為未來新版本js做鋪墊
變量必須聲明
對象不能出現重復屬性名
arguments改變，不會影響函數參數
eval瀑踢，arguments變?yōu)殛P鍵字扳还，不能作為變量名
不允許使用with
不用call，apply橱夭，bind改變this指向氨距，一般函數調用指向null
30. 事件代理事件委托
原理是使用dom的冒泡，將事件綁定到父元素上棘劣，讓父元素進行監(jiān)聽俏让，提高性能
31.什么是版本控制，
版本控制是一種記錄一個或若干文件內容變化呈础，以便將來查閱修改以及更新。
32.ajax請求
ajax請求四步
創(chuàng)建一個xhr對象 var xhr = new XmlHttpRequest()
判斷就緒狀態(tài)為4時執(zhí)行代碼
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log(responseText);
}
}
創(chuàng)建請求 xhr.open('get','url',true)
發(fā)送請求 xhr.send(null)
33.在瀏覽器中輸入URL到整個頁面顯示在用戶面前時這個過程中到底發(fā)生了什么
DNS解析
TCP連接
發(fā)送HTTP請求
服務器處理請求并返回HTTP報文
瀏覽器解析渲染頁面
連接結束
詳細：
首先根據url中的域名橱健，在遠程服務器中查詢對應
34.ajax和json
ajax用于web頁面中實現異步數據交互而钞，實現頁面局部內容刷新
優(yōu)點：能夠進行內容局部加載刷新，減少帶寬拘荡，避免用戶不斷刷新以及頁面跳轉臼节，提高用戶體驗
缺點：對搜索引擎不友好；瀏覽器不支持ajax的后退；
json是一種請求輕量級的數據交互格式
優(yōu)點：輕量級网缝，編譯人的閱讀理解巨税，便于機器解析
35.http考點
常用的HTTP方法有哪些
GET:
POST:
PUT:
DELETE:
GET與POST方法的區(qū)別
get主要是從服務器獲取資源，post主要是像服務器發(fā)送數據
get傳輸數據通過url請求粉臊，利用k=v的形式放在url后面草添，用?連接，多個用&連接而post是存放在扼仲，ajax中的data中的远寸，get傳輸的過程使用戶可見 的，而post是對用戶不可見的屠凶。
get傳輸的數據量小驰后，以為受url的長度限制，但是效率高矗愧，post能上傳的數據量大
post較get更安全一些
get方式傳遞的中文字符可能會亂碼灶芝，post支持標準字符集，可以正確傳遞中文字符
http請求報文與響應報文格式
請求報文包含三部分：
請求行：包含請求方法唉韭、URI夜涕、http版本信息
請求首部字段
請求內容實體
響應報文包含三部分：
狀態(tài)行：包含HTTP版本、狀態(tài)碼纽哥、狀態(tài)碼的原因短語
響應首部字段
響應內容實體
http狀態(tài)碼
100-199：成功接收請求钠乏，但需要進行下一步請求
200-299：成功接收請求，并完成整個處理過程
300-399：為完成全部請求春塌，客戶需近一步細化需求
400-499：客戶端請求有錯誤晓避，包括語法錯誤或不能正常執(zhí)行
500-599：服務器端出現錯誤
http缺點與https
通信使用明文不加密，內容可能被竊聽
不驗證通信方身份只壳，可能遭到偽裝
無法驗證報文完整性俏拱，可能被篡改
https就是加上加密處理（一般是SSL安全通信線路）+認證+完整性保護
常用：
200 正常，表示一切正常吼句，返會的是正常請求結果
302/307 臨時重定向锅必，表示請求的文檔，已被臨時移動到別處
304 未修改惕艳，調用緩存的數據
403 服務器拒絕客戶請求
404 服務器不存在客戶想要找的資源
500 服務器內部錯誤
36.數組去重的一種相對好理解的方法
利用indexOf方法的去重
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置搞隐。
var arr = [1,1,2,3,4,2,6,4,5,7];
var nArr = [];
function removeItem(arr){
for(var i=0;i<arr.length;i++){
if(nArr.indexOf(arr[i])==-1){
nArr.push(arr[i]);
}
}
return nArr;
}
console.log(removeItem(arr));
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(箭頭函數)
除了書寫簡潔了很多伺绽，最大的優(yōu)點是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是一種自動化構建工具躲因，前端工程化開發(fā)的一種工具，增強開發(fā)流程
使用方便忌傻，npm安裝大脉，新建gulpfile.js,導入gulp模塊，let gulp = require('gulp')
通過default任務去定義工作流
最后在終端執(zhí)行gulp來進行自動化操作
api很簡單只有四種
gulp.task 創(chuàng)建任務 ：參數任務名稱水孩，前置任務數組镰矿，回調函數
gulp.src 尋找文件：通過路徑找到一個或多個文件
gulp.dest 輸出到指定目錄：如果沒有就新建一個
gulp.watch 監(jiān)聽文件變化，執(zhí)行任務
pipe具體不清楚荷愕，總之衡怀，除了gulp.src之外，其他執(zhí)行條件都要放在.pipe()中
Bootstrap
Bootstrap和Foundation的比較
UI元素的不同
Bootstrap給出了能想到的一切元素安疗，也就是試圖提供所有定義好的UI抛杨，比如一個導航，給予一個默認導航的樣式
Foundation只給定了限定的幾種元素荐类，可以自己自定義怖现，更適合創(chuàng)造
尺寸單位不一樣，
Bootstrap是px
Foundation是rem
網格布局有所不同
Foundation 的網格可以自動適配當前瀏覽器的寬度玉罐，Foundation 則會靈活適配當前的瀏覽器寬度, 這是一種新的技術手段, 自動適配的同時, 可以表現的與 Transformer 一樣的效果.
Boostrap 則是預定義了幾種網格尺寸來適配主流的設備和屏幕.Bootstrap 會在你改變?yōu)g覽器寬度的時候突然改變它的網格.
移動設備
Foundation移動設備優(yōu)先
Bootstrap也支持移動設備
社區(qū)
Bootstrap有一個完備的社區(qū),有什么問題幾乎都可以迅速解決
Foundation則沒有屈嗤，需要自力更生
