前端常見面試題

一.JS

(1) 在函數中賦值，多次賦值，出現問題

var a = b = c = 10;
console.log(delete a); //false
console.log(delete b); //true
console.log(delete c); //true

function fn(){
    var a = b = c = 10;
}
fn();

console.log(b); //10
console.log(c); //10
console.log(a); //a is not defined

（2）數組的length 賦值給變數後，無法判斷數組長度

var arr = [1,2,3],
    i = 0,
    len = arr.length;
arr.length = 2;
console.log(len); //3
console.log(arr.length);  //2

(3) 截取字元

console.log('abcdefg'.substring(4))  // efg

(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 obj = 'sss'
typeof(obj) == 'string'
obj.constructor == String; // true

(6)你如何組織自己的代碼？是使用模塊模式，還是使用經典繼承的方法？

對內：模塊模式
對外：繼承

(7) 你如何優化自己的代碼？

代碼重用
避免全局變數（命名空間，封閉空間，模塊化mvc..）
拆分函數避免函數過於臃腫

(8)你能解釋一下JavaScript中的繼承是如何工作的嗎？

子構造函數中執行父構造函數，並用call\apply改變this
克隆父構造函數原型上的方法

(9)行內元素有哪些?塊級元素有哪些?CSS的盒模型?

塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:content，border ,margin，padding

(10) Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

用於聲明文檔使用那種規範（html/Xhtml）一般為 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug

(11) CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入
區別 ：同時載入
前者無相容性，後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可

(12) CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?

標簽選擇符 類選擇符 id選擇符
Id>class>標簽選擇
important優先順序高

1、基本選擇器：直接根據id、css類名、元素名返回匹配的dom元素。

2、層次選擇器：也叫做路徑選擇器，可以根據路徑層次來選擇相應的DOM元素。

3、過濾選擇器：在前面的基礎上過濾相關條件，得到匹配的dom元素。

(13) 前端頁面有哪三層構成，分別是什麼?作用是什麼?

結構層 Html 表示層 CSS 行為層 js

(14) 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

Ie(Ie內核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

(15)寫出幾種IE6 BUG的解決方法

1.雙邊距 : BUG float引起的 使用display
2.3像素問題 : 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點擊後失效 : 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 : 給父級添加position:relative
5.select 在ie6下遮蓋 使用iframe嵌套
6.為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

(16)標簽上title與alt屬性的區別是什麼?

Alt 當圖片不顯示是 用文字代表。
Title 為該屬性提供信息

(17) 你如何對網站的文件和資源進行優化?期待的解決方案包括：

文件合併
文件最小化/文件壓縮
使用CDN托管
緩存的使用

(18) 什麼是語義化的HTML?

直觀的認識標簽 對於搜索引擎的抓取有好處

(19)數組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除

(20) ajax請求的時候get 和post方式的區別

一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的

(21) call和apply的區別

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

(22)事件委托是什麼

讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

(23)閉包是什麼，有什麼特性，對頁面有什麼影響

閉包就是能夠讀取其他函數內部變數的函數。

(24) 添加 刪除 替換 插入到某個接點的方法

obj.appendChild()
obj.innersetBefore
obj.replaceChild
obj.removeChild

(25)解釋ajax

Ajax是頁面無刷新請求數據操作

（26）document load 和document ready的區別

Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

1、我們可以在頁面中使用多個document.ready()，但只能使用一次onload()。

2、document.ready()函數在頁面DOM元素載入完以後就會被調用，而onload()函數則要在所有的關聯資源（包括圖像、音頻）載入完畢後才會調用。

(27)”==”和“===”的不同

前者會自動轉換類型
後者不會

(28)jQuery中的Delegate()函數有什麼作用？

$("ul").delegate("li", "click", function(){

$(this).hide();

});

(29)怎樣用jQuery編碼和解碼URL？

encodeURIComponent(url)
decodeURIComponent(url)

(30) 閉包，輸出是true還是false

(function() {     
   if (g() && [] == ![]) {     
//應該看成if((g() && [] )== ![])   
//因為g()是false後面那個&&[]就沒起作用 整個都是false    
//![]也是false 所以if成立 進入if塊內   
      f = function f() {return false;};     
//重新定義f    
      function g() {return true;}     
//這句沒用   
   }     
})();    
alert(f());   
//false  

(31)獲取今日日期

function DateDemo(){ 
var d, s="今天日期是："; 
d = new Date(); 
s += d.getMonth() + "/"; 
s += d.getDate() + "/"; 
s += d.getYear(); 
return s; 
} 

DateDemo()

（32）ajax

var request = new XMLHttpRequest()

if(window.XMLHttpRequest){
    request = new XMLHttpRequest()
}else{
    request = new ActiveXObject("Microsoft.XMLHTTP")
}

request.open('POST','create.php',true)
request.setRequestHeader('Content-type','application/x-www-from-urlencoded')
request.send('name=王二狗&sex=女')

request.onreadystatechange = function(){
    if(request.readyState === 4 && request.status ===200){
        // do sth
    }
}

(33)添加事件監聽

document.addEventListener("click",function(){
    console.log("添加事件監聽")
})

（34）數組

// “最後加” concat 連接兩個或更多的數組，並返回結果。
    var a = ['a','b','c'];
    var b = ['x','y','z'];
    var c = a.concat(b,true);
    // alert(c)  //c變成 a,b,c,x,y,z


// join 把數組的所有元素放入一個字元串。元素通過指定的分隔符進行分隔。
    var d = a.join('');
    // alert(d)  //d變成abc
    var e = a.join(';');
    // alert(e)  //d變成a;b;c


// “最後加” push 向數組的末尾添加一個或更多元素，並返回新的長度。
    a.push('d');
    // alert(a) //a數組變成a,b,c,d


// reverse 顛倒數組中元素的順序。
    a.reverse()
    // alert(a)  //a數組變成d,c,b,a


// “最後刪1個” pop 刪除並返回數組的最後一個元素
    a.pop('') 
    // alert(a)  //a數組變成d,c,b


// “開始刪1個” shift 刪除並返回數組的第一個元素
    a.shift();
    // alert(a)  //a數組變成c,b


// “開始增加n個” unshift 向數組的開頭添加一個或更多元素，並返回新的長度。
    var h = ['a','b','c','d'];
    h.unshift('?','@')
    alert(h)


// "複製一段元素" slice(start,end) 從某個已有的數組返回選定的元素
    var f = a.slice(1,2)
    // alert(f) //複製了b元素


// sort 對數組的元素進行排序
    var e = ['f','e','d','i','a','p','c']
    var f = ['1','3','6','5','4']
    // e.sort();  //字母排序 a,c,d,e,f,i,p
    // alert(e) 
    f.sort();  //數字排序 1,3,4,5,6
    // alert(f) 



// “替換一段” splice(start,deleteCount,item...)刪除元素，並向數組添加新元素。
    var g = ['a','b','c']
    g.splice(0,1,'ache','bug'); //數組0-1的位置上被替換成ache和bug
    // alert(g)

（35）非同步載入

// 非同步載入js
(function(){
    var _asyn_js_data = ['index.js','index1.js','index2.js','index3.js']
    for(var i=0;i<_asyn_js_data.length;i++){
        var script=document.createElement("script"); 
        script.setAttribute("src", _asyn_js_data[i]); 
        var heads = document.getElementsByTagName("head");
        if(heads.length){
            heads[0].appendChild(script);
        }else{
            document.documentElement.appendChild(script); 
        }           
    }
})();


// 非同步載入圖片
(function(){
    var _img_src = ['img/img1.png','img/img2.png','img/img3.png']
    var _img = document.getElementsByTagName("img")
    for(var i=0;i<_img.length;i++){
        _img[i].setAttribute("src",_img_src[i]); 
    }
})();

（36）回調函數

function writeCode(callback){
    console.log("i am waiting....")
    callback();
    console.log("i am ready")
}
function prepare(){
    console.log("i am preparing...")
}

writeCode(prepare)

（37）小知識

// 可視寬高
var ch = document.documentElement.clientHeight
var cw = document.documentElement.clientWidth

// 內容高度
var sh = document.documentElement.scrollHeight

// 游覽器滾動高度
var st = document.body.scrollTop




// 提交之後，立刻禁用點擊按鈕
document.getElementById("btn").disabled = true;
// 設置某<input>控制項為只讀
document.getElementById("btn").readOnly = true;



// 十進位轉化為一個十六進位值
var num = 255;
console.log(num.toString(16));//ff
// 整型轉換
parseInt("12.2222")




// 隨機產生顏色
 function randomVal(val){
    return Math.floor(Math.random()*(val + 1));
}
function randomColor(){
    return 'rgb(' + randomVal(255) + ',' + randomVal(255) + ',' + randomVal(255) + ')';
}


// 在角度和弧度之間轉換
var rad = degrees*(Math.PI/180);
var degrees = rad*(180/Math.PI);


// 排序數組
var fruits = ['banana','apple','orange','strawberry'];
console.log(fruits.sort());//Array [ "apple", "banana", "orange", "strawberry" ]
var num = [32,43,2,5,-23,0,4];
console.log(num.sort());//Array [ -23, 0, 2, 32, 4, 43, 5 ]

（38）小數點

// toExponential 保留小數點( 0-20 bit )
    document.writeln(Math.PI.toExponential(0)); //3e+0 
    document.writeln(Math.PI.toExponential(2)); //3.14e+0
    document.writeln(Math.PI.toExponential(4)); //3.1416e+0
    document.writeln(Math.PI.toExponential(7)); //3.1415927e+0

// toFixed 換成十進位後 保留小數點( 0-20 bit ) 
    document.writeln(Math.PI.toFixed(0)); 
    document.writeln(Math.PI.toFixed(2)); 
    document.writeln(Math.PI.toFixed(4)); 
    document.writeln(Math.PI.toFixed(7)); //3.1415927

// toPrecision 換成十進位後 保留小數點( 1-21 bit ) 
    document.writeln(Math.PI.toPrecision(1)); //3 
    document.writeln(Math.PI.toPrecision(2)); //3.1 
    document.writeln(Math.PI.toPrecision(4)); //3.142 
    document.writeln(Math.PI.toPrecision(7)); //3.141593

// toString(radix) radix是基數 預設為10 換成十進位後 保留小數點( 2-36 bit ) 
    document.writeln(Math.PI.toString(2)); //11.001001000011111101101010100010001000010110100011
    document.writeln(Math.PI.toString(8)); //3.1103755242102643
    document.writeln(Math.PI.toString(16)); //3.243f6a8885a3 
    document.writeln(Math.PI.toString()); //3.141592653589793

（39）即時函數

(function(){
    var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
    var today = new Date()
    var msg = "Today is" + days[today.getDay()] + ',' + today.getDate()
    console.log(msg)
})();   // Today isThu,29


// 即時函數的參數
(function(who,when){
    console.log(' i met ' + who + ' on ' + when)
})("cynthia",new Date());  //i met cynthai on Thu Oct 29 2015 18:03:09 GMT+0800 (中國標準時間)

（40）組合繼承

// 組合繼承
// 其基本思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承

function Person(name){
  this.name = name;
  this.friends = ["Jack","John","Kim"];
}
Person.prototype.getName = function(){
  console.log(this.name);
}
function SuperPerson(name,sex){
 //繼承Person
 Person.call(this,name);/*第二次調用父類型的構造函數，在實例上又創建了一次屬性name和frieds，屏蔽第一次調用時創建的*/
 //實例屬性
 this.sex = sex;
}
SuperPerson.prototype = new Person();//重寫原型，第一次調用父類型的構造函數
SuperPerson.prototype.constructor = SuperPerson;
//添加新方法
SuperPerson.prototype.getSex = function(){
console.log(this.sex);
};
var Tom = new SuperPerson("Tom","man");
Tom.friends.push("Amy");
console.log(Tom.friends);// ["Jack", "John", "Kim", "Amy"]
Tom.getName();// Tom 
Tom.getSex();// man

var David = new SuperPerson("David","man");
console.log(David.friends);// ["Jack", "John", "Kim"]
David.getName();// David
David.getSex();// man 

（41）寄生繼承

// 寄生式繼承
// 其基本思路是類似創建對象時的工廠模式，將繼承過程封裝在一個函數里，然後返回一個對象

function createObject(o){
  var clone = Object.create(o);
  clone.sayHi = function(){
   console.log("Hi~");
  };
 return clone;
}
var person = {
  name: "Tom",
  friends:  ["Jack", "John", "Kim"]
};
var David = createObject(person);
David.sayHi();//Hi~

（42）原型式繼承

// 原型式繼承
// 其基本思路是藉助原型可以基於已有的對象創建新的對象

function object(o){
 function F(){}
 F.prototype = o;
 return new F();
}

var person = {
  name: "Tom",
  friends:  ["Jack", "John", "Kim"]
};
var David = object(person);
David.name = "David";
David.friends.push("Amy");
console.log(David.friends);// ["Jack", "John", "Kim", "Amy"]
var Rob = object(person);
Rob.name = "Rob";
console.log(Rob.friends);// ["Jack", "John", "Kim", "Amy"]

（43）原型鏈

// 原型鏈
// 其基本思路是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法

function Person(){
    this.name = "Person";
}
Person.prototype.getName = function(){
    return this.name;
}
function SuperPerson(name,sex){
    this.name = name;
    this.sex = sex;
}
SuperPerson.prototype = new Person();//重寫原型

//在添加新方法或重寫原型中的方法時，一定要在重寫原型的語句後面，而且不能使用字面量添加新方法，不然又會再一次重寫原型，原型鏈被切斷

SuperPerson.prototype.getSex = function(){
    return this.sex;
}

var Tom = new SuperPerson("Tom","man");
console.log(Tom.getName())
console.log(Tom.getSex())

（44）任意參數的加法運算

function add(){
           var sum = 0
           for(var i=0;i<arguments.length;i++){
               if(!isNaN(arguments[i])){
                 sum += parseFloat(arguments[i])
               }
           }
           return sum
        }
        console.log(add(1,2))
        console.log(add(1,2，3,4,5,6))

（45）閉包

var name = "cynthia"
        var obj = {
            name : "wuqian",
            sex : "girl",
            getName : function(){
                 return this.name
            } 
        }
        console.log(obj.getName()) //wuqian
        console.log(name)  //cynthia

(46)字面量

var cyn = {
            name : "wuqian",
            sex : "girl",
            Add : function(){
                var sum = 0
                for(var i=0;i<arguments.length;i++){
                   if(!isNaN(arguments[i])){
                     sum += parseFloat(arguments[i])        
                   }
                }
                return sum
            }  
        };
        cyn.say = function(){
            return "給對象字面量添加方法"
        }
        cyn.socre = "給對象字面量添加變數"

        console.log(cyn.Add(100,300))  //400
        console.log(cyn.say())  //給對象字面量添加方法
        console.log(cyn.socre)  //給對象字面量添加變數

(47)常用正則

//手機號驗證
var regMobile=/^1[3,5,8]\d{9}$/;
 
//固定電話
var regPhone=/^(^0\d{2}-?\d{8}$)|(^0\d{3}-?\d{7}$)|(^\(0\d{2}\)-?\d{8}$)|(^\(0\d{3}\)-?\d{7}$)$/;
 
/*
 * 用戶名
 * 只能是字母數字下劃線，並且以字母開頭(5-16位)
 */
var regUserName=/^[a-zA-Z]\w{4,15}$/;
 
 
 
//QQ
var regQQ=/^[1-9]*[1-9][0-9]*$/;
 
//email
var regEmail=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
 
//身份證號
var regIDcard=/^\d{15}$)|(^\d{17}([0-9]|X)$/;

（48）定時輸出

var cyn = function(){
    console.log("我是定時輸出的函數")
}
setInterval(cyn,1000)

（49）延時輸出

var cyn = function(){
    console.log("我是延時輸出的函數")
}
setTimeout(cyn,5000)

（50）字元的處理

// string.charAt(pos) 返回string中pos所在位置的字元
    var name = "Cynthia";
    var i = name.charAt(0)
    // alert(i)  //C

// string.charCodeAt(pos) 返回string中pos所在位置的字元的字元碼位
    var n = name.charCodeAt(0)
    // alert(n)  //67

// string.concat(string)
    var s = 'C'.concat('i','n','c','o')
    // alert(s)   // Cinco

// string.indexOf(searchString,position) "從頭到尾"在string中查找searchString字元，找到了，返回字元的位置;
// 否則，返回-1;position可以設置開始查找的位置
    var text = 'hello my name is wuqian'
    var p = text.indexOf('my');  //6
    var p = text.indexOf('my',13)   //-1
    // alert(p)


// string.lastIndexOf(searchString,position) "從尾到頭"在string中查找searchString字元，找到了，返回字元的位置;
// 否則，返回-1;position可以設置開始查找的位置 
    var text2 = 'hello my name is wuqian'
    var p2 = text2.lastIndexOf('my');  //6
    // var p2 = text2.lastIndexOf('s')   //15
    // alert(p2)


// string.match(regexp) 根據regexp正則要求對string進行匹配
    // var text3 = '<html><body><p>'+'this is <b>bold</b><\/p><\/body><\/html>'
    // var tags = /[^<>]+|<(\/?)([A-Za-z]+)(^<>*)>/g;
    // var a,i;
    // a = text3.match(tags);
    // for(i=0;i<a.length;i+=1){
    //     document.writeln(('// [' + i + ']' + a[i]).entityify());
    // }


//string.localeCompare(that)  比較
    var m = ['AAA','A','aa','a','Aa','aaa']
    m.sort(function(a,b){
        return a.localeCompare(b)
    })
    // alert(m)  // a,A,aa,AA,aaa,AAA


// string.replace(searchValue,replaceValue) searchValue如果是一個字元，那麼只會替換第一處
// searchValue如果是一個正則表達式
    var result = 'mother_in_law'.replace('_','-') 
    // alert(result) //mother-in_law


// string.slice(start,end) 複製start到end之間的string
    var q  = 'hello world ! an message from wuqian'
    var qm = q.slice(6,11)
    // alert(qm)  // world
   
// string.split(separator,limit)
    var digits = '0123456789'
    var a = digits.split('',5)
    alert(a)

//string.substring(start,end)  和slice一樣,不能處理負數

//string.toLocaleLowerCase()

//string.toLocaleUpperCase()

//string.toLowerCase()

//string.toUpperCase()

（51）找一組數當中最大的數

// 一般這樣做
            var number = [12,111,256,1,5,687,255,103]
        var max = 0 ;
        for(var i =0 ; i < number.length ;i++){
            if(number[i] > max){
                max = number[i]
            }
        }
        alert(max)
// 原生方法更簡單 如下
        var number = [12,111,256,1,5,687,255,103]
        number.sort(function(a,b){return b - a})
        alert(number[0])

// 更加簡介的方法 如下
        var a = Math.max(12,111,256,1,5,687,255,103)
        alert(a)