BAT及各大網際網路公司2014前端筆試面試題：JavaScript篇

發表於2014-08-14

BAT前端筆試面試題JavaScript

很多面試題是我自己面試BAT親身經歷碰到的。整理分享出來希望更多的前端er共同進步吧，不僅適用於求職者，對於鞏固複習前端基礎更是大有裨益。

而更多的題目是我一路以來收集的，也有往年的，答案不確保一定正確，如有錯誤或有更好的解法，還請斧正。

前面幾題是會很基礎，越下越有深度。

附上第二篇：BAT及各大網際網路公司2014前端筆試面試題–Html,Css篇

前面幾題是會很基礎，越下越有深度。

初級Javascript：

1.JavaScript是一門什麼樣的語言，它有哪些特點？

沒有標準答案。

2.JavaScript的資料型別都有什麼？

基本資料型別：String,boolean,Number,Undefined, Null

引用資料型別：Object(Array,Date,RegExp,Function)

那麼問題來了，如何判斷某變數是否為陣列資料型別？

方法一.判斷其是否具有“陣列性質”，如slice()方法。可自己給該變數定義slice方法，故有時會失效
方法二.obj instanceof Array 在某些IE版本中不正確
方法三.方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其相容性，最好的方法如下：

if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    };  
}

if(typeof Array.isArray==="undefined")

{

Array.isArray = function(arg){

return Object.prototype.toString.call(arg)==="[object Array]"

};

}

3.已知ID的Input輸入框，希望獲取這個輸入框的輸入值，怎麼做？(不使用第三方框架)

document.getElementById(“ID”).value

1	document.getElementById(“ID”).value

4.希望獲取到頁面中所有的checkbox怎麼做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//快取到區域性變數
while (len--) {　　//使用while的效率會比for迴圈更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

var domList = document.getElementsByTagName(‘input’)

var checkBoxList = [];

var len = domList.length;　　//快取到區域性變數

while (len--) {　　//使用while的效率會比for迴圈更高

　　if (domList[len].type == ‘checkbox’) {

　　checkBoxList.push(domList[len]);

　　}

5.設定一個已知ID的DIV的html內容為xxxx，字型顏色設定為黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”

var dom = document.getElementById(“ID”);

dom.innerHTML = “xxxx”

dom.style.color = “#000”

6.當一個DOM節點被點選時候，我們希望能夠執行一個函式，應該怎麼做？

直接在DOM裡繫結事件：<div onclick=”test()”></div>
在JS裡通過onclick繫結：xxx.onclick = test
通過事件新增進行繫結：addEventListener(xxx, ‘click’, test)

那麼問題來了，Javascript的事件流模型都有什麼？

“事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播
“事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的
“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡

7.什麼是Ajax和JSON，它們的優缺點。

Ajax是非同步JavaScript和XML，用於在Web頁面中實現非同步資料互動。

優點：

　可以使得頁面不過載全部內容的情況下載入區域性內容，降低資料傳輸量
　避免使用者不斷重新整理或者跳轉頁面，提高使用者體驗

缺點：

　對搜尋引擎不友好（
　要實現ajax下的前後退功能成本較大
　可能造成請求數的增加
　跨域問題限制

JSON是一種輕量級的資料交換格式，ECMA的一個子集

優點：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支援複合資料型別（陣列、物件、字串、數字）

8.看下列程式碼輸出為何？解釋原因。

var a;
alert(typeof a); // undefined
alert(b); // 報錯

var a;

alert(typeof a); // undefined

alert(b); // 報錯

解釋：Undefined是一個只有一個值的資料型別，這個值就是“undefined”，在使用var宣告變數但並未對其賦值進行初始化時，這個變數的值就是undefined。而b由於未宣告將報錯。注意未申明的變數和宣告瞭未賦值的是不一樣的。

9.看下列程式碼,輸出什麼？解釋原因。

var a = null;
alert(typeof a); //object

1 2	var a = null; alert(typeof a); //object

解釋：null是一個只有一個值的資料型別，這個值就是null。表示一個空指標物件，所以用typeof檢測會返回”object”。

10.看下列程式碼,輸出什麼？解釋原因。

var undefined;
undefined == null; // true
1 == true;   // true
2 == true;   // false
0 == false;  // true
0 == '';     // true
NaN == NaN;  // false
[] == false; // true
[] == ![];   // true

var undefined;

undefined == null; // true

1 == true; // true

2 == true; // false

0 == false; // true

0 == ''; // true

NaN == NaN; // false

[] == false; // true

[] == ![]; // true

undefined與null相等，但不恆等（===）
一個是number一個是string時，會嘗試將string轉換為number
嘗試將boolean轉換為number，0或1
嘗試將Object轉換成number或string，取決於另外一個對比量的型別
所以，對於0、空字串的判斷，建議使用 “===” 。“===”會先判斷兩邊的值型別，型別不匹配時為false。

那麼問題來了，看下面的程式碼，輸出什麼，foo的值為什麼？

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);

var foo = "11"+2-"1";

console.log(foo);

console.log(typeof foo);

執行完後foo的值為111，foo的型別為String。

11.看程式碼給答案。

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.value);

