前端常見面試題

一.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)

 

（52）對象構造器

function Name(firstName,lastName){
    this.firstName = firstName ;
    this.lastName = lastName ;
}

var cynthia = new Name("wu","qian")

 

（53）自調用函數

(function(){
    // ...
})

(function(a,b){
    var result = a + b
    return result
}(10,20))

 

（54）從數組中隨機獲取成員

var items = [5,12,35,458,14,28,62,43,57,4,9,1,56]
var randomItem = items[Math.random()*length]
console.log(randomItem)

 

（55）獲取指定范圍的隨機數

var max = 250
var min = 1
var x = Math.floor(Math.random()*(max-min+1))-min
console.log(x)

 

（56）生成從0到指定值的數字數組

var numArray = []
var max = 101
for(var i=1;i<=max;i++){
    numArray.push(i)
}
console.log(numArray)

//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100…]

 

（57）生成從0到指定值的數字中奇數的數組

var numArray = []
var max = 101
for(var i=1;i<=max;i++){
    numArray.push(i++)
}
console.log(numArray)

//[1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39, 41, 43, 45, 47, 49, 51, 53, 55, 57, 59, 61, 63, 65, 67, 69, 71, 73, 75, 77, 79, 81, 83, 85, 87, 89, 91, 93, 95, 97, 99, 101]

 

(58) 獲取數組中的最大值和最小值

var num = [5,6,8,2,74,66,1587,2664,3,5,8,4,26598,898]
var max = Math.max.apply(Math,num)
var min = Math.min.apply(Math,num)
console.log(max)
console.log(min)

 

(59)清空數組

var myArray = [12 , 222 , 1000 ]; 
myArray.length = 0; 
console.log(myArray)

 

(60)寫一個switch/case例子

function Grade(grade){
    switch (grade){
        case 60:
            console.log("及格")
            break;
        case 70:
            console.log("良")
            break;
        case 90:
            console.log("優")
            break;
        default:
            console.log("exit")
            break
    }
}

Grade(70)

// case后面不能接判斷 必須是常量

 

（61）javascript數組迭代與歸並

// every() 對數組中的每一項運行給定函數，如果每一項都返回true,則返回true   


// filter() 對數組中的每一項運行給定函數，哪一項返回了true,則添加到數組中，返回數組


// forEach() 對數組中的每一項運行給定函數，沒有返回值


// map() 對數組中的每一項運行給定函數，返回每次調用的結果，組成的數組


// some() 對數組中的每一項運行給定函數，如果數組任意一項返回true，則返回true

 

（62）說說jquery中添加 after before append prepend的區別

   after 是在選中元素的后面  before是在選中元素的前面

  append 是在選中元素的內部的所有元素后面 prepend是在選中元素的內部的所有元素的前面