前端js面試題（基礎）
1、js中使用typeof能得到哪些型別？
——undefined、string、number、boolean、object、function
2、===和==分別在何時使用？
//==的使用情況為以下2種（其他情況下推薦使用===）
if(obj.a == null){
//相當於obj.a === null || obj.a === undefined
}
function fn(a,b){
if(a == null）{
//a要先定義
}
}3、js中哪些內建函式
——Object、Array、Boolean、Number、String、Function、Date、RegExp、Error
4、js變數按照儲存方式區分為哪些型別，並描述其特點
—— 值型別：賦值不會相互干涉；
引用型別：是指標的賦值，都指向記憶體空間中的同一個物件，會相互干涉；
5、如何理解json
——js物件（有兩個API ：JSON.stringify() 、JSON.parse()）和資料格式
6、如何準確判斷一個變數是陣列型別
console.log(arr instanceof Array);7、寫一個原型鏈繼承的例子
//DOM封裝查詢 function Elem(id){ this.elem = document.getElementById(id); } Elem.prototype.html = function(val){ var elem = this.elem; if(val){ elem.innerHTML = val; return this; }else{ return elem.innerHTML; } } Elem.prototype.on = function (type,fn){ var elem = this.elem; elem.addEventListener(type,fn); return this; } var div1 = new Elem('div1'); div1.html('<p>hello world</p>').on('click',function(){ alert('clicked'); }).html('<p>hello javascript</p>');
8、描述new一個物件的過程
—— 1、建立一個新物件
2、this指向這個新物件
3、執行程式碼，即對this賦值
4、返回this
9、說一下對變數提升的理解
—— 變數定義；
函式宣告（注意和函式表示式的區別）
10、說明this幾種不同的使用場景
—— 1、作為建構函式執行
2、作為物件屬性執行
3、作為普通函式執行
4、call、apply、bind
11、用js建立10個<a>標籤，點選的時候彈出來對應的序號
var i; for(i=0;i<10;i++){ (function(i){ var a = document.createElement('a'); a.innerHTML = i + '<br>'; a.addEventListener('click',function(e){ e.preventDefault(); alert(i)； }); document.body.appendChild(a); })(i）； }
12、如何理解作用域
—— 自由變數
作用域鏈，即自由變數的查詢
閉包的兩個場景（返回函式、作為引數傳遞）
13、實際開發中閉包的應用
//閉包實際應用中主要用於封裝變數，收斂許可權
//Exp1
function F1(){
var a =100;
return function(){
console.log(a);
}
}
var f1 = F1();
function F2(fn){
var a = 200;
fn()
}
F2(f1);
//Exp2
function ifFirstLoad(){
var _list =[];
return function(id){
if(_list.indexOf(id)>=0){
return false;
}else{
_list.push(id);
return true;
}
}
}
var firstLoad = isFirstLoad();
firstLoad(10); //true
firstLoad(10); //false14、同步和非同步的區別
——同步會阻塞程式碼執行，而非同步不會。
15、setTimeout()
console.log(1);
setTimeout(function(){
console.log(2);
},1000);
console.log(3);//1 3 2
16、前端使用非同步的場景有哪些
—— 1、setTimeout、setInverval
2、ajax請求、動態<img>載入
3、事件請求
（特點：都需要等待，由js是單執行緒語言所決定）
17、獲取2018-4-26格式的日期
function formatDate(dt){
if(!dt){
dt = new Date();
}
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var date = dt.getDate();
if(month<10){
month = '0' + month;
}
if(date<10){
dae = '0' +date;
}
return year + '-' + month + '-' + date;
}
var dt = new Date();
var formatDate = formatDate(dt);
console.log(formatDate);18、獲取隨機數（要求長度一致的字串格式）
var random = Math.random();
var random = random + '0000000000';
var random = random.slice(0,10);
console.log(random);(Math.random():隨時改變，清除快取)
19、寫一個能遍歷物件和陣列的通用的forEach函式
function forEach(obj,fn){
var key;
if(obj instanceof Array){
obj.forEach(function(item,index){
fn(index,item);
});
}else{
for(key in obj){
fn(key,obj[key]);
}
}
}
var arr = [1,2,3];//陣列
forEach(arr,function(index,item){
console.log(index,item);
})
var obj = {x:1,y:2};//物件
forEach(obj,function(key,val){
console.log(key,val);
})20、DOM是哪種基本的資料結構
——樹
21、DOM操作的常用API有哪些
—— 1、獲取DOM節點，以及節點的property和Attribute
2、獲取父節點，獲取子節點
3、新增節點，刪除節點
（<div><p></p></div>換行與不換行的div的子節點的數量是不一樣的）
22、DOM節點的attr和property有何區別
—— property只是一個js物件的屬性的修改
Attribute是對html標籤屬性的修改
23、如何檢查瀏覽器的型別
var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome);24、拆解url的各部分
location.protocal //"https:"
location.host //"blog.csdn.net"
location.pathname //"/hannah1116"
location.search //""
location.hash //""
location.href //"https://blog.csdn.net/hannah1116"25、編寫一個通用的事件監聽函式
function bindEvent(elem,type,selector,fn){
if(fn == null){
fn = selector;
selector = null;
}
elem.addEventListener(type,function(event){
var target;
if(selector){
target = event.target;
if(target.matches(selector)){
fn.call(target,event);
}else{
fn(event);
}
}
});
}
//使用代理
var div1 = document.getElementById("div1");
bindEvent(div1,'click','a',function(event){
console.log(this.innerHTML);
});
//不使用代理
var a = document.getElementById("a1");
bindEvent(div1,'click',function(event){
console.log(a.innerHTML);
});26、描述事件冒泡流程
—— DOM樹形結構
事件冒泡
阻止冒泡
27、對於一個無限下拉載入圖片的頁面，如何給每個圖片繫結事件
—— 使用代理：程式碼簡潔；減少瀏覽器記憶體佔用；
28、手動編寫一個ajax，不依賴第三方庫
var xhr = new XMLHttpRequest();
xhr.open("GET","/api",true);
xhr.onreadystatechange = function(）{
if(xhr.readyState == 4){//客戶端可以使用
if(xhr.status == 200){//表示成功處理請求
alert(xhr.responseText);
}
}
}
xhr.send(null);29、跨域的幾種方式
—— 1、CORS跨域資源共享
2、影象Ping
3、JSONP
4、Comet
5、伺服器傳送事件
6、Web Sockets
30、請描述一下cookie,sessionStorage和localStorage的區別
—— cookie：本身用於客戶端和伺服器端通訊，但是有本地儲存的功能
缺點：儲存量太小，只有4KB;所有http請求都帶著，會影響獲取資源的效率；API簡單，需要封裝才能用document.cookie = ……
localStorage和sessionStorage：HTML5專門為儲存而設計
優點：最大容量為5M；API簡單易用：loaclStorage.setItem(key,value);localStorage.getItem(key);
注意：iOS safari隱藏模式下：localStorage.getItem會報錯；建議統一使用try-catch封裝；
區別：容量、是否會攜帶到ajax中、API易用性
31、上線流程和回滾的要點
—— 上線流程要點：
（1）將測試完成的程式碼提交到git版本庫的master分支
（2）將當前伺服器的程式碼全部打包並記錄版本號，備份
（3）將master分支的程式碼提交覆蓋到線上伺服器，生成新版本號
回滾流程要點：
（1）將當前伺服器的程式碼打包並記錄版本號，備份
（2）將備份的上一個版本號解壓，覆蓋到線上伺服器，並生成新的版本號
32、從輸入url到得到html的詳細過程
—— 1、瀏覽器根據DNS伺服器得到域名的IP地址
2、向這個IP的機器傳送HTTP請求
3、伺服器收到、處理並返回HTTP請求
4、瀏覽器得到返回內容
33、window.onload和DOMContentLoaded的區別？
—— window.onload：頁面的全部資源載入完才可執行（包括圖片、視訊）
DOMContentLoaded：DOM渲染完即可執行（此時圖片、視訊還沒有載入完）
34、載入資源優化
—— 1、靜態資源的壓縮合並
2、靜態資源快取
3、使用CDN讓資源載入更快
4、使用SSR後端渲染，資料直接輸出到HTML中
35、渲染優化
—— 1、CSS放前面，JS放後面
2、懶載入（圖片懶載入、下拉載入更多）
3、減少DOM查詢，對DOM查詢做快取
4、減少DOM操作，多個操作儘量合併在一起執行
5、事件節流
6、儘早執行操作（如DOMContentLoaded)