答案：2（考察引用資料型別細節）

12.已知陣列var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。

答案：alert(stringArray.join(“”))

已知有字串foo=”get-element-by-id”,寫一個function將其轉化成駝峰表示法”getElementById”。

function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}

function combo(msg){

var arr=msg.split("-");

for(var i=1;i<arr.length;i++){

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join("");

return msg;

}

(考察基礎API)

13.var numberArray = [3,6,2,4,1,5]; （考察基礎API）

1) 實現對該陣列的倒排，輸出[5,1,4,2,6,3]

2) 實現對該陣列的降序排列，輸出[6,5,4,3,2,1]

function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}

function combo(msg){

var arr=msg.split("-");

for(var i=1;i<arr.length;i++){

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join("");

return msg;

}

14.輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26

var d = new Date();
// 獲取年，getFullYear()返回4位的數字
var year = d.getFullYear();
// 獲取月，月份比較特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 變成兩位
month = month < 10 ? '0' + month : month;
// 獲取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

var d = new Date();

// 獲取年，getFullYear()返回4位的數字

var year = d.getFullYear();

// 獲取月，月份比較特殊，0是1月，11是12月

var month = d.getMonth() + 1;

// 變成兩位

month = month < 10 ? '0' + month : month;

// 獲取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

15.將字串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替換成10，{$name}替換成Tony （使用正規表示式）

答案：”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10’).replace(/{\$name}/g, ‘Tony’);

16.為了保證頁面輸出安全，我們經常需要對一些特殊的字元進行轉義，請寫一個函式escapeHtml，將<, >, &, “進行轉義

function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “&lt;”;
                   case “>”:
                      return “&gt;”;
                   case “&”:
                      return “&amp;”;
                   case “\””:
                      return “&quot;”;
      }
  });
}

function escapeHtml(str) {

return str.replace(/[<>”&]/g, function(match) {

switch (match) {

case “<”:

return “<”;

case “>”:

return “>”;

case “&”:

return “&”;

case “\””:

return “"”;

}

});

}

17.foo = foo||bar ，這行程式碼是什麼意思？為什麼要這樣寫？

答案：if(!foo) foo = bar; //如果foo存在，值不變，否則把bar的值賦給foo。

短路表示式：作為”&&”和”||”操作符的運算元表示式，這些表示式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。

18.看下列程式碼，將會輸出什麼?(變數宣告提升)

var foo = 1;
function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
}

var foo = 1;

function(){

console.log(foo);

var foo = 2;

console.log(foo);

}

答案：輸出undefined 和 2。上面程式碼相當於：

var foo = 1;
function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;   
}

var foo = 1;

function(){

var foo;

console.log(foo); //undefined

foo = 2;

console.log(foo); // 2;

}

函式宣告與變數宣告會被JavaScript引擎隱式地提升到當前作用域的頂部，但是隻提升名稱不會提升賦值部分。

19.用js實現隨機選取10–100之間的10個數字，存入一個陣列，並排序。

var iArray = []; 
funtion getRandom(istart, iend){
        var iChoice = istart - iend +1;
        return Math.floor(Math.random() * iChoice + istart;
}
for(var i=0; i<10; i++){
        iArray.push(getRandom(10,100));
}
iArray.sort();

var iArray = [];

funtion getRandom(istart, iend){

var iChoice = istart - iend +1;

return Math.floor(Math.random() * iChoice + istart;

}

for(var i=0; i<10; i++){

iArray.push(getRandom(10,100));

}

iArray.sort();

20.把兩個陣列合並，並刪除第二個元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

var array1 = ['a','b','c'];

var bArray = ['d','e','f'];

var cArray = array1.concat(bArray);

cArray.splice(1,1);

21.怎樣新增、移除、移動、複製、建立和查詢節點（原生JS，實在基礎，沒細寫每一步）

1）建立新節點

createDocumentFragment() //建立一個DOM片段

createElement() //建立一個具體的元素

createTextNode() //建立一個文字節點

2）新增、移除、替換、插入

appendChild() //新增

removeChild() //移除

replaceChild() //替換

insertBefore() //插入

3）查詢

getElementsByTagName() //通過標籤名稱

getElementsByName() //通過元素的Name屬性的值

getElementById() //通過元素Id，唯一性

22.有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程式提取URL中的各個GET引數(引數名和引數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

答案：

function serilizeUrl(url) {
    var result = {};
    url = url.split("?")[1];
    var map = url.split("&");
    for(var i = 0, len = map.length; i < len; i++) {
        result[map[i].split("=")[0]] = map[i].split("=")[1];
    }
    return result;
}

function serilizeUrl(url) {

var result = {};

url = url.split("?")[1];

var map = url.split("&");

for(var i = 0, len = map.length; i < len; i++) {

result[map[i].split("=")[0]] = map[i].split("=")[1];

}

return result;

}

23.正規表示式建構函式var reg=new RegExp(“xxx”)與正則表達字面量var reg=//有什麼不同？匹配郵箱的正規表示式？

答案：當使用RegExp()建構函式的時候，不僅需要轉義引號（即\”表示”），並且還需要雙反斜槓（即\\表示一個\）。使用正則表達字面量的效率更高。

郵箱的正則匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

1	var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

24.看下面程式碼，給出輸出結果。

for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);    
  },0);  
};

for(var i=1;i<=3;i++){

setTimeout(function(){

console.log(i);

},0);

};

答案：4 4 4。

原因：Javascript事件處理器線上程空閒之前不會執行。追問，如何讓上述程式碼輸出1 2 3？

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即執行函式
       console.log(a);    
   })(i),0);  
};

1           //輸出
2
3

for(var i=1;i<=3;i++){

setTimeout((function(a){ //改成立即執行函式

console.log(a);

})(i),0);

};

1 //輸出

25.寫一個function，清除字串前後的空格。（相容所有瀏覽器）

使用自帶介面trim()，考慮相容性：

if (!String.prototype.trim) { 
 String.prototype.trim = function() { 
 return this.replace(/^\s+/, "").replace(/\s+$/,"");
 } 
} 

// test the function 
var str = " \t\n test string ".trim(); 
alert(str == "test string"); // alerts "true"

if (!String.prototype.trim) {

String.prototype.trim = function() {

return this.replace(/^\s+/, "").replace(/\s+$/,"");

}

// test the function

var str = " \t\n test string ".trim();

alert(str == "test string"); // alerts "true"

26.Javascript中callee和caller的作用？

答案：

caller是返回一個對函式的引用，該函式呼叫了當前函式；

callee是返回正在被執行的function函式，也就是所指定的function物件的正文。

那麼問題來了？如果一對兔子每月生一對兔子；一對新生兔，從第二個月起就開始生兔子；假定每對兔子都是一雌一雄，試問一對兔子，第n個月能繁殖成多少對兔子？（使用callee完成）

var result=[];
function fn(n){  //典型的斐波那契數列
   if(n==1){
        return 1;
   }else if(n==2){
           return 1;
   }else{
        if(result[n]){
                return result[n];
        }else{
                //argument.callee()表示fn()
                result[n]=arguments.callee(n-1)+arguments.callee(n-2);
                return result[n];
        }
   }
}

var result=[];

function fn(n){ //典型的斐波那契數列

if(n==1){

return 1;

}else if(n==2){

return 1;

}else{

if(result[n]){

return result[n];

}else{

//argument.callee()表示fn()

result[n]=arguments.callee(n-1)+arguments.callee(n-2);

return result[n];

}

中級Javascript：

1.實現一個函式clone，可以對JavaScript中的5種主要的資料型別（包括Number、String、Object、Array、Boolean）進行值複製

考察點1：對於基本資料型別和引用資料型別在記憶體中存放的是值還是指標這一區別是否清楚
考察點2：是否知道如何判斷一個變數是什麼型別的
考察點3：遞迴演算法的設計

// 方法一：
Object.prototype.clone = function(){
        var o = this.constructor === Array ? [] : {};
        for(var e in this){
                o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
        }
        return o;
}

//方法二：
  /**
     * 克隆一個物件
     * @param Obj
     * @returns
     */ 
    function clone(Obj) {   
        var buf;   
        if (Obj instanceof Array) {   
            buf = [];                    //建立一個空的陣列 
            var i = Obj.length;   
            while (i--) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;    
        }else if (Obj instanceof Object){   
            buf = {};                   //建立一個空物件 
            for (var k in Obj) {           //為這個物件新增新的屬性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }else{                         //普通變數直接賦值
            return Obj;   
        }   
    }

// 方法一：

Object.prototype.clone = function(){

var o = this.constructor === Array ? [] : {};

for(var e in this){

o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];

}

return o;

}

//方法二：

/**

* 克隆一個物件

* @param Obj

* @returns

function clone(Obj) {

var buf;

if (Obj instanceof Array) {

buf = []; //建立一個空的陣列

var i = Obj.length;

while (i--) {

buf[i] = clone(Obj[i]);

}

return buf;

}else if (Obj instanceof Object){

buf = {}; //建立一個空物件

for (var k in Obj) { //為這個物件新增新的屬性

buf[k] = clone(Obj[k]);

}

return buf;

}else{ //普通變數直接賦值

return Obj;

}

2.如何消除一個陣列裡面重復的元素？

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
        function deRepeat(){
            var newArr=[];
            var obj={};
            var index=0;
            var l=arr.length;
            for(var i=0;i<l;i++){
                if(obj[arr[i]]==undefined)
                  {
                    obj[arr[i]]=1;
                    newArr[index++]=arr[i];
                  }
                else if(obj[arr[i]]==1)
                  continue;
            }
            return newArr;

        }
        var newArr2=deRepeat(arr);
        alert(newArr2); //輸出1,2,3,4,5,6,9,25

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];

function deRepeat(){

var newArr=[];

var obj={};

var index=0;

var l=arr.length;

for(var i=0;i<l;i++){

if(obj[arr[i]]==undefined)

{

obj[arr[i]]=1;

newArr[index++]=arr[i];

}

else if(obj[arr[i]]==1)

continue;

}

return newArr;

}

var newArr2=deRepeat(arr);

alert(newArr2); //輸出1,2,3,4,5,6,9,25

3.小賢是一條可愛的小狗(Dog)，它的叫聲很好聽(wow)，每次看到主人的時候就會乖乖叫一聲(yelp)。從這段描述可以得到以下物件：

function Dog() {
       this.wow = function() {
               alert(’Wow’);
      }
       this.yelp = function() {
              this.wow();
      }
}

function Dog() {

this.wow = function() {

alert(’Wow’);

}

this.yelp = function() {

this.wow();

}

小芒和小賢一樣，原來也是一條可愛的小狗，可是突然有一天瘋了(MadDog)，一看到人就會每隔半秒叫一聲(wow)地不停叫喚(yelp)。請根據描述，按示例的形式用程式碼來實。（繼承，原型，setInterval）

答案：

function MadDog() {
    this.yelp = function() {
          var self = this;          
          setInterval(function() {
                self.wow();      
          }, 500);
      }
}
MadDog.prototype = new Dog();         

//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

function MadDog() {

this.yelp = function() {

var self = this;

setInterval(function() {

self.wow();

}, 500);

}

MadDog.prototype = new Dog();

//for test

var dog = new Dog();

dog.yelp();

var madDog = new MadDog();

madDog.yelp();

4.下面這個ul，如何點選每一列的時候alert其index?（閉包）

<ul id=”test”>
<li>這是第一條</li>
<li>這是第二條</li>
<li>這是第三條</li>
</ul>

<li>這是第一條</li>

<li>這是第二條</li>

<li>這是第三條</li>

</ul>

答案：

// 方法一：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
    lis[i].index=i;
    lis[i].onclick=function(){
        alert(this.index);
    };
}

//方法二：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
    lis[i].index=i;
    lis[i].onclick=(function(a){
        return function() {
            alert(a);
        }
    })(i);
}

// 方法一：

var lis=document.getElementById('2223').getElementsByTagName('li');

for(var i=0;i<3;i++)

{

lis[i].index=i;

lis[i].onclick=function(){

alert(this.index);

};

}

//方法二：

var lis=document.getElementById('2223').getElementsByTagName('li');

for(var i=0;i<3;i++)

{

lis[i].index=i;

lis[i].onclick=(function(a){

return function() {

alert(a);

}

})(i);

}

5.編寫一個JavaScript函式，輸入指定型別的選擇器(僅需支援id，class，tagName三種簡單CSS選擇器，無需相容組合選擇器)可以返回匹配的DOM節點，需考慮瀏覽器相容性和效能。

/*** @param selector {String} 傳入的CSS選擇器。* @return {Array}*/

答案：

var query = function(selector) {
                var reg = /^(#)?(\.)?(\w+)$/img;
                var regResult = reg.exec(selector);
                var result = [];
                //如果是id選擇器
                if(regResult[1]) {
                    if(regResult[3]) {
                        if(typeof document.querySelector === "function") {
                            result.push(document.querySelector(regResult[3]));
                        }
                        else {
                            result.push(document.getElementById(regResult[3]));
                        }
                    }
                }
                //如果是class選擇器
                else if(regResult[2]) {
                    if(regResult[3]) {
                        if(typeof document.getElementsByClassName === 'function') {
                            var doms = document.getElementsByClassName(regResult[3]);
                            if(doms) {
                                result = converToArray(doms);
                            }
                        }
                        //如果不支援getElementsByClassName函式
                        else {
                            var allDoms = document.getElementsByTagName("*") ;
                            for(var i = 0, len = allDoms.length; i < len; i++) {
                                if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
                                    result.push(allDoms[i]);
                                }
                            }
                        }
                    }
                }
                //如果是標籤選擇器
                else if(regResult[3]) {
                    var doms = document.getElementsByTagName(regResult[3].toLowerCase());
                    if(doms) {
                        result = converToArray(doms);
                    }
                }
                return result;
            }

            function converToArray(nodes){
                  var array = null;         
                  try{        
                        array = Array.prototype.slice.call(nodes,0);//針對非IE瀏覽器         
                  }catch(ex){
                      array = new Array();         
                      for( var i = 0 ,len = nodes.length; i < len ; i++ ) { 
                          array.push(nodes[i])         
                      }         
                  }      
                  return array;
          }

var query = function(selector) {

var reg = /^(#)?(\.)?(\w+)$/img;

var regResult = reg.exec(selector);

var result = [];

//如果是id選擇器

if(regResult[1]) {

if(regResult[3]) {

if(typeof document.querySelector === "function") {

result.push(document.querySelector(regResult[3]));

}

else {

result.push(document.getElementById(regResult[3]));

}

//如果是class選擇器

else if(regResult[2]) {

if(regResult[3]) {

if(typeof document.getElementsByClassName === 'function') {

var doms = document.getElementsByClassName(regResult[3]);

if(doms) {

result = converToArray(doms);

}

//如果不支援getElementsByClassName函式

else {

var allDoms = document.getElementsByTagName("*") ;

for(var i = 0, len = allDoms.length; i < len; i++) {

if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {

result.push(allDoms[i]);

}

//如果是標籤選擇器

else if(regResult[3]) {

var doms = document.getElementsByTagName(regResult[3].toLowerCase());

if(doms) {

result = converToArray(doms);

}

return result;

}

function converToArray(nodes){

var array = null;

try{

array = Array.prototype.slice.call(nodes,0);//針對非IE瀏覽器

}catch(ex){

array = new Array();

for( var i = 0 ,len = nodes.length; i < len ; i++ ) {

array.push(nodes[i])

}

return array;

}

6.請評價以下程式碼並給出改進意見。

if(window.addEventListener){
    var addListener = function(el,type,listener,useCapture){
        el.addEventListener(type,listener,useCapture);
  };
}
else if(document.all){
    addListener = function(el,type,listener){
        el.attachEvent("on"+type,function(){
          listener.apply(el);
      });
   }  
}

if(window.addEventListener){

var addListener = function(el,type,listener,useCapture){

el.addEventListener(type,listener,useCapture);

};

}

else if(document.all){

addListener = function(el,type,listener){

el.attachEvent("on"+type,function(){

listener.apply(el);

});

}

評價：

　不應該在if和else語句中宣告addListener函式，應該先宣告；
　不需要使用window.addEventListener或document.all來進行檢測瀏覽器，應該使用能力檢測；
　由於attachEvent在IE中有this指向問題，所以呼叫它時需要處理一下

改進如下：

function addEvent(elem, type, handler){
　　if(elem.addEventListener){
　　　　elem.addEventListener(type, handler, false);
　　}else if(elem.attachEvent){
　　　　elem['temp' + type + handler] = handler;
　　　　elem[type + handler] = function(){
　　　　elem['temp' + type + handler].apply(elem);
　　};
　　elem.attachEvent('on' + type, elem[type + handler]);　
  }else{
　　elem['on' + type] = handler;
　　}
}

function addEvent(elem, type, handler){

　　if(elem.addEventListener){

　　　　elem.addEventListener(type, handler, false);

　　}else if(elem.attachEvent){

　　　　elem['temp' + type + handler] = handler;

　　　　elem[type + handler] = function(){

　　　　elem['temp' + type + handler].apply(elem);

　　};

　　elem.attachEvent('on' + type, elem[type + handler]);　

}else{

　　elem['on' + type] = handler;

　　}

7.給String物件新增一個方法，傳入一個string型別的引數，然後將string的每個字元間價格空格返回，例如：

addSpace(“hello world”) // -> ‘h e l l o w o r l d’

String.prototype.spacify = function(){
      return this.split('').join(' ');
    };

String.prototype.spacify = function(){

return this.split('').join(' ');

};

接著上述問題答案提問，1）直接在物件的原型上新增方法是否安全？尤其是在Object物件上。(這個我沒能答出？希望知道的說一下。)　2）函式宣告與函式表示式的區別？

答案：在js中，解析器在向執行環境中載入資料時，對函式宣告和函式表示式並非是一視同仁的，解析器會率先讀取函式宣告，並使其在執行任何程式碼之前可用（可以訪問），至於函式表示式，則必須等到解析器執行到它所在的程式碼行，才會真正被解析執行。

8.定義一個log方法，讓它可以代理console.log的方法。

可行的方法一：

function log(msg)　{
    console.log(msg);
}

log("hello world!") // hello world!

function log(msg)　{

console.log(msg);

}

log("hello world!") // hello world!

如果要傳入多個引數呢？顯然上面的方法不能滿足要求，所以更好的方法是：

function log(){
    console.log.apply(console, arguments);
};

function log(){

console.log.apply(console, arguments);

};

到此，追問apply和call方法的異同。

答案：

對於apply和call兩者在作用上是相同的，即是呼叫一個物件的一個方法，以另一個物件替換當前物件。將一個函式的物件上下文從初始的上下文改變為由 thisObj 指定的新物件。

但兩者在引數上有區別的。對於第一個引數意義都一樣，但對第二個引數： apply傳入的是一個引數陣列，也就是將多個引數組合成為一個陣列傳入，而call則作為call的引數傳入（從第二個引數開始）。如 func.call(func1,var1,var2,var3)對應的apply寫法為：func.apply(func1,[var1,var2,var3]) 。

9.在Javascript中什麼是偽陣列？如何將偽陣列轉化為標準陣列？

答案：

偽陣列（類陣列）：無法直接呼叫陣列方法或期望length屬性有什麼特殊的行為，但仍可以對真正陣列遍歷方法來遍歷它們。典型的是函式的argument引數，還有像呼叫getElementsByTagName,document.childNodes之類的,它們都返回NodeList物件都屬於偽陣列。可以使用Array.prototype.slice.call(fakeArray)將陣列轉化為真正的Array物件。

假設接第八題題幹，我們要給每個log方法新增一個”(app)”字首，比如’hello world!’ ->'(app)hello world!’。方法如下：

function log(){
      var args = Array.prototype.slice.call(arguments);  //為了使用unshift陣列方法，將argument轉化為真正的陣列
      args.unshift('(app)');

      console.log.apply(console, args);
    };

function log(){

var args = Array.prototype.slice.call(arguments); //為了使用unshift陣列方法，將argument轉化為真正的陣列

args.unshift('(app)');

console.log.apply(console, args);

};

10.對作用域上下文和this的理解，看下列程式碼：

var User = {
  count: 1,

  getCount: function() {
    return this.count;
  }
};

console.log(User.getCount());  // what?

var func = User.getCount;
console.log(func());  // what?

var User = {

count: 1,

getCount: function() {

return this.count;

}

};

console.log(User.getCount()); // what?

var func = User.getCount;

console.log(func()); // what?

問兩處console輸出什麼？為什麼？

答案是1和undefined。

func是在winodw的上下文中被執行的，所以會訪問不到count屬性。

繼續追問，那麼如何確保Uesr總是能訪問到func的上下文，即正確返回1。正確的方法是使用Function.prototype.bind。相容各個瀏覽器完整程式碼如下：

Function.prototype.bind = Function.prototype.bind || function(context){
   var self = this;

   return function(){
      return self.apply(context, arguments);
   };
}

var func = User.getCount.bind(User);
console.log(func());

Function.prototype.bind = Function.prototype.bind || function(context){

var self = this;

return function(){

return self.apply(context, arguments);

};

}

var func = User.getCount.bind(User);

console.log(func());

11.原生JS的window.onload與Jquery的$(document).ready(function(){})有什麼不同？如何用原生JS實現Jq的ready方法？

window.onload()方法是必須等到頁面內包括圖片的所有元素載入完畢後才能執行。

$(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。

/*
 * 傳遞函式給whenReady()
 * 當文件解析完畢且為操作準備就緒時，函式作為document的方法呼叫
 */
var whenReady = (function() {               //這個函式返回whenReady()函式
    var funcs = [];             //當獲得事件時，要執行的函式
    var ready = false;          //當觸發事件處理程式時,切換為true

    //當文件就緒時,呼叫事件處理程式
    function handler(e) {
        if(ready) return;       //確保事件處理程式只完整執行一次

        //如果發生onreadystatechange事件，但其狀態不是complete的話,那麼文件尚未準備好
        if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
            return;
        }

        //執行所有註冊函式
        //注意每次都要計算funcs.length
        //以防這些函式的呼叫可能會導致註冊更多的函式
        for(var i=0; i<funcs.length; i++) {
            funcs[i].call(document);
        }
        //事件處理函式完整執行,切換ready狀態, 並移除所有函式
        ready = true;
        funcs = null;
    }
    //為接收到的任何事件註冊處理程式
    if(document.addEventListener) {
        document.addEventListener('DOMContentLoaded', handler, false);
        document.addEventListener('readystatechange', handler, false);            //IE9+
        window.addEventListener('load', handler, false);
    }else if(document.attachEvent) {
        document.attachEvent('onreadystatechange', handler);
        window.attachEvent('onload', handler);
    }
    //返回whenReady()函式
    return function whenReady(fn) {
        if(ready) { fn.call(document); }
        else { funcs.push(fn); }
    }
})();

* 傳遞函式給whenReady()

* 當文件解析完畢且為操作準備就緒時，函式作為document的方法呼叫

var whenReady = (function() { //這個函式返回whenReady()函式

var funcs = []; //當獲得事件時，要執行的函式

var ready = false; //當觸發事件處理程式時,切換為true

//當文件就緒時,呼叫事件處理程式

function handler(e) {

if(ready) return; //確保事件處理程式只完整執行一次

//如果發生onreadystatechange事件，但其狀態不是complete的話,那麼文件尚未準備好

if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {

return;

}

//執行所有註冊函式

//注意每次都要計算funcs.length

//以防這些函式的呼叫可能會導致註冊更多的函式

for(var i=0; i<funcs.length; i++) {

funcs[i].call(document);

}

//事件處理函式完整執行,切換ready狀態, 並移除所有函式

ready = true;

funcs = null;

}

//為接收到的任何事件註冊處理程式

if(document.addEventListener) {

document.addEventListener('DOMContentLoaded', handler, false);

document.addEventListener('readystatechange', handler, false); //IE9+

window.addEventListener('load', handler, false);

}else if(document.attachEvent) {

document.attachEvent('onreadystatechange', handler);

window.attachEvent('onload', handler);

}

//返回whenReady()函式

return function whenReady(fn) {

if(ready) { fn.call(document); }

else { funcs.push(fn); }

}

})();

如果上述程式碼十分難懂，下面這個簡化版：

function ready(fn){
    if(document.addEventListener) {        //標準瀏覽器
        document.addEventListener('DOMContentLoaded', function() {
            //登出事件, 避免反覆觸發
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();            //執行函式
        }, false);
    }else if(document.attachEvent) {        //IE
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();        //函式執行
            }
        });
    }
};

function ready(fn){

if(document.addEventListener) { //標準瀏覽器

document.addEventListener('DOMContentLoaded', function() {

//登出事件, 避免反覆觸發

document.removeEventListener('DOMContentLoaded',arguments.callee, false);

fn(); //執行函式

}, false);

}else if(document.attachEvent) { //IE

document.attachEvent('onreadystatechange', function() {

if(document.readyState == 'complete') {

document.detachEvent('onreadystatechange', arguments.callee);

fn(); //函式執行

}

});

}

};

12.（設計題）想實現一個對頁面某個節點的拖曳？如何做？（使用原生JS）

回答出概念即可，下面是幾個要點

給需要拖拽的節點繫結mousedown, mousemove, mouseup事件
mousedown事件觸發後，開始拖拽
mousemove時，需要通過event.clientX和clientY獲取拖拽位置，並實時更新位置
mouseup時，拖拽結束
需要注意瀏覽器邊界的情況

13.

function setcookie(name,value,days){  //給cookie增加一個時間變數
　　var exp = new Date(); 
　　exp.setTime(exp.getTime() + days*24*60*60*1000); //設定過期時間為days天
　　document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
function getCookie(name){
　　var result = "";
　　var myCookie = ""+document.cookie+";"; 
　　var searchName = "+name+"=";
　　var startOfCookie = myCookie.indexOf(searchName);
　　var endOfCookie;
　　if(satrtOfCookie != -1){
　　　　startOfcookie += searchName.length;
　　　　endOfCookie = myCookie.indexOf(";",startOfCookie);
　　　　result = (myCookie.substring(startOfCookie,endOfCookie));
　　}
　　return result;
}
(function(){
　　var oTips = document.getElementById('tips');//假設tips的id為tips
　　var page = {
　　check: function(){//檢查tips的cookie是否存在並且允許顯示
　　　　var tips = getCookie('tips');
　　　　if(!tips || tips == 'show') return true;//tips的cookie不存在
　　　　if(tips == "never_show_again") return false;
　　},
　　hideTip: function(bNever){
　　　　if(bNever) setcookie('tips', 'never_show_again', 365);
　　　　oTips.style.display = "none";//隱藏
　　},
　　showTip: function(){
　　oTips.style.display = "inline";//顯示，假設tips為行級元素
　　},
　　init: function(){
　　　　var _this = this;
　　　　if(this.check()){
　　　　_this.showTip();
　　　　setcookie('tips', 'show', 1);
　　}
　　oTips.onclick = function(){
　　　　_this.hideTip(true);
　　};
　　}
　　};
  page.init();
})();

function setcookie(name,value,days){ //給cookie增加一個時間變數

　　var exp = new Date();

　　exp.setTime(exp.getTime() + days*24*60*60*1000); //設定過期時間為days天

　　document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

function getCookie(name){

　　var result = "";

　　var myCookie = ""+document.cookie+";";

　　var searchName = "+name+"=";

　　var startOfCookie = myCookie.indexOf(searchName);

　　var endOfCookie;

　　if(satrtOfCookie != -1){

　　　　startOfcookie += searchName.length;

　　　　endOfCookie = myCookie.indexOf(";",startOfCookie);

　　　　result = (myCookie.substring(startOfCookie,endOfCookie));

　　}

　　return result;

}

(function(){

　　var oTips = document.getElementById('tips');//假設tips的id為tips

　　var page = {

　　check: function(){//檢查tips的cookie是否存在並且允許顯示

　　　　var tips = getCookie('tips');

　　　　if(!tips || tips == 'show') return true;//tips的cookie不存在

　　　　if(tips == "never_show_again") return false;

　　hideTip: function(bNever){

　　　　if(bNever) setcookie('tips', 'never_show_again', 365);

　　　　oTips.style.display = "none";//隱藏

　　showTip: function(){

　　oTips.style.display = "inline";//顯示，假設tips為行級元素

　　init: function(){

　　　　var _this = this;

　　　　if(this.check()){

　　　　_this.showTip();

　　　　setcookie('tips', 'show', 1);

　　}

　　oTips.onclick = function(){

　　　　_this.hideTip(true);

　　};

　　}

　　};

page.init();

})();

14.說出以下函式的作用是？空白區域應該填寫什麼？

//define 
(function(window){
    function fn(str){
        this.str=str;
    }

    fn.prototype.format = function(){
        var arg = ______;
        return this.str.replace(_____,function(a,b){
             return arg[b]||"";
      });
    }
    window.fn = fn;
})(window);

//use
(function(){
    var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
    console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
})();

//define

(function(window){

function fn(str){

this.str=str;

}

fn.prototype.format = function(){

var arg = ______;

return this.str.replace(_____,function(a,b){

return arg[b]||"";

});

}

window.fn = fn;

})(window);

//use

(function(){

var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');

console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));

})();

答案：訪函式的作用是使用format函式將函式的引數替換掉{0}這樣的內容，返回一個格式化後的結果：

第一個空是：arguments

第二個空是：/\{(\d+)\}/ig

15.用物件導向的Javascript來介紹一下自己。（沒答案哦親，自己試試吧）

答案：物件或者Json都是不錯的選擇哦，

覺得題目還ok的親點個推薦哦，題量會不斷增加。

你可能會感興趣：BAT及各大網際網路公司2014前端筆試面試題–Html,Css篇

暫且貼出我做出答案的部分。有時間把未做出答案也貼出來。針對文中各題，如有更好的解決方法或者錯誤之處，各位親務必告知我，誤人子弟實乃罪過。

覺得題目還ok的親點個推薦哦，題量會不斷增加。

BAT及各大網際網路公司2014前端筆試面試題：HTML/CSS篇
2014-08-03
BAT前端筆試面試題HTMLCSS
各大網際網路公司2014前端筆試面試題–JavaScript篇
2014-10-20
前端筆試面試題JavaScript
各大網際網路公司2014前端筆試面試題–HTML,CSS篇
2014-10-20
前端筆試面試題HTMLCSS
各大網際網路公司面試流程及面試題彙總
2020-03-16
面試題
各大網際網路公司薪水大比拼
2016-03-30
模仿各大網際網路公司官方網站原始碼
2020-01-05
網站原始碼
大型網際網路公司必考java面試題與面試技巧
2018-11-14
Java面試題
網際網路公司面試必問的Redis題目
2018-09-13
面試Redis
各大網際網路公司架構演進之路彙總
2018-06-29
架構
網際網路公司面試必問的mysql題目(上)
2018-09-26
面試MySql
網際網路公司面試必問的mysql題目(下）
2018-09-19
面試MySql
大資料類工程師面試題集錦附指南：網際網路公司篇！
2018-12-25
大資料工程師面試題
國內一線網際網路公司內部面試題庫
2017-03-30
面試題
中概網際網路QDII獲批瞄準BAT等公司
2015-03-02
BAT
網際網路公司最常見的面試演算法題有哪些？
2020-04-03
面試演算法
前端面試筆記 – 網路
2019-02-16
前端面試筆記
2014網際網路公司招聘的奇葩故事
2014-11-18
各大網際網路Java面試題彙總，最後我成功拿到百度的offer
2018-06-13
Java面試題
網際網路的寒冬下各大一線網際網路公司還在用SpringBoot這是為什麼？
2020-07-15
Spring Boot
[原創]網際網路公司App測試流程
2014-09-04
APP
阿里、京東、美團等主流網際網路公司的最新面試題出爐
2018-09-12
阿里面試題
[網際網路]網際網路公司的種類
2020-10-10
各大網際網路公司的 Java 類校招對本科生的要求
2018-03-12
Java
如何才能透過一線網際網路公司面試？
2020-01-14
面試
分享：一線網際網路公司的面試經驗
2018-04-18
面試
美團上位，網際網路再無BAT
2019-05-23
BAT
網際網路從此沒有 BAT
2022-12-06
BAT
進擊的BAT吞噬網際網路多少公司選擇站隊求生
2015-10-19
BAT
國內數一數二的網際網路公司內部面試題庫
2018-06-12
面試題
前端面試之路五(網路HTTP篇)
2018-12-25
前端面試HTTP
前端開發應屆生面試指南（含各大公司具體指南及面試真題）
2017-11-04
前端面試
各大IT公司2012校園招聘筆試面試整理
2012-07-13
筆試面試
跳槽可閱！網際網路公司DBA面試指南集錦！
2018-06-08
面試
網際網路 Java 工程師面試題（Spring 面試題一）
2020-05-11
Java工程師面試題Spring
網際網路公司眾生相
2015-04-21
前端高頻面試題JavaScript篇
2018-06-25
前端面試題JavaScript
《網際網路時代》筆記及觀後感
2017-05-07
筆記
一線網際網路公司機器學習崗位面試經驗
2016-10-21
機器學習面試

BAT及各大網際網路公司2014前端筆試面試題：JavaScript篇

初級Javascript：

中級Javascript：

相關文章