前端開發面試題總結之——JAVASCRIPT（二）
阿新 • • 發佈：2022-03-18
相關知識點
資料型別、運算、物件、function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、記憶體洩漏、跨域、非同步載入、模板引擎、前端MVC、前端MVVM、路由、模組化、Http、Canvas、jQuery、ECMAScript 2015（ES6）、Node.js、AngularJS、Vue、React......
題目&答案
- documen.write和 innerHTML的區別
document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分
- 瀏覽器檢測通過什麼？
（1） navigator.userAgent （2） 不同瀏覽器的特性，如addEventListener
- JavaScript有哪幾種資料型別？
簡單，Number，Boolean，String，Null，Undefined
複合，Object，Array，Function
- 擷取字串“abcdefghi”的“fghi”
var myvalue=”abcdefghi”;
var jiequ=myvalue.substring(myvalue.length-4,myvalue.length);
alert(jiequ);
- 寫出下面的運算結果
alert(typeof(null)); // object alert(typeof(undefined)); // undefined alert(typeof(NaN)); // number alert(NaN==undefined); // false alert(NaN==NaN); // false var str="123abc"; alert(typeof(str++)); // number alert(str);// NaN
- 問執行完畢後 x, y, z 的值分別是多少？
var x = 1, y = z = 0;
function add(n) {
n = n+1;
}
y = add(x);
function add(n) {
n = n + 3;
}
z = add(x);
1、undefined、undefined
- 如何阻止事件的冒泡?
//阻止冒泡的方法 function stopPP(e) { var evt = e|| window.event; //IE用cancelBubble=true來阻止而FF下需要用stopPropagation方法 evt.stopPropagation ?evt.stopPropagation() : (evt.cancelBubble=true); }
- 寫出程式執行的結果?
for(var i=0, j=0; i<10, j<6; i++, j++){
k = i + j;
}
10
- 編寫一個方法 求一個字串的位元組長度
/*假設：一個英文字元佔用一個位元組，一箇中文字元佔用兩個位元組*/
function getBytes(str){
var len = str.length,
bytes = len,
i = 0;
for(; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
alert(getBytes("玩,as"));
- JavaScript中如何對一個物件進行深度clone？
function cloneObject(o) {
if(!o || 'object' !== typeof o) {
return o;
}
var c = 'function' === typeof o.pop ? [] : {};
var p, v;
for(p in o) {
if(o.hasOwnProperty(p)) {
v = o[p];
if(v && 'object' === typeof v) {
c[p] = Ext.ux.clone(v);
}
else {
c[p] = v;
}
}
}
return c;
};
- 如何控制alert中的換行？
\n alert(“p\np”);
- 請編寫一個JavaScript函式 parseQueryString，它的用途是把URL引數解析為一個物件，如：
var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;
function parseQueryString(url){
var params = {},
arr = url.split("?");
if (arr.length <= 1)
return params;
arr = arr[1].split("&");
for(var i=0, l=arr.length; i<l; i++){
var a = arr[i].split("=");
params[a[0]] = a[1];
}
return params;
}
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2",
ps = parseQueryString(url);
console.log(ps["key1"]);
- 如何控制網頁在網路傳輸過程中的資料量?
啟用GZIP壓縮
保持良好的程式設計習慣，避免重複的CSS，JavaScript程式碼，多餘的HTML標籤和屬性
- 以下程式碼執行結果
function say() {
// Local variable that ends up within closure
var num = 888;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say();
sayAlert();//889
- 請實現ECMAScript 5中的Object.getPrototypeOf() 函式
function proto(object) {
return !object? null
: '__proto__' in object? object.__proto__
: /* not exposed? */ object.constructor.prototype
}
- 如何實現Array.prototype.forEach？
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fn){
for ( var i = 0; i < this.length; i++ ) {
fn( this[i], i, this );
}
};
}
["a", "b", "c"].forEach(function(value, index, array){
assert( value, "Is in position " + index + " out of " + (array.length - 1) );
});
- 如何將arguments轉為陣列？
Object.prototype.slice.call(arguments);
- 以下程式執行結果？
var ninja = function myNinja(){
alert(ninja == myNinja);
};
ninja();
myNinja();
true、報錯（error - myNinja is not defined.）
- 如何獲取游標的水平位置？
function getX(e){
e = e || window.event;
//先檢查非IE瀏覽器，在檢查IE的位置
return e.pageX || e.clentX + document.body.scrollLeft;
}
- 相容瀏覽器的獲取指定元素（elem）的樣式屬性（name）的方法
function getStyle(elem, name){
if(elem.style[name]){//如果屬性存在於style[]中，直接取
return elem.style[name];
}
else if(elem.currentStyle){//否則 嘗試IE的方法
return elem.currentStyle[name];
}//嘗試W3C的方式
else if(document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g, "-$1");//W3C中為textAlign樣式，轉為text-align
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
}else{
return null;
}
}
- Javascript中實現類似PHP的print_r函式
function print_r(theObj) {
var retStr = '';
if(typeof theObj == 'object') {
retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
for(var p in theObj) {
if (typeof theObj[p] == 'object') {
retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
retStr += '<div style="padding-left:25px;">' + print_r(theObj[p]) + '</div>';
} else {
retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';
}
}
retStr += '</div>';
}
return retStr;
}
- 以下程式執行結果？
var b = parseInt("01");
alert("b="+b);
var c = parseInt("09/08/2009");
alert("c="+c);
b=1、c=0。
- 以下程式的執行結果？
var foo = 'hello';
(function() {
var foo= foo || 'world';
console.log(foo);
})();
world
- 如何規避javascript多人開發函式重名問題？
(1) 可以開發前規定命名規範，根據不同開發人員開發的功能在函式前加字首
(2) 將每個開發人員的函式封裝到類中，呼叫的時候就呼叫類的函式，即使函式重名只要類名不重複就行
- 前端開發有哪些優化問題？
減少http請求次數：cssspirit,data uri
JS，CSS原始碼壓縮
前端模板JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能
用setTimeout來避免頁面失去響應
用hash-table來優化查詢
當需要設定的樣式很多時設定className而不是直接操作style
少用全域性變數
快取DOM節點查詢的結果
避免使用CSS Expression
圖片預載
避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示比div+css佈局慢
- AJAX請求總共有多少種CALLBACK
Ajax請求總共有八種Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException
- 請給出非同步載入js方案，不少於兩種
非同步載入方式：
defer，只支援IE
async：
建立script，插入到DOM中，載入完畢後callBack，見程式碼：
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if(script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else {
//Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}