js常见的面试题
css 選擇符有哪些
通配選擇符 *
類選擇符 class
id選擇符 id
屬性選擇符 input[name=button]
包含選擇符 類似 div span
子對象選擇符 類似 div > span
apply() 和 call()的區(qū)別? ==和===的區(qū)別? null和undefined的區(qū)別
apply和call參數(shù)不同 call可以傳多個參 apply只能傳二個參
雙等號只要值相等就為真
三等號 值和類型必須都相同才為真
null 指向了一個空的對象 可以看做一個空指針 不占用內(nèi)存
undefined 當聲明一個未初始化的變量的時候 值為undefined 會占用內(nèi)存 只不過值為undefined
js的事件模型有哪些
dom0事件模型? 原始事件模型
dom2事件模型? 分為三個階段? 目標階段、捕獲階段、冒泡階段?? ?
dom3事件模型? 只不過是在原來的事件上增加了一些事件類型
簡述異步編程模式
對于在瀏覽器中頻繁操作會阻礙瀏覽器的響應(yīng)速度 通過異步編程的模式可以加快瀏覽器的響應(yīng)速度 這種模式被稱為異步編程
（實現(xiàn)異步編程的有好多 譬如ajax、promise、deffer等都是采用異步編程來實現(xiàn)的）
for for in? for of之間的區(qū)別
其實三者的區(qū)別并不大 都是用來遍歷數(shù)組或者對象的? 只不過實現(xiàn)方式不同
for in 是以key -value的形式實現(xiàn)的
for of 是以iterator的形式實現(xiàn)的
深拷貝和淺拷貝的實現(xiàn)
//淺拷貝 function extendCopy(p){var c = {};for(var i in p){c[i] = p[i];}return c;} //深拷貝 function deepCopy(p,c){var c = c || {};for(var i in p){if(typeof p[i] === "object"){c[i] = (p[i].constructor == Array) ? [] : {};deepCopy(p[i],c[i]);}else{c[i] = p[i];}}return c;}排序
//這里只使用冒泡排序作為例子 var arr = [2,1,4,7];for(var i = 0;i<arr.length;i++){for(var j = 0;j<arr.length-1-i;j++){var temp;if(arr[j]>arr[j+1]){temp = arr[j+1];arr[j+1] = arr[j];arr[j] = temp;}}}數(shù)組去重
//這里只用一種方式來實現(xiàn) 還有好多方法大家自己去看吧 function duplicateArr(arr){var temp = [];for(var i = 0;i<arr.length;i++){if(arr.indexOf(arr[i]) == i){temp.push(arr[i]);}}return temp;}html和html5的區(qū)別
1.文檔聲明不同
2.結(jié)構(gòu)語義化不同
?
?document.write和innerHTML的區(qū)別
?
1.write是DOM方法,向文檔寫入HTML表達式或JavaScript代碼，可列出多個參數(shù)，參數(shù)被順序添加到文檔中 ；innerHTML是DOM屬性,設(shè)置或返回調(diào)用元素開始結(jié)束標簽之間的HTML元素。
2.兩者都可向頁面輸出內(nèi)容,innerHTML比document.write更靈活。
當文檔加載時調(diào)用document.write直接向頁面輸出內(nèi)容，文檔加載結(jié)束后調(diào)用document.write輸出內(nèi)容會重寫整個頁面。通常按照兩種的方式使用 write() 方法：一是在使用該方在文檔中輸出 HTML，二是在調(diào)用該方法的的窗口之外的窗口、框架中產(chǎn)生新文檔（務(wù)必使用close關(guān)閉文檔）。
在讀模式下，innerHTML屬性返回與調(diào)用元素的所有子節(jié)點對應(yīng)的HTML標記，在寫模式下，innerHTML會根據(jù)指定的值創(chuàng)建新的DOM樹替換調(diào)用元素原先的所有子節(jié)點。
3.兩者都可動態(tài)包含外部資源如JavaScript文件
通過document.write插入<script>元素會自動執(zhí)行其中的腳本；
大多數(shù)瀏覽器中，通過innerHTML插入<script>元素并不會執(zhí)行其中的腳本。
而且document.write 有個最大的缺點就是會阻塞瀏覽器的解析和渲染速度（因為docume.write 在全局是同步的并且瀏覽器是無法預(yù)加載的）
請試運行下面的例子就可以看到結(jié)果了：
?
<script>document.addEventListener("DOMContentLoaded", function(){alert("執(zhí)行異步渲染、綁定事件等操作")})document.write("<script src=http://www.twitter.com><\/script>")</script>?
?
?
?
var let const的區(qū)別:
1.var 可以掛載到window對象上 其它二個不會
var a = 100; console.log(a,window.a); // 100 100 let b = 10; console.log(b,window.b); // 10 undefined const c = 1; console.log(c,window.c); // 1 undefined2.var 有變量提升的概念?? let 和const沒有
console.log(a); // undefined ===> a已聲明還沒賦值，默認得到undefined值var a = 100; console.log(b); // 報錯：b is not defined ===> 找不到b這個變量 let b = 10; console.log(c); // 報錯：c is not defined ===> 找不到c這個變量 const c = 10;3.let 和const 會形成塊級作用域? 只能夠在if代碼塊中訪問到let聲明的變量
if(1){var a = 100;let b = 10; }console.log(a); // 100 console.log(b) // 報錯：b is not defined ===> 找不到b這個變量4.同一作用域下let和const不能聲明同名變量，而var可以
var a = 100; console.log(a); // 100var a = 10; console.log(a); // 10 let a = 100; let a = 10;// 控制臺報錯：Identifier 'a' has already been declared ===> 標識符a已經(jīng)被聲明了。5.const
/* * 1、一旦聲明必須賦值,不能使用null占位。 * * 2、聲明后不能再修改 * * 3、如果聲明的是復(fù)合類型數(shù)據(jù)，可以修改其屬性 * * */const a = 100; const list = []; list[0] = 10; console.log(list); // [10] const obj = {a:100}; obj.name = 'apple'; obj.a = 10000; console.log(obj); // {a:10000,name:'apple'}?6.var 會涉及到一個層級的查找? 如果函數(shù)內(nèi)部 不帶var 關(guān)鍵字創(chuàng)建一個同名的變量的話 會層級查找 直到 windows對象上 才結(jié)束查找
var a = 100;function aa(){a = 10;console.log(a); //10 }aa();console.log(a);//10 var a = 100;function aa(){//如果帶var 關(guān)鍵字的話就是一個全局變量和一個局部變量var a = 10;console.log(a);// 10}aa();console.log(a); //100?
js宏任務(wù)和微任務(wù)的概念
setTimeout(function(){console.log(4);})new Promise(function(resolve,reject){resolve();console.log(1);}).then(function(){console.log(2);})console.log(3); //具體的思路請看鏈接 點擊打開鏈接 // 1 3 2 4?
簡述打開瀏覽器輸入地址到頁面展示的流程
1、當我們在瀏覽器的地址欄出輸入一個地址 瀏覽器開始向地址所在的服務(wù)器發(fā)送http請求 緊接著 對應(yīng)的服務(wù)器會響應(yīng)瀏覽器的請求
2、瀏覽器解析、下載、呈現(xiàn)
瀏覽器是從上到下解析html文檔的 先解析文檔的聲明? 如果頭部有js css等會先下載 加載這些文件 （js 圖片 css等都會向服務(wù)器發(fā)送請求 下載資源）
等到解析到body節(jié)點時? 會創(chuàng)建 dom節(jié)點樹 =》創(chuàng)建css rules=》將之前下載下來的css文件作用到dom節(jié)點樹上 形成dom渲染樹=》 然后在通知瀏覽器去繪制dom渲染樹 =》最后形成真實dom呈現(xiàn)給用戶。
以上過程會涉及到css 和 js的阻塞 阻塞是怎么產(chǎn)生的呢？
js 阻塞
當把js放到header里面的話 會先下載并執(zhí)行js的操作? 但這樣一來會阻塞其他資源的下載 而后面dom的呈現(xiàn)也會受到影響
?css阻塞
CSS本來是可以并行下載的，在什么情況下會出現(xiàn)阻塞加載了(在測試觀察中，IE6下CSS都是阻塞加載）
?
當CSS后面跟著嵌入的JS的時候，該CSS就會出現(xiàn)阻塞后面資源下載的情況。而當把嵌入JS放到CSS前面，就不會出現(xiàn)阻塞的情況了。
根本原因：因為瀏覽器會維持html中css和js的順序，樣式表必須在嵌入的JS執(zhí)行前先加載、解析完。而嵌入的JS會阻塞后面的資源加載，所以就會出現(xiàn)上面CSS阻塞下載的情況。
?
怎么加載js才不會對用戶的呈現(xiàn)出現(xiàn)問題 （有阻塞解決這個問題）
1、放在底部，雖然放在底部照樣會阻塞所有呈現(xiàn)，但不會阻塞資源下載。
2、如果嵌入JS放在head中，請把嵌入JS放在CSS頭部。
3、ie使用defer屬性? w3c 使用async
4、不要在嵌入的JS中調(diào)用運行時間較長的函數(shù)，如果一定要用，可以用`setTimeout`來調(diào)用
?
Javascript無阻塞加載具體方式 （無阻塞解決這個問題）
1、ie使用defer屬性? w3c 使用async （這二種需要高瀏覽器支持）
2、利用js動態(tài)創(chuàng)建script標簽 將它掛載到頭部
3、利用事件監(jiān)聽 dom是否加載完畢 然后在下載js
<script>var script=document.createElement("script");script.type="text/javascript";script.src="file.js";document.getElementsByTagName("head")[0].appendChild(script); </script>?
這里相當于給head下面插入了一個script的標簽。當script.src所對應(yīng)的文件下載以后，再往后執(zhí)行。
此技術(shù)的重點在于：無論何時啟動、下載和運行都不會阻塞頁面中其他部分的解析和呈現(xiàn)
數(shù)據(jù)的可變性和不可變性
所謂可變和不可變就是 直接改變數(shù)據(jù)和間接改變數(shù)據(jù)
直接改變數(shù)據(jù)對于復(fù)雜的特性不易于實現(xiàn) 譬如 追蹤數(shù)據(jù)的歷史記錄 整個對象樹都需要從新遍歷一次
而間接改變數(shù)據(jù)只要發(fā)現(xiàn)對象變成了一個新對象 我們就可以說這個對象發(fā)生改變了
簡述react
react是JavaScript的一種第三方框架庫 react最顯著的語法就是函數(shù)和jsx
jsx是JavaScript是一種表達式 可以作為變量賦值 也可以作為參數(shù)傳入 還可以作為函數(shù)返回
多個jsx組合成react元素 react元素組合形成組件 然后通過reactDOM渲染成dom結(jié)構(gòu)
react元素與瀏覽器的dom元素不同? react元素是創(chuàng)建開銷極小的普通對象 reactDOM會負責更新dom于react元素保持一致
（很晚了后續(xù)在補充。。。）
轉(zhuǎn)載于:https://www.cnblogs.com/nianzhilian/p/10146911.html
總結(jié)
- 上一篇： 浅谈vue,小程序，react基础绑定值
- 下一篇： linux 系统管理(二) 磁盘分区