1. 程式人生 > >前端面試js篇(3)

前端面試js篇(3)

1.擷取字串abcdace的ace
alert('abcdace'.substring(4));

2.規避javascript多人開發函式重名問題
名稱空間
封閉空間
js模組化mvc(資料層、表現層、控制層)
seajs
變數轉換成物件的屬性
物件化

3.javascript面向物件中繼承實現
function Person(name){
        this.name = name;
}

Person.prototype.showName = function(){
        alert(this.name);
}

function Worker(name, job){
        Person.apply(this,arguments)
        this.job = job;
}
for(var i in Person.prototype){
        Worker.prototype = Person.prototype;
}
new Worker('sl', 'coders').showName();

4.判斷一個字串中出現次數最多的字元,統計這個次數
var str = 'asdfssaaasasasasaa';
var json = {};

for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
                json[str.charAt(i)] = 1;
        }else{
                json[str.charAt(i)]++;
        }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
        if(json[i]>iMax){
                iMax = json[i];
                iIndex = i;
        }
}
alert('出現次數最多的是:'+iIndex+'出現'+iMax+'次');

5.編寫一個方法 求一個字串的位元組長度;
//假設一箇中文佔兩個位元組
var str = '22兩是';

alert(getStrlen(str))

function getStrlen(str){
        var json = {len:0};
        var re = /[\u4e00-\u9fa5]/;
        for (var i = 0; i < str.length; i++) {
                if(re.test(str.charAt(i))){
                        json['len']++;
                }
        };
        return json['len']+str.length;
}

6.編寫一個方法 去掉一個數組的重複元素
var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
        if(!json[arr[i]]){
                json[arr[i]] = true;
        }else{
                json[arr[i]] = false;
        }

        if(json[arr[i]]){
                arr2.push(arr[i]);
        }
};

for (var i = 0; i < arr.length; i++) {
        if(!aa(arr[i], arr2)){
                arr2.push(arr[i])
        }
};
function aa(obj, arr){
        for (var i = 0; i < arr.length; i++) {
                if(arr[i] == obj) return true;
                else return false;
        };
}
alert(arr2)

7.寫出3個使用this的典型應用
事件: 如onclick  this->發生事件的物件
建構函式          this->new 出來的object
call/apply        改變this

8.如何深度克隆
var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = 'sdfsdf';

var json2 = clone(json);

alert(json['c'])
function clone(obj){
        var oNew = new obj.constructor(obj.valueOf());
        if(obj.constructor == Object){
                for(var i in obj){
                        oNew[i] = obj[i];
                        if(typeof(oNew[i]) == 'object'){
                                clone(oNew[i]);
                        }
                }
        }
        return oNew;
}

9.JavaScript中如何檢測一個變數是一個String型別?請寫出函式實現
 typeof(obj) == 'string'
 obj.constructor == String;

10.網頁中實現一個計算當年還剩多少時間的倒數計時程式,要求網頁上實時動態顯示“××年還剩××天××時××分××秒”
var oDate = new Date();
var oYear = oDate.getFullYear();

var oNewDate = new Date();
oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);
var iTime = oNewDate.getTime()-oDate.getTime();

var iS = iTime/1000;
var iM = oNewDate.getMonth()-oDate.getMonth();
var iDate =iS

11. 請解釋一下什麼是語義化的HTML。
內容使用特定標籤,通過標籤就能大概瞭解整體頁面的佈局分佈

12. 為什麼利用多個域名來儲存網站資源會更有效?
確保使用者在不同地區能用最快的速度開啟網站,其中某個域名崩潰使用者也能通過其他鬱悶訪問網站

13.請說出三種減低頁面載入時間的方法
1、壓縮css、js檔案
2、合併js、css檔案,減少http請求
3、外部js、css檔案放在最底下
4、減少dom操作,儘可能用變數替代不必要的dom操作

14.什麼是FOUC?你如何來避免FOUC?
由於css引入使用了@import 或者存在多個style標籤以及css檔案在頁面底部引入使得css檔案載入在html之後導致頁面閃爍、花屏
用link載入css檔案,放在head標籤裡面

15.文件型別的作用是什麼?你知道多少種文件型別?
影響瀏覽器對html程式碼的編譯渲染
html2.0
xHtml
html5

16.瀏覽器標準模式和怪異模式之間的區別是什麼?
盒模型解釋不同

17.閉包
子函式能被外部呼叫到,則該作用連上的所有變數都會被儲存下來。

18.請解釋什麼是Javascript的模組模式,並舉出實用例項。
js模組化mvc(資料層、表現層、控制層)
seajs
名稱空間

19.你如何組織自己的程式碼?是使用模組模式,還是使用經典繼承的方法?
對內:模組模式
對外:繼承

20.你如何優化自己的程式碼?
程式碼重用
避免全域性變數(名稱空間,封閉空間,模組化mvc..)
拆分函式避免函式過於臃腫
註釋

21.你能解釋一下JavaScript中的繼承是如何工作的嗎?
子建構函式中執行父建構函式,並用call\apply改變this
克隆父建構函式原型上的方法

22.請儘可能詳盡的解釋AJAX的工作原理。
建立ajax物件(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))
判斷資料傳輸方式(GET/POST)
開啟連結 open()
傳送 send()
當ajax物件完成第四步(onreadystatechange)資料接收完成,判斷http響應狀態(status)200-300之間或者304(快取)執行回撥函式

相關推薦

前端面試js3

1.擷取字串abcdace的acealert('abcdace'.substring(4));2.規避javascript多人開發函式重名問題名稱空間封閉空間js模組化mvc(資料層、表現層、控制層)seajs變數轉換成物件的屬性物件化3.javascript面向物件中繼承實

前端面試知識點大全——JS

目錄 1.1 閉包 1.6 小結 5.1 區別 9.1 作用 9.2 使用 9.6 優點 9.7 缺點 10.跨域 1.閉包 與 作用域、作用域鏈

前端學習筆記Vue3

1.slot插槽內容分發 在vue專案開發過程中經常遇到這樣的情況:很多元件或者模組的結構相同,只不過是部分內容稍有不同。這種情況下,每次編寫相似的程式碼不僅會增大工作量,還會讓程式碼變得臃腫和冗餘。 slot便是一種用來解決這種情況的簡潔方案,話不多說,上程式碼 父元

如何編寫高質量的 JS 函式3 --函數語言程式設計[理論]

 【編寫高質量函式系列】中, 《如何編寫高質量的 JS 函式(1) -- 敲山震虎篇》介紹了函式的執行機制,此篇將會從函式的命名、註釋和魯棒性方面,闡述如何通過 JavaScript 編寫高質量的函式。  《如何編寫高質量的 JS 函式(2)-- 命名/註釋/魯棒篇》從函式的命

2017前端面試題之Js1

load urn lis property eat hub bind tlist 方法的參數 1 . 請解釋事件代理 (event delegation) 當需要對很多元素添加事件的時,可以通過將事件添加到它們的父節點通過委托來觸發處理函數。其中利用到了瀏覽器的事件冒

痞子衡嵌入式:飛思卡爾i.MX RT系列微控制器介紹3- 命名規則

rule 成員 oom 嵌入 信息 100% 規則 控制器 今天   大家好,我是痞子衡,是正經搞技術的痞子。今天痞子衡給大家介紹的是飛思卡爾i.MX RT系列MCU的命名規則。   打開任何一款i.MX RT系列芯片的Data Sheet均可找到如下命名規則表,以i.M

痞子衡嵌入式:飛思卡爾i.MX RT系列微控制器啟動3- Serial Downloader模式(sdphost/mfgtool)

efi RM pda lock mman www. esc https conn   大家好,我是痞子衡,是正經搞技術的痞子。今天痞子衡給大家介紹的是飛思卡爾i.MX RT系列MCU的Serial Downloader模式。   在上一篇文章 飛思卡爾i.MX RT系列微

20180813視頻筆記 深度學習基礎上1之必備基礎知識點 深度學習基礎上2神經網絡模型視頻筆記:深度學習基礎上3神經網絡案例實戰 和 深度學習基礎下篇

計算 概念 人臉識別 大量 png 技巧 表現 lex github 深度學習基礎上篇(3)神經網絡案例實戰 https://www.bilibili.com/video/av27935126/?p=1 第一課:開發環境的配置 Anaconda的安裝 庫的安裝 Windo

js總結 3對象的創建方法

eal blue rip fun heal health his name car <script> // 使用Object創建對象 // var car = new Object(); // car.name = ‘mer

Spectre/Meltdown演義-專業3

微信公眾號 mindshare思享 前面幾篇文章已經講過來Speculation和cache side channel attack. 有了這些知識,終於到了講Google Project Zero (GPZ)的Spectre和Meltdown的時候了。  

資料庫路由中介軟體MyCat - 使用3

此文已由作者張鎬薪授權網易雲社群釋出。 歡迎訪問網易雲社群,瞭解更多網易技術產品運營經驗。 全域性序列號 資料切分後,原有的關係資料庫中的主鍵約束在分散式條件下將無法使用,因此需要引入外部機制保證資料唯一性標識,這種保證全域性性的資料唯一標識的機制就是全域性序列號(sequence)。 1. 本地檔案方式 c

資料庫路由中介軟體MyCat - 使用3下篇

此文已由作者張鎬薪授權網易雲社群釋出。 歡迎訪問網易雲社群,瞭解更多網易技術產品運營經驗。 2. 配置conf/server.xml server.xml幾乎儲存了所有mycat需要的系統配置資訊。其在程式碼內直接的對映類為SystemConfig類。 參考完整配置: <?xml versi

資料庫路由中介軟體MyCat - 原始碼3

此文已由作者張鎬薪授權網易雲社群釋出。 歡迎訪問網易雲社群,瞭解更多網易技術產品運營經驗。 2. 前端連線建立與認證 Title:MySql連線建立以及認證過程client->MySql:1.TCP連線請求  MySql->client:2.接受TCP連線client->MySql

vue地圖視覺化 ArcGIS3

ArcGIS for javascript開發心得 本次例項中採用ArcGIS for javascript3.24版本,由於版本3與4在API等存在較大區別,就不一一列舉,詳細區別看 [官方解釋] arcgis for js4.7版本能夠自動建立layer、graphs等類,而不像3

第一個爬蟲開始前決定你的Python版本,你要使用什麼寫爬蟲,爬蟲認知3

       Python入門當然建議直接學Python3了,畢竟是趨勢。 而且Python3中對於字元編碼的改動會讓新手省掉很多很多很多關於字元編解碼問題的糾結。 另一方面看你專案大小吧。 如果自己寫程式碼,Python2和Python3沒啥區別。 但是

目標檢測之模型3【DMPNet】

文章目錄 1. 前言 2. 實現 2.1 Roughly recall text with quadrilateral sliding window 2.2 Finely localize text with quadrangle

three.js學習3:匯入threejs

1.在HTML中匯入: 2.用js中匯入: (1)當你的檔案中內建的有一些匯入工具像Webpack或Browserify,你可以用 var THREE = require("three"); var scene = THREE.Scene(); (2)使用ES6的語法形式(如果

Spring系列-基礎3-搭建簡易的tomcat開發環境

背景介紹 專案上成員已經開始使用Spring MVC或Spring Boot寫後臺介面,但是由於原有環境的一些限制,使得在實際開發時,會浪費很多時間在程式設計以外的事情上。專案上使用的應用伺服器是WebLogic,是一個功能很強大,但又很重量級的伺服器。我們開發使用

web前端面試知識點總結1

(1)button是行內元素還是塊級元素? 答:它是可變元素,既不屬於行內元素,也不屬於塊級元素。可變元素:根據上下文語境決定該元素為塊級還是內聯(可變元素如:button、iframe、map等)。 (2)行內元素有哪些?塊級元素有哪些?css盒子模型是什麼? 答:塊級

《JavaScript設計模式與開發實踐》模式3—— 代理模式

代理模式是為一個物件提供一個代用品或佔位符,以便控制對它的訪問 故事背景: 假設當 A 在心情好的時候收到花,小明表白成功的機率有 60%,而當 A 在心情差的時候收到花,小明表白的成功率無限趨近於 0。 小明跟 A 剛剛認識兩天,還無法辨別 A 什麼時候心情好。如果不合時宜地把花送給 A,花