1. 程式人生 > >【前端面試題】經典的前端面試20題,實用、易用、好用

【前端面試題】經典的前端面試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 其他 前端知識點、前端面試題