總結一些關於前端面試的知識點1
最近準備去面試了，總結一下知識點吧，不當之處請指出。祝大家前程似錦，廢話不多說上東西。
1.HTML CSS JS的基礎知識 1.1 什麼是DOM DOM是一套對文件的內容進行抽象和概念化的方法。 ——《JavaScript DOM 程式設計方法》 JS操作HTML的介面 ——自己總結的不當之處請指出
1.2 CSS層疊性的問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> #bgColor{ background-color: black; } .bgColor{ background-color: aqua; } div{ background-color: blue; } .bgColorI{ background-color: blueviolet !important; } </style> <body> <div id="bgColor" class="bgColor bgColorI" style="height:50px;width:50px;background-color: brown"></div> </body> </html>
層疊順序是 !important>>>>>行內式>#ID>.Class>Tag 。組合的寫法也可以按照這個權重進行推算。
1.3 CSS中的水平居中，垂直居中問題
1.水平居中 text-align:center; margin:0 auto; 元素絕對定位left:50%;margin-left:-元素width的一半 2.垂直居中 line-height:元素的高度; 元素絕對定位top:50%;margin-top:-元素height的一半 vertical-align:middle; 3.銀彈:flex佈局 //一些低版本的瀏覽器不支援 這些方法有一些使用的細節，程式碼我就不貼了，可以自行搜尋
1.4如何清除浮動 偽元素清除浮動,說一種就應該就夠了
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
1.5 JS中如何判斷一個屬性在例項中還是在原型鏈中 利用hasOwnProperty這個方法返回的一個布林值 // 在自身例項中返回true,在原型中返回false,都不在也返回false
function Text(name,age){ this.name = name; this.age = age; } Text.prototype.work = function(a){ return a; } var a = new Text(1,2); function ispro(obj,pro){ if(pro in obj){ return (obj.hasOwnProperty(pro)); }else{ console.log('原型例項中都不存在'); return false; } } console.log(ispro(a,'work'));//false 在原型中 console.log(ispro(a,'name'));//true 在例項中 console.log(ispro(a,'age'));//true 在例項中 console.log(ispro(a,'bbb'));//例項和原型鏈中都不存在 false
1.6 JS中閉包的作用 1.訪問區域性變數
function fn(){
var a = 9999;
}
console.log(a); //a is not defined
fn();
function fn1(){
var a = 9999;
console.log(a) // 9999
}
fn1();
2.讓區域性變數儲存起來，使用不當的閉包會引起記憶體洩漏
function fn(){
var a = 1;
return function(){
console.log(a);
a++;
return a;
}
}
var a = fn();
a(); //1
a(); //2
a(); //3
a(); //4
var b = fn();
b(); //1
b(); //2
b(); //3
b(); //4
1.7 JS中 ==,===有什麼區別 嚴格等於和不嚴格等於的區別
console.log(“1”==1); //true console.log(“1”===1); //false
以上面的String與number比較的程式碼為例 ==時，如果型別不同會轉換成相同型別進行比較 ===時，如果型別不同直接返回false 有一個比較經典的案例
function Obj(){
return{
a:0,
toString:function(){
this.a++;
return this.a;
}
}
}
var a = new Obj();
console.log(a== 1&&a== 2&&a== 3); //true
這個是物件與數字之間比較的時候,重寫了物件裡面的toString方法導致a== 1&&a== 2&&a== 3為 true
1.8 JS浮點數字計算導致精度丟失的問題 其實這個問題不光JS中有，其他語言也有，像JAVA中也有，揪其原因是因為底層的二進位制無法精確表示這種浮點型別的數字。在這裡不談有興趣的同學可以去了解一下，不過JAVA中有BigDecimal這種東西可以用，這裡僅展示一些小數，很大的整數也會有這種問題，看程式碼吧
var a = 0.1;
var b = 0.11;
console.log(a+b); //0.21000000000000002
console.log(a-b); //-0.009999999999999995
var a = 0.01;
var b = 0.11;
console.log(a+b);//0.12
console.log(a-b);//-0.1
var a=7.8;
var b = 0.9;
console.log(a+b);//8.7
console.log(a-b);//6.8999999999999995
var a =2.8;
var b = 0.9;
console.log(a+b);//3.6999999999999997
console.log(a-b);//1.9
這就非常有意思了，可以去試一下哦。這個可能就需要了解一下底層二進位制表示數字的方法了，學無止境不是麼？至於JS中的解決方法有幾個思路，1.將浮點數字轉化成整數計算，2.四捨五入。方法挺多大家可以自行百度。當然前端也不可能有大量的這種數字計算。
1.9 常見的瀏覽器相容性的問題 其實這種東西真的太多了，寫不完。隨便說幾個吧，有興趣的同學可以留言,這一篇就寫到這裡了
各個瀏覽器預設的一些屬性
CSS3中的一些屬性的相容性寫法
谷歌瀏覽器中select裡面option新增click事件無效
audio標籤谷歌中不支援自動播放
details標籤等等等等