web前端筆試題（一）

 1、javascript中如何對一個對象進行深度clone？

//深度克隆
function deepClone(obj){
    var result,oClass=isClass(obj);
        //確定result的類型
    if(oClass==="Object"){
        result={};
    }else if(oClass==="Array"){
        result=[];
    }else{
        return obj;
    }
    for(key in obj){
        var copy=obj[key];
        if(isClass(copy)=="Object"){
            result[key]=arguments.callee(copy);//遞歸調用
        }else if(isClass(copy)=="Array"){
            result[key]=arguments.callee(copy);
        }else{
            result[key]=obj[key];
        }
    }
    return result;
}
//返回傳遞給他的任意對象的類
function isClass(o){
    if(o===null) return "Null";
    if(o===undefined) return "Undefined";
    return Object.prototype.toString.call(o).slice(8,-1);
}
var oPerson={
    oName:"rookiebob",
    oAge:"18",
    oAddress:{
        province:"beijing"
    },    
    ofavorite:[
        "swimming",
        {reading:"history book"}
    ],
    skill:function(){
        console.log("bob is coding");
    }
};
//深度克隆一個對象
var oNew=deepClone(oPerson);
 
oNew.ofavorite[1].reading="picture";
console.log(oNew.ofavorite[1].reading);//picture
console.log(oPerson.ofavorite[1].reading);//history book
 
oNew.oAddress.province="shanghai";
console.log(oPerson.oAddress.province);//beijing
console.log(oNew.oAddress.province);//shanghai

　　2、如何控制alert中的換行？

 添加 “\n”  即可實現換行，有些瀏覽器則可能添加 “\r\n”

        3、請編寫一個javascript函數parseQueryString,它的用途是把URL參數解析為一個對象

var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2";
var obj = parseQueryString(url);
       
function parseQueryString(argu){
  var str = argu.split('?')[1];
  var result = {};
  var temp = str.split('&');
  for(var i=0; i<temp.length; i++)
  {
     var temp2 = temp[i].split('=');
     result[temp2[0]] = temp2[1];
  }
  return result;
}

　　4、如何控制網頁在網絡傳輸過程中的數據量？

1. 減少http請求次數：css spirit,data uri

2.  JS，CSS源碼壓縮
3.  前端模板 JS 數據，減少由於HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
4.  用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能
5.  用setTimeout來避免頁面失去響應
6.   用hash-table來優化查找
7.  當需要設置的樣式很多時設置className而不是直接操作style 
8.  少用全局變量
9.  緩存DOM節點查找的結果
10.  避免使用CSS Expression
11.   圖片預載
12.  避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比div css布局慢

       5、以下代碼運行結果    //889

function say(){
    var num=888;
    var sayAlert=function(){alert(num)}; 
    num++;
    return sayAlert;
}

var sayAlert=say()；
sayAlert()

　　6、請實現ES5中的Object.getPrototypeOf()函數

function Fn(){
            
            }
var fn = new Fn();
 //通過getPrototypeOf靜態方法，獲得對象fn的prototype
var proto = Object.getPrototypeOf(fn);
 //將獲得的prototype添加一個name屬性，並賦值
 proto.name = 'Monkey';
//輸出對象fn.name
 console.log(fn.name);//Monkey
//判斷proto是否是Fn.prototype
 console.log( 'proto === Fn.prototype? ' + (proto === Fn.prototype) );
//proto === Fn.prototype? true

　　7、如何實現Array.prototype.forEach

array.forEach(callback(currentValue,index,array){

 

},this)

array.forEach(callback[,  thisArg])

callback

為數組中每個元素執行的函數，該函數接收三個參數：
currentValue(當前值)
數組中正在處理的當前元素。
index(索引)
數組中正在處理的當前元素的索引。
array
forEach()方法正在操作的數組。
thisArg可選
可選參數。當執行回調 函數時用作this的值(參考對象)。

 

 

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳過了，因為在數組的這個位置沒有項
[2, 5, ,9].forEach(logArrayElements);

// a[0] = 2
// a[1] = 5
// a[3] = 9

[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9

[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9


let xxx;
// undefined

[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9

　　7、如何將arguments轉為數組

1. Array.prototype.slice.apply(arguments)這是運行效率比較快的方法（看別人資料說的）,為什么不是數組也可以，因為arguments對象有length屬性，而這個方法會根據length屬性,返回一個具有length長度的數組。若length屬性不為number，則數組長度返回0;所以其他對象只要有length屬性也是可以的喲，如對象中有屬性0,對應的就是arr[0],即屬性為自然數的number就是對應的數組的下標，若該值大於長度，當然要割舍啦。
2. Array.prototype.concat.apply(thisArg,arguments)。,thisArg是新的空數組，apply方法將函數this指向thisArg，arguments做為類數組傳參給apply。根據apply的方法的作用,即將Array.prototype.slice方法在指定的this為thisArg內調用，並將參數傳給它。用此方法注意:若數組內有數組，會被拼接成一個數組。原因是apply傳參的特性。
3. 利用Array的構造函數,如Array(1,2,3,4,5,6);可以返回一個傳入的參數的數組，那Array.apply(thisArg,arguments)也可以將arguments轉化為數組，果然實驗是可以的;有沒有什么影響呢，就是亂用了構造函數，但這也是js的特性嘛。構造函數也是函數。用此方法注意:若數組內有數組，會被拼接成一個數組。原因是apply傳參的特性。
4. 用循環，因為arguments類似數組可以使用arguments[0]來訪問實參，那么將每項賦值給新的數組每項，直接復制比push要快，若實參有函數或者對象，就要深拷貝。

       8、以下程序運行結果

var ninja=function myNinja(){
    alert(ninja==myNinja);
}；
ninja();//true
myNinja(); //myNinja is not defined

　　9、兼容瀏覽器的獲取指定元素的樣式屬性的方法

function getStyle(elem, name){
  //如果屬性存在於style[]中，直接取
  if(elem.style[name]){
    return elem.style[name];
  } 
  //否則 嘗試IE的方法
  else if(elem.currentStyle){
    return elem.currentStyle[name];
  }
  //嘗試W3C的方式
  else if(document.defaultView && document.defaultView.getComputedStyle){
    //W3C中為textAlign樣式，轉為text-align
    name = name.replace(/([A-Z])/g, "-$1");
    name = name.toLowerCase();
    
    var s = document.defaultView.getComputedStyle(elem, "");
    return s && s.getPropertyValue(name);
  } else {
    return null;
  }
  
}