【前端面試題】經典的前端面試20題,實用、易用、好用
1、JavaScript中如何檢測一個變數是一個String型別?請寫出函式實現
function isString(obj){
return typeof(obj) === "string"? true: false;
}
2、請用js去除字串空格?
方法一:使用replace正則匹配的方法
去除所有空格: str = str.replace(/\s*/g,"");
方法二:使用str.trim()方法
str.trim()侷限性:無法去除中間的空格
3、你如何獲取瀏覽器URL中查詢字串中的引數?
var url_parames=location.search.slice(1); var url_obj=getJson(url_parames); //把url引數形式的字串轉成json function getJson(parames){ var fields = parames.split('&'); var res = {}; for(var i = 0;i<fields.length;i++){ var field = fields[i].split('='); res[field[0]]=field[1]; } return res; };
4、js 字串操作函式
- indexOf() – 返回字串中一個子串第一處出現的索引。如果沒有匹配項,返回 -1 。
- substring() – 返回字串的一個子串。傳入引數是起始位置和結束位置。
- slice() – 提取字串的一部分,並返回一個新字串。
- replace() – 用來查詢匹配一個正則表示式的字串,然後使用新字串代替匹配的字串。
- split() – 通過將字串劃分成子串,將一個字串做成一個字串陣列。
- length – 返回字串的長度,所謂字串的長度是指其包含的字元的個數。
5、比較typeof與instanceof?
相同點:JavaScript 中 typeof 和 instanceof 常用來判斷一個變數是否為空,或者是什麼型別的。
typeof的定義和用法:返回值是一個字串,用來說明變數的資料型別。
細節:
(1)、typeof 一般只能返回如下幾個結果:number,boolean,string,function,object,undefined。
(2)、typeof 來獲取一個變數是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因為如果 a 不存在(未宣告)則會出錯。
(3)、對於 Array,Null 等特殊物件使用 typeof 一律返回 object,這正是 typeof 的侷限性。
Instanceof定義和用法:instanceof 用於判斷一個變數是否屬於某個物件的例項。
6、如何理解閉包?
1、定義和用法:當一個函式的返回值是另外一個函式,而返回的那個函式如果呼叫了其父函式內部的其它變數,如果返回的這個函式在外部被執行,就產生了閉包。
2、表現形式:使函式外部能夠呼叫函式內部定義的變數。
3、例項如下:
(1)、根據作用域鏈的規則,底層作用域沒有宣告的變數,會向上一級找,找到就返回,沒找到就一直找,直到window的變數,沒有就返回undefined。這裡明顯count 是函式內部的flag2 的那個count 。
4、變數的作用域
要理解閉包,首先必須理解Javascript特殊的變數作用域。
變數的作用域分類:全域性變數和區域性變數。
特點:
1、函式內部可以讀取函式外部的全域性變數;在函式外部無法讀取函式內的區域性變數。
2、函式內部宣告變數的時候,一定要使用var命令。如果不用的話,你實際上聲明瞭一個全域性變數!
5、使用閉包的注意點
1)濫用閉包,會造成記憶體洩漏:由於閉包會使得函式中的變數都被儲存在記憶體中,記憶體消耗很大,所以不能濫用閉包,否則會造成網頁的效能問題,在IE中可能導致記憶體洩露。解決方法是,在退出函式之前,將不使用的區域性變數全部刪除。
2)會改變父函式內部變數的值。所以,如果你把父函式當作物件(object)使用,把閉包當作它的公用方法(Public Method),把內部變數當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函式內部變數的值。
6、什麼是跨域?跨域請求資源的方法有哪些?
1、什麼是跨域?
由於瀏覽器同源策略,凡是傳送請求url的協議、域名、埠三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況:
-
網路協議不同,如http協議訪問https協議。
-
埠不同,如80埠訪問8080埠。
-
域名不同,如qianduanblog.com訪問baidu.com。
-
子域名不同,如abc.qianduanblog.com訪問def.qianduanblog.com。
-
域名和域名對應ip,如www.a.com訪問20.205.28.90.
2、跨域請求資源的方法:
(1)、porxy代理
定義和用法:proxy代理用於將請求傳送給後臺伺服器,通過伺服器來發送請求,然後將請求的結果傳遞給前端。
實現方法:通過nginx代理;
注意點:1、如果你代理的是https協議的請求,那麼你的proxy首先需要信任該證書(尤其是自定義證書)或者忽略證書檢查,否則你的請求無法成功。
(2)、CORS 【Cross-Origin Resource Sharing】
定義和用法:是現代瀏覽器支援跨域資源請求的一種最常用的方式。
使用方法:一般需要後端人員在處理請求資料的時候,新增允許跨域的相關操作。如下:
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
(3)、jsonp
定義和用法:通過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制,同時資源載入到頁面後會立即執行(沒有阻塞的情況下)。
特點:通過情況下,通過動態建立script來讀取他域的動態資源,獲取的資料一般為json格式。
例項如下:
<script>
function testjsonp(data) {
console.log(data.name); // 獲取返回的結果
}
</script>
<script>
var _script = document.createElement('script');
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=testjsonp";
document.head.appendChild(_script);
</script>
缺點:
1、這種方式無法傳送post請求(這裡)
2、另外要確定jsonp的請求是否失敗並不容易,大多數框架的實現都是結合超時時間來判定。
7、談談垃圾回收機制方式及記憶體管理
1、定義和用法:垃圾回收機制(GC:Garbage Collection),執行環境負責管理程式碼執行過程中使用的記憶體。
2、原理:垃圾收集器會定期(週期性)找出那些不在繼續使用的變數,然後釋放其記憶體。但是這個過程不是實時的,因為其開銷比較大,所以垃圾回收器會按照固定的時間間隔週期性的執行。
3、例項如下:
function fn1() {
var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
var obj = {name:'hanzichi', age: 10};
return obj;
}
var a = fn1();
var b = fn2();
fn1中定義的obj為區域性變數,而當呼叫結束後,出了fn1的環境,那麼該塊記憶體會被js引擎中的垃圾回收器自動釋放;在fn2被呼叫的過程中,返回的物件被全域性變數b所指向,所以該塊記憶體並不會被釋放。
4、垃圾回收策略:標記清除(較為常用)和引用計數。
標記清除:
定義和用法:當變數進入環境時,將變數標記"進入環境",當變數離開環境時,標記為:"離開環境"。某一個時刻,垃圾回收器會過濾掉環境中的變數,以及被環境變數引用的變數,剩下的就是被視為準備回收的變數。
到目前為止,IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或類似的策略,只不過垃圾收集的時間間隔互不相同。
引用計數:
定義和用法:引用計數是跟蹤記錄每個值被引用的次數。
基本原理:就是變數的引用次數,被引用一次則加1,當這個引用計數為0時,被視為準備回收的物件。
8、 javascript面向物件中繼承實現?
面向物件的基本特徵有:封閉、繼承、多型。
在JavaScript中實現繼承的方法:
1. 原型鏈(prototype chaining)
2. call()/apply()
3. 混合方式(prototype和call()/apply()結合)
4. 物件冒充
繼承的方法如下:
1、prototype原型鏈方式:
2、call()/apply()方法
3、混合方法【prototype,call/apply】
4、物件冒充
相關推薦
【前端面試題】經典的前端面試20題,實用、易用、好用
1、JavaScript中如何檢測一個變數是一個String型別?請寫出函式實現 function isString(obj){ return typeof(obj) === "string"? true: false; } 2、請用js去除字串空格? 方法一:
【前端面試題】2018最新版前端面試題,只為找到更好的工作~~~
1.一些開放性題目1.自我介紹:除了基本個人資訊以外,面試官更想聽的是你與眾不同的地方和你的優勢。 2.專案介紹 3.如何看待前端開發? 4.平時是如何學習前端開發的? 5.未來三到五年的規劃是怎樣的? position的值, relative和absolute分別是
前端面試題(來自前端網http://www.qdfuns.com/notes/23515/c9163ddd620baac5dd23141d41982bb8.html)
設置 session hat eval 減少 還需要 height 狀態碼 一次 HTML&CSS 1. 常用那幾種瀏覽器測試?有哪些內核(Layout Engine)? (Q1)瀏覽器:IE,Chrome,FireFox,Safari,Opera。 (Q2)內核
web前端面試題整理(前端和計算機相關知識)
1. 你能描述一下漸進增強和優雅降級之間的不同嗎?定義:優雅降級(graceful degradation): 一開始就構建站點的完整功能,然後針對瀏覽器測試和修復漸進增強(progressive enhancement): 一開始只構建站點的最少特性,然後不斷針對各瀏覽器
【前端面筋】終於等到你!!!
之前一直在牛客刷麵筋,今天終於自己也寫了一篇,算是秋招的總結吧。希望大家都能順利拿到自己想要的offer!lz本科妹子,從沒有想過要當程式設計師......無奈非技術不好找工作,看到產品400:1的時候心都涼了,只好硬著頭皮開始敲程式碼年初開始認真學前端,有過實習,學習方式:
前端面試題:從url到頁面展現,這之中發生了什麼?
我們平常在位址列裡輸入一些網址時,頁面很快就會出現,但在這之中到底發生了什麼事情呢? 大概是這樣的流程: 在瀏覽器的位址列中敲入了url 域名解析 伺服器處理請求 瀏覽器處理 繪製網頁 一、在瀏覽器的位址列中敲入了url 首先
【Java面試題】List如何一邊遍歷,一邊刪除?
這是最近面試時被問到的1道面試題,本篇部落格對此問題進行總結分享。 ## 1. 新手常犯的錯誤 可能很多新手(包括當年的我,哈哈)第一時間想到的寫法是下面這樣的: ```java public static void main(String[] args) { List platformList
【面試】2018大廠高階前端面試題彙總
面試的公司分別是:阿里、網易、滴滴、今日頭條、有贊、挖財、滬江、餓了麼、攜程、喜馬拉雅、兌吧、微醫、寺庫、寶寶樹、海康威視、蘑菇街、酷家樂、百分點和海風教育。 阿里 使用過的koa2中介軟體 koa-body原理 介紹自己寫過的中介軟體 有
2018最新Web前端經典面試試題及答案-史上最全前端面試題(含答案)
近期總結一一些面試題 都是企業的面試題筆記題感覺薪資10k下的都會出筆試題 特別高的薪資都是直接技術面試或者是 現場程式設計 總結很多人的面試題,後期會對於單個知識點再說筆記詳細講解。部分都是百度的答案,不是特全面的,可以自己找下紅色為常見面試題=============
【javaWeb之前端】前端面試題-----js和jquery的區別是什麼?
最近我有一個朋友問我js和jQuery的區別是什麼,於是我打算寫一篇文章說下到底有什麼區別。 首先你要知道: 1.js是網頁的指令碼語言,記住哈,js是語言! 2.jquery是用js語言寫出來的一個框架! 看到區別沒?一個是語言,一個是框架,jq
【常見面試題】網易遊戲前端面試題集錦1
一、塊級元素和行內元素的區別,行內塊級元素是什麼東西? 解答: (1)塊級元素獨佔一行,可以單獨設定寬高等特性,塊級元素內可以包含非塊級元素和塊級元素 (2)行內元素不獨佔一行,在一行內可以完整顯
【javascript常見面試題】常見前端面試題及答案
1.你能描述一下漸進增強和優雅降級之間的不同嗎? 優雅降級:Web站點在所有新式瀏覽器中都能正常工作,如果使用者使用的是老式瀏覽器,則程式碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題,針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援
前端面試題二(來自前端網http://www.qdfuns.com/notes/23515/fa8b1e788ac39b04108fc33e5b543c4a.html)
scrip border cal 搜索引擎 val 媒體 分配 error 不刷新 HTML&CSS 1.請描述一下 cookies,sessionStorage 和 localStorage 的區別? cookie是網站為了標示用戶身份而儲存在用戶本地終端(Cl
最近面試前端面試題整理(css部分)
type list 定位 text -c padding 面試 lang vertical 對最近面試的面試題坐下總結: 一,css部分 1,html元素的垂直居中 答案: <div id="box"> <div> 測
前端乾貨:前端面試題彙總(推薦收藏)
HTML Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義? HTML5 為什麼只需要寫 <!DOCTYPE HTML>? 行內元素有哪些?塊級元素有哪些? 空(void)元素有那些? 頁面匯入樣式時,使用link和@i
2018 年最新傳智播客黑馬 WEB 前端 36 期全套(贈1000套HTML模板+前端面試題彙總)
週末了,放鬆下,分享一波資源給大家~ 教程千千萬萬,堅持寥寥幾人。 以前沒人教,但肯堅持。 現在有人教,沒人堅持。 儲存 100TB,實際是擺設。 大吉大利,今晚吃雞? 視訊+筆記+案例+素材 適用人群:零基礎Web前端開發 課程內容 獲取方式 關注
從一道經典前端面試題再來看閉包
for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i) }, i * 1000) } 上面這個內容會列印什麼? 看過這題的都會知道答案,每隔一秒列印一個5,列印5次。如果我想將每一
前端面試題(二十三)之前端需要注意哪些SEO?
合理的title,description,keywords:搜尋對著三項的權重逐個減小,title值強調重點即可,重要的關鍵詞出現不要超過兩次,而且要靠前,不同頁面title要有所不同;description把頁面內容高度概括,長度合適,不可過分堆砌關鍵詞,不同頁面description有所不同;keywor
web前端面試題、web前端開發面試題
【HTML & CSS】 1. Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義? 2. 行內元素有哪些?塊級元素有哪些?CSS的盒模型? 3. CSS引入的方式有哪些? link和@import的區別是? 4. CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?
前端知識點、前端面試題
href end 前端 rip 其他 知識 blob edge ava 項目地址 JavaScript CSS HTML 前端安全 HTTP 其他 前端知識點、前端面試題