web前端筆試題（一）
阿新 • • 發佈：2019-02-12
-i 索引 可選參數 null 響應 浪費 name屬性 person 獲得 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、如何控制網頁在網絡傳輸過程中的數據量？
減少http請求次數：css spirit,data uri
- JS，CSS源碼壓縮
- 前端模板 JS 數據，減少由於HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
- 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能
- 用setTimeout來避免頁面失去響應
- 用hash-table來優化查找
- 當需要設置的樣式很多時設置className而不是直接操作style
- 少用全局變量
- 緩存DOM節點查找的結果
- 避免使用CSS Expression
- 圖片預載
- 避免在頁面的主體布局中使用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轉為數組
- Array.prototype.slice.apply(arguments)這是運行效率比較快的方法（看別人資料說的）,為什麽不是數組也可以，因為arguments對象有length屬性，而這個方法會根據length屬性,返回一個具有length長度的數組。若length屬性不為number，則數組長度返回0;所以其他對象只要有length屬性也是可以的喲，如對象中有屬性0,對應的就是arr[0],即屬性為自然數的number就是對應的數組的下標，若該值大於長度，當然要割舍啦。
- Array.prototype.concat.apply(thisArg,arguments)。,thisArg是新的空數組，apply方法將函數this指向thisArg，arguments做為類數組傳參給apply。根據apply的方法的作用,即將Array.prototype.slice方法在指定的this為thisArg內調用，並將參數傳給它。用此方法註意:若數組內有數組，會被拼接成一個數組。原因是apply傳參的特性。
- 利用Array的構造函數,如Array(1,2,3,4,5,6);可以返回一個傳入的參數的數組，那Array.apply(thisArg,arguments)也可以將arguments轉化為數組，果然實驗是可以的;有沒有什麽影響呢，就是亂用了構造函數，但這也是js的特性嘛。構造函數也是函數。用此方法註意:若數組內有數組，會被拼接成一個數組。原因是apply傳參的特性。
- 用循環，因為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;
}
}
web前端筆試題（一）