前端面試題彙總 2018/12/04
阿新 • • 發佈：2018-12-04
盒模型
標準盒模型：由裡向外content,padding,border,margin IE怪異和模型：寬高是內容(content)+填充(padding)+邊框(border)的總寬高 通過JS獲取盒模型對應的寬和高，有以下幾種方法： 為了方便書寫，以下用dom來表示獲取的HTML的節點。 1. dom.style.width/height 這種方式只能取到dom元素內聯樣式所設定的寬高，也就是說如果該節點的樣式是在style標籤中或外聯的CSS檔案中設定的話，通過這種方法是獲取不到dom的寬高的。 2. dom.currentStyle.width/height 這種方式獲取的是在頁面渲染完成後的結果，就是說不管是哪種方式設定的樣式，都能獲取到。 但這種方式只有IE瀏覽器支援。 3. window.getComputedStyle(dom).width/height 這種方式的原理和2是一樣的，這個可以相容更多的瀏覽器，通用性好一些。 4. dom.getBoundingClientRect().width/height 這種方式是根據元素在視窗中的絕對位置來獲取寬高的 5.dom.offsetWidth/offsetHeight 這個就沒什麼好說的了，最常用的，也是相容最好的。
彈性佈局的使用
① 給父容器新增display: flex/inline-flex;屬性，即可使容器內容採用彈性佈局顯示，而不遵循常規文件流的顯示方式；
② 容器新增彈性佈局後，僅僅是容器內容採用彈性佈局，而容器自身在文件流中的定位方式依然遵循常規文件流；
③ display:flex; 容器新增彈性佈局後，顯示為塊級元素；
display:inline-flex; 容器新增彈性佈局後，顯示為行級元素；
④ 設為 Flex佈局後，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。
行快標籤
一、塊級標籤 1.獨佔一行，不和其他元素待在同一行 2.能設定寬高 常見的塊級標籤：div, p, h1-h6, ul, li, dl, dt, dd 二、行級標籤 1.能和其他元素待在同一行 2.不能設定寬高 常見的行級標籤：a， span, strong, u, em--> 三、行內塊標籤 1.能和其他元素待在一行 2.能設定寬高 常見的行內塊標籤：img, input, textarea
空標籤
沒有閉合標籤的標籤被稱作為空標籤。
常見的有
<input /> <img /> <area /> <col /> <link /> <bgsound /> <base /> JQuery版本區別
1.3一般功能夠 1.4.2一般功能夠而且穩定 1.7+比較新特性 2不支援老IE 相容的話最好選 1.x。穩定性就用1.7或者1.4，其中1.4的體積相對小 另外更加情況選用1系列還是2系列，2系列不支援ie6，7，8 常用1.4和1.7 詳細資訊自己看 https://www.cnblogs.com/vivijiang/p/6121003.html
Js基本型別，怎麼檢測型別
應用資料型別 Array Object function
基本資料型別 number String null undefined Boolean
檢測方法：
1.typeof 返回型別
console.log(typeof "");
console.log(typeof 1);
2.instanceof 返回1或0 不考慮null undefined
console.log("1" instanceof String);
console.log(1 instanceof Number);
3.constructor 返回1 或0
console.log(("1").constructor === String);
console.log((1).constructor === Number);
4.Object.prototype.toString.call() 返回 [object +具體型別]
var a = Object.prototype.toString;
console.log(a.call("aaa"));
console.log(a.call(1));巧用 localStorage 實現跨瀏覽器tab頁互動
跨瀏覽器tab頁的互動，比如說一個網站有一個模組是通過超連結_blank在一個新tab頁開啟，但是這是點選新tab頁的內容需要網站也有反應，這時就可以運用localStorage。只要是同一個域名下就都能訪問到。
新tab頁裡的表格有個點選事件，點選完後網站頁彈出這行的資訊。可以這樣操作：
//表格點選事件回撥
function clkTb(row) {
localStorage.setItem('curRowId', row.id);//前面是鍵，後面是值
}
//網站頁接收
$(function() {
window.addEventListener('storage', function(ev) {
console.log(ev);//在這裡可以找到你剛剛設定的值。
})
})
Commonjs require.js 區別
https://blog.csdn.net/crystal6918/article/details/74906757/
冒泡捕獲
事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。繫結事件方法的第三個引數，就是控制事件觸發順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。預設false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡，意思就是到我為止，我的爹和祖宗的事件就不要觸發了。Vue相關問題？
http://www.cnblogs.com/Renyi-Fan/p/9419742.html
h5如何做瀏覽器適配
1、viewport 簡單粗暴的方式
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
2、ip6+ 的CSS media query
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ /*iphone 6*/ }
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ /*iphone 6 plus*/ }
3、REM佈局
REM是CSS3新增的一種單位，並且移動端的支援度很高，android2.x+，ios5+都支援。REM是相對於dom結構的根元素來設定大小，也就是html這個元素。相較於em單位，rem使用上更容易理解及運用。
4、百分比佈局--面臨圖片自適應
剛說完REM佈局，那麼用百分比佈局也能實現一樣的效果，但是用百分比佈局，必須要面臨一個問題：圖片寬度100%，頁面載入時會存在高度塌陷的問題。
那麼可以用padding-top設定百分比值來實現自適應。
公式如下：
padding-top = (Image Height / Image Width) * 100%
原理：padding-top值為百分比時，取值是是相對於寬度的。
5、移動端適配解決方案-remVuex怎麼用?
https://www.cnblogs.com/liningstyle/p/8335129.html
閉包？應用場景
https://blog.csdn.net/qq_21132509/article/details/80694517
setTimeout callback 封裝變數 為節點迴圈繫結click事件
原型 原型鏈
https://www.cnblogs.com/shuiyi/p/5305435.html
Webpack打包流程
https://www.jianshu.com/p/b47616a75f82
面向物件
https://www.cnblogs.com/chiangchou/p/js-oop1.html
跨域
https://www.cnblogs.com/heson/p/10015794.html
未知寬高元素水平垂直居中方法
https://www.cnblogs.com/heson/p/10019794.html
window.onload和$.ready區別
$(document).ready:是DOM結構繪製完畢後就執行，不必等到載入完畢。 意思就是DOM樹載入完畢，就執行，不必等到頁面中圖片或其他外部檔案都載入完畢。並且可以寫多個.ready。
window.onload:是頁面所有元素都載入完畢，包括圖片等所有元素。只能執行一次。
所以，$(document).ready的執行時間要早於window.onload。並且可以寫多個AJAX get() 和 post() 方法
https://www.cnblogs.com/heson/p/10014471.html
session,cookie,sessionStorage,localStorage的區別及應用場景
https://www.cnblogs.com/heson/p/10029857.html
深拷貝和淺拷貝
https://www.cnblogs.com/echolun/p/7889848.html
H5的新標籤有哪些 連結裡有相容情況
https://blog.csdn.net/a772116804/article/details/80625385
ES的新特性
去部落格看 https://www.cnblogs.com/heson/default.html?page=2
陣列去重的方法
1.最基本的去重方法
思路：定義一個新陣列，並存放原陣列的第一個元素，然後將元素組一一和新陣列的元素對比，若不同則存放在新陣列中。
function unique(arr){
var res = [arr[0]];
for(var i=1;i<arr.length;i++){
var repeat = false;
for(var j=0;j<res.length;j++){
if(arr[i] == res[j]){
repeat = true;
break;
}
}
if(!repeat){
res.push(arr[i]);
}
}
return res;
}
2.先排序在去重
思路：先將原陣列排序，在與相鄰的進行比較，如果不同則存入新陣列
function unique(arr){
var arr2 = arr.sort();
var res = [arr2[0]];
for(var i=1;i<arr2.length;i++){
if(arr2[i] !== res[res.length-1]){
res.push(arr2[i]);
}
}
return res;
}
3.利用物件的屬性去重（推薦）
思路：每次取出原陣列的元素，然後再物件中訪問這個屬性，如果存在就說明重複
function unique(arr){
var res =[];
var json = {};
for(var i=0;i<arr.length;i++){
if(!json[arr[i]]){
res.push(arr[i]);
json[arr[i]] = 1;
}
}
return res;
}
4.利用下標查詢
function unique(arr){
var newArr = [arr[0]];
for(var i=1;i<arr.length;i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
return newArr;
}排序演算法
https://www.cnblogs.com/onepixel/articles/7674659.html
REST ful
REST ful
Representational State Transfer，翻譯是”表現層狀態轉化”。
面向資源是REST最明顯的特徵，對於同一個資源的一組不同的操作。資源是伺服器上一個可命名的抽象概念，資源是以名詞為核心來組織的，首先關注的是名詞。REST要求，必須通過統一的介面來對資源執行各種操作。對於每個資源只能執行一組有限的操作。（7個HTTP方法：GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS）