摘要：前言原文地址我的博客知乎知乎專(zhuān)欄簡(jiǎn)書(shū)河南前端交流群官網(wǎng)上次寫(xiě)了一篇幾個(gè)讓我印象深刻的面試題一沒(méi)看過(guò)的同學(xué)可以去看哦。第八題請(qǐng)寫(xiě)出以下正則表達(dá)式的詳細(xì)規(guī)則說(shuō)明嘿嘿，正則也算我比較拿手的部分。

原文地址&&我的博客
知乎&&知乎專(zhuān)欄
簡(jiǎn)書(shū)
河南前端交流群官網(wǎng)

上次寫(xiě)了一篇幾個(gè)讓我印象深刻的面試題(一)沒(méi)看過(guò)的同學(xué)可以去看哦。
這次文章的題目來(lái)源：這里有超過(guò)20家的前端面試題，你確定不點(diǎn)進(jìn)來(lái)看看？。
如果上面的問(wèn)題在我這篇文章里沒(méi)有提到的話(huà)，那就說(shuō)明有些問(wèn)題可以很容易查得到或者很簡(jiǎn)單或者我能力有限不能解答出來(lái)的。如果有的問(wèn)題你不會(huì)而且我又沒(méi)有提的那就認(rèn)為就是我能力有限不能解答出來(lái)吧。嘿嘿嘿。開(kāi)個(gè)玩笑，不過(guò)可以在下面留言哦！

還是老規(guī)矩先給題目，然后在看我的答案，有什么意見(jiàn)可以在留言板提。

請(qǐng)問(wèn)a，b，c分別輸出什么？

function fun(n,o){
    console.log(o)
    return{
      fun:function(m){
         return fun(m,n);
      }
    };
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1); c.fun(2); c.fun(3);

用盡可能多的方法找出數(shù)組中重復(fù)出現(xiàn)過(guò)的元素

例如：[1，2，4，4，3，3，1，5，3]

輸出：[1，3，4]

給定一些文檔（docs）、詞（words），找出詞在文檔中全部存在的所有文檔

var docs = [{
        id: 1,
        words: ["hello","world"]
    },
    {
        id: 2,
        words: ["hello","kids"]
    },
    {
        id: 3,
        words: ["zzzz","hello"]
    },
    {
        id: 4,
        words: ["world","kids"]
    }
 ];
findDocList(docs,["hello"]) //文檔1，文檔2，文檔3
findDocList(docs,["hello","world"]) //文檔1

下面代碼會(huì)輸出什么？

var test = (function(a){
    this.a = a;
    return function(b){
        return this.a + b;
    }
    }(function(a,b){
        return a;
    }(1,2)));
console.log(test(1));

不用循環(huán)，創(chuàng)建一個(gè)長(zhǎng)度為 100 的數(shù)組，并且每個(gè)元素的值等于它的下標(biāo)。

一個(gè)整數(shù)，它的各位數(shù)字如果是左右對(duì)稱(chēng)的，則這個(gè)數(shù)字是對(duì)稱(chēng)數(shù)。那么請(qǐng)找出 1 至 10000 中所有的對(duì)稱(chēng)數(shù)

以下代碼輸出結(jié)果是什么？

var myObject = {
    foo: "bar",
    func: function(){
         var self = this;
         console.log("outer func : this.foo" + this.foo);
         console.log("outer func : self.foo" + self.foo);
         (function(){
             console.log("inner func : this.foo" + this.foo);
             console.log("inner func : self.foo" + self.foo);
         })();
    }
};
myObject.func();

請(qǐng)寫(xiě)出以下正則表達(dá)式的詳細(xì)規(guī)則說(shuō)明
/^(0[1-9]dd?)?[1-9]d{6}d?$/

/^(1[89]|[2-9]d|100)$/i
/^[w-]+@[a-z0-9-]+({[a-z]{2,6}}){1,2}$/i

請(qǐng)寫(xiě)出打亂數(shù)組方法

寫(xiě)出element.getElementsByClassName 的實(shí)現(xiàn)方法

請(qǐng)寫(xiě)出代碼輸出結(jié)果

if(!("a" in window)){
    var a = 1;
}
alert(a);

請(qǐng)寫(xiě)出代碼輸出結(jié)果

var handle = function(a){
    var b = 3;
    var tmp = function(a){
        b = a + b;
        return tmp;
    }
    tmp.toString = function(){
        return b;
    }
    return tmp;
}
alert(handle(4)(5)(6));

javscript表達(dá)式"[]=="""的值是什么，為什么？

Js生成下面html，點(diǎn)擊每個(gè)li的時(shí)候彈出1,2,3......
//li onclick事件都能彈出當(dāng)前被點(diǎn)擊的index=?

    
index=0
    
index=1

map方法是ES5中新增的，要求為ES5以下的環(huán)境增加個(gè)map方法

function fun(n,o){
   console.log(o)
   return{
       fun:function(m){
           return fun(m,n);
       }
   };
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1); c.fun(2); c.fun(3);

我們先來(lái)一步一步地看。首先是a=fun(0)因?yàn)橹粋髁艘粋€(gè)參數(shù)，console輸出的是第二個(gè)參數(shù)的值，所以毫無(wú)疑問(wèn)地輸出undefined。

然后到a.fun(1)可以看出，這句話(huà)是調(diào)用前面fun(0)返回回來(lái)的一個(gè)對(duì)象里面的函數(shù)fun，這個(gè)fun又把fun(m,n)返回出去。這個(gè)時(shí)候請(qǐng)注意：這個(gè)對(duì)象里的fun在返回之前調(diào)用了一下fun(m,n)，所以console又會(huì)被執(zhí)行，可以確定，它肯定不會(huì)輸出傳進(jìn)去的1，因?yàn)?作為第一個(gè)參數(shù)傳到fun(m,n)里，而console是輸出第二個(gè)參數(shù)的。那么這次會(huì)輸出啥呢？

好了，不給大家賣(mài)關(guān)子了，答案是0?？赡苡腥藭?huì)問(wèn)了，納尼？為毛是0，0是哪來(lái)的？

要想看明白我的解釋?zhuān)疤崾悄愕们宄]包。這里用到了閉包。我們知道，閉包有個(gè)功能就是外部作用域能通過(guò)閉包訪(fǎng)問(wèn)函數(shù)內(nèi)部的變量。其實(shí)在運(yùn)行a=fun(0)的時(shí)候，return出來(lái)的對(duì)象里的函數(shù)fun把傳進(jìn)來(lái)的這個(gè)0作為第二個(gè)參數(shù)傳到fun里面并返回出來(lái)這時(shí)0得到了保存。所以當(dāng)運(yùn)行a.fun(1)的時(shí)候其實(shí)輸出的是之前的0。后面的那兩個(gè)調(diào)用也和這個(gè)的原理一樣，最后都是輸出0。

這里可能會(huì)有點(diǎn)繞，需要花點(diǎn)時(shí)間來(lái)看或者自行去調(diào)試。（我已經(jīng)在盡力表達(dá)清楚了，如果還不懂的話(huà)就留言吧=.=）。

然后到b，如果前面搞懂了這里就不難了。fun(0)運(yùn)行的時(shí)候會(huì)return一個(gè)對(duì)象出去，后面的一串鏈?zhǔn)秸{(diào)用都是在調(diào)用前面函數(shù)返回的對(duì)象里的fun，最終導(dǎo)致輸出是undefined 0 1 2

最后到c，如果b都搞懂了，到這里基本就沒(méi)什么難度了。分別會(huì)輸出undefined 0 1 1。

如果還不懂的話(huà)建議單步調(diào)試一下，如果還是不懂可以在下面留言，我會(huì)盡最大能力給你解釋。

用盡可能多的方法找出數(shù)組中重復(fù)出現(xiàn)過(guò)的元素
例如：[1，2，4，4，3，3，1，5，3]
輸出：[1，3，4]

我的思路是，先創(chuàng)建一個(gè)數(shù)組。然后將傳進(jìn)來(lái)的數(shù)組進(jìn)行排序。然后再利用sort方法遍歷數(shù)組，因?yàn)樗芤淮稳〉絻蓚€(gè)數(shù)然后a和b比較如果相等而且result里面又沒(méi)有重復(fù)的就把a推進(jìn)去。

這是我的代碼：

感謝@倔強(qiáng)的小瓶蓋同學(xué)指出的問(wèn)題

function repeat(arr) {
    var result = [];
    arr.sort().reduce(function(a, b) {
        if(a === b && result.indexOf(a) === -1) {
            result.push(a);
        }
        return b;
    });
    return result;
}

//之前問(wèn)題代碼
function repeat(arr){
    var result=[];
    arr.sort().sort(function(a,b){
        if(a===b&&result.indexOf(a)===-1){
            result.push(a);
        }
    });
    return result;
}

感謝@start-wrap同學(xué)提供的方法：

function repeat(arr){
    var result = [], map = {};
    arr.map(function(num){
    if(map[num] === 1) result.push(num);
        map[num] = (map[num] || 0) + 1;
    }); 
    return result;
}

值得一提的是map[num] = (map[num] || 0) + 1，這句代碼的(map[num] || 0)如果map[num]存在，則map[num]+1反之則0+1，個(gè)人覺(jué)得用得很巧妙。

感謝@早乙女瑞穂提供的淫技巧：

// es6
let array = [1, 1, 2, 3, 3, 3, 4, 4, 5];
Array.from(new Set(array.filter((x, i, self) => self.indexOf(x) !== i)));
// es5
var array = [1, 2, 4, 4, 3, 3, 1, 5, 3];
array.filter(function(x, i, self) {
    return self.indexOf(x) === i && self.lastIndexOf(x) !== i 
});

es6思路解說(shuō)：

array.filter((x, i, self) => self.indexOf(x) !== i)
返回一個(gè)數(shù)組，該數(shù)組由arrary中重復(fù)的元素構(gòu)成(返回N-1次)

new Set( [iterable] )
返回一個(gè)集合(重復(fù)元素在此被合并)

Array.from( [iterable] )
返回一個(gè)數(shù)組(將上一步的集合變?yōu)閿?shù)組)

//es5思路解說(shuō)：

使用indexOf和lastIndexOf正向判斷和反向判斷這個(gè)元素是不是同一個(gè)數(shù)(如果是同一個(gè)數(shù)，則兩個(gè)方法返回的i是一樣的)

給定一些文檔（docs）、詞（words），找出詞在文檔中全部存在的所有文檔

我的思路是：把第二個(gè)參數(shù)的數(shù)組用join合成一個(gè)字符串，然后用forEach遍歷，分別把文檔里的words也用join合成一個(gè)字符串，利用search方法找每個(gè)文檔里的words是否包含有arrStr。

這是我的代碼：

function findDocList(docs, arr) {
    let arrStr = arr.join(""),
    itemStr,
    result = [];
    docs.forEach(function(item) {
        itemStr = item.words.join("");
        if(itemStr.search(new RegExp(arrStr)) !== -1) {
        result.push("文檔" + item.id);
    }
    });
    console.log(result);
}
findDocList(docs, ["hello"]) //文檔1，文檔2，文檔3
findDocList(docs, ["hello", "world"]) //文檔1

下面代碼會(huì)輸出什么？

var test = (function(a){
        this.a = a;
        return function(b){
        return this.a + b;
        }
}(function(a,b){
        return a;
}(1,2)));
console.log(test(1));

可以看到，這里有兩個(gè)自執(zhí)行函數(shù)。下面這個(gè)自執(zhí)行函數(shù)執(zhí)行完后向上面這個(gè)自執(zhí)行函數(shù)傳了個(gè)1所以this.a=1，這里的this指向window。然后這個(gè)自執(zhí)行函數(shù)返回個(gè)函數(shù)給test變量。下面調(diào)用test(1)，這個(gè)1傳進(jìn)來(lái)后相當(dāng)于return 1+1所以就輸出2。

不用循環(huán)，創(chuàng)建一個(gè)長(zhǎng)度為 100 的數(shù)組，并且每個(gè)元素的值等于它的下標(biāo)。

如果了解Object.keys和Array.form的話(huà)，這題基本上沒(méi)啥難度。
答案：

Object.keys(Array.from({length:100}))

哎！等下Array.form不是es6的嗎，es5的怎么實(shí)現(xiàn)？
代碼來(lái)了：

Object.keys(Array.apply(null,{length:100}))

如果還不懂可以參考這里的講解。

一個(gè)整數(shù)，它的各位數(shù)字如果是左右對(duì)稱(chēng)的，則這個(gè)數(shù)字是對(duì)稱(chēng)數(shù)。那么請(qǐng)找出 1 至 10000 中所有的對(duì)稱(chēng)數(shù)

我的思路，先將數(shù)字轉(zhuǎn)為字符串，然后利用數(shù)組的map方法遍歷這個(gè)字符串，將字符串全部分開(kāi)變?yōu)閿?shù)組，然后調(diào)用數(shù)組的reverse方法，再將翻轉(zhuǎn)后的數(shù)組join成字符串，最后對(duì)比翻轉(zhuǎn)后的字符串和翻轉(zhuǎn)前的字符串是否相等即可（方法有點(diǎn)愚笨，望大神指教）：

function symmetric(){
    var i=1,
    str,
    newStr,
    result=[];
    for(;i<1000;i++){
        str=""+i;
        newStr=result.map.call(str,function(item){
            return item;
        }).reverse().join("");
        if(str===newStr){
            result.push(+str);
        }
    }
    return result;
}

以下代碼輸出什么？

var myObject = {
    foo: "bar",
    func: function(){
    var self = this;
    console.log("outer func : this.foo" + this.foo);
    console.log("outer func : self.foo" + self.foo);
    (function(){
        console.log("inner func : this.foo" + this.foo);
        console.log("inner func : self.foo" + self.foo);
    })();
    }
};
myObject.func();

這題主要考察this指向，個(gè)人覺(jué)得難度不是太大，因?yàn)?b>this已經(jīng)被我完全承包啦(壞笑臉)。
這題的話(huà)只需考慮誰(shuí)調(diào)用的函數(shù)this就指向誰(shuí)。
函數(shù)開(kāi)始執(zhí)行self=this這里的this是指向myObject的，因?yàn)?b>myObject.func()很明顯是myObject在調(diào)用它嘛，所以頭兩句console輸出的foo都是bar。
下面是一個(gè)自執(zhí)行函數(shù)，要知道，自執(zhí)行函數(shù)的this一般情況下都指向window這里也不例外，所以，第三個(gè)console輸出的foo是undefined因?yàn)樵?b>window下foo沒(méi)定義。第四個(gè)輸出的是self.foo這個(gè)self就是上面定義的self即myObject所以，這里的foo為bar。

請(qǐng)寫(xiě)出以下正則表達(dá)式的詳細(xì)規(guī)則說(shuō)明
/^(0[1-9]dd?)?[1-9]d{6}d?$/
/^(1[89]|[2-9]d|100)$/i
/^[w-]+@[a-z0-9-]+({[a-z]{2,6}}){1,2}$/i

嘿嘿，正則也算我比較拿手的部分。我來(lái)一個(gè)一個(gè)解釋吧，有些正則比較難用語(yǔ)言表達(dá)，大家意會(huì)意會(huì)吧。

第一個(gè)：首先^代表的是以它后面的一堆東西為開(kāi)頭$代表以它前面一堆東西為結(jié)尾，在這里的意思就是以(0[1-9]dd?)?[1-9]d{6}d?為開(kāi)頭和結(jié)尾的字符串。然后到第一個(gè)括號(hào)里的意思是匹配第一個(gè)字符串為0第二個(gè)字符串為1-9第三個(gè)字符串為0-9第四個(gè)字符串可有可無(wú)，有的話(huà)匹配1-9，然后這整個(gè)括號(hào)里面的內(nèi)容可有可無(wú)。問(wèn)好后面的意思是匹配第一個(gè)字符串是1-9然后后面6個(gè)字符串匹配0-9最后一個(gè)字符串可有可無(wú)，有的話(huà)匹配0-9。

所以整理整理就是：匹配以0為第一個(gè)，1-9為第二個(gè)，數(shù)字為第三個(gè)；第四個(gè)可有可無(wú)，有的話(huà)匹配數(shù)字；然后前面這一整坨可有可無(wú)。1-9為第五個(gè)(如果前面那一坨沒(méi)有的話(huà)，則從第一個(gè)算起)然后后面6個(gè)都是數(shù)字最后一個(gè)數(shù)字可有可無(wú)的字符串，且以它為開(kāi)頭和結(jié)尾。

下面是例子：
022222222222 //true
002222222222 //false 因?yàn)榈诙€(gè)數(shù)字是1-9
02222222222 //第一個(gè)括號(hào)最后一個(gè)數(shù)字或者最后面的數(shù)字省略
0222222222 //第一個(gè)括號(hào)最后一個(gè)數(shù)字和者最后面的數(shù)字省略
22222222 //第一個(gè)括號(hào)里的內(nèi)容全部省略
02222222 //d{6}沒(méi)有滿(mǎn)足。

第二個(gè)：匹配以1作為第一個(gè)，8或9作為第二個(gè)又或者以2-9為第一個(gè)，數(shù)字為第二個(gè)又或者匹配100的字符串，并以他們?yōu)殚_(kāi)頭和結(jié)尾，忽略大小寫(xiě)。

還是例子比較直觀：

18 //true 匹配前面的1[89]
23 //true 匹配[2-9]d
100 //true 匹配100
17 //false
230 //false

第三個(gè)：
匹配前面至少一個(gè)數(shù)字或字母或_或-再匹配@然后再匹配至少一個(gè)字母或數(shù)字或-然后到再匹配{字母2-6個(gè)}1-2個(gè)，的字符串，并以他們?yōu)殚_(kāi)頭和結(jié)尾忽略大小寫(xiě)。

這個(gè)用語(yǔ)言描述太難了，是我不會(huì)說(shuō)話(huà)嗎，上例子吧：

3@d{aw}{ad} //true
-@-{ffffd}{fs} //true
3@3{dw}{ffffd} //true
3@3{dw} //false {字母2-6個(gè)}少了一個(gè)即({[a-z]{2,6}}){1,2}后面的{1,2}沒(méi)滿(mǎn)足
@3{dw}{ffffd} //false [w-]+沒(méi)滿(mǎn)足
33{dw}{ffffd} //false 沒(méi)@
dsa@ffff{dw}6a22guqa //false ({[a-z]{2,6}})不符合

請(qǐng)寫(xiě)出打亂數(shù)組方法

參考這里

// 之前的問(wèn)題代碼
function randomsort(a, b) {
    return Math.random()>.5 ? -1 : 1;
    //用Math.random()函數(shù)生成0~1之間的隨機(jī)數(shù)與0.5比較，返回-1或1
}
var arr = [1, 2, 3, 4, 5];
arr.sort(randomsort);

寫(xiě)出element.getElementsByClassName 的實(shí)現(xiàn)方法
我的思路：先獲取頁(yè)面下的所有元素，然后用split將傳進(jìn)來(lái)的多個(gè)class分割成數(shù)組，然后利兩層循環(huán)找出符合條件的元素（個(gè)人覺(jué)得這種方法效率實(shí)在低下，就當(dāng)是拋磚引玉吧，歡迎留言）
代碼：

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) {
    var ele = [],
        tags = document.getElementsByTagName("*");
    className = className.split(/s+/);
    for(var i = 0; i < tags.length; i++) {
        for(var j = 0; j < className.length; j++) {
        //如果這個(gè)元素上有這個(gè)class且沒(méi)在ele里面(主要防止多個(gè)class加在一個(gè)元素上推進(jìn)去兩次的情況)
            if(tags[i].className === className[j] && ele.indexOf(tags[i]) === -1) {
                ele.push(tags[i]);
            }
        }
    }
    return ele;
    }
}

請(qǐng)寫(xiě)出代碼輸出結(jié)果

  if(!("a" in window)){
      var a = 1;
  }
  alert(a);

這題主要考察了變量的聲明提升，任何變量(es5中)的聲明都會(huì)提升到當(dāng)前作用域的頂端。所以這里的代碼其實(shí)為：

  var a;
  if(!("a" in window)){
      a = 1;
  }
  alert(a);

所以，在if語(yǔ)句執(zhí)行前a就已經(jīng)在window中了，所以這里會(huì)atert undefined

請(qǐng)寫(xiě)出代碼輸出結(jié)果

var handle = function(a){
    var b = 3;
    var tmp = function(a){
        b = a + b;
        return tmp;
    }
    tmp.toString = function(){
        return b;
    }
    return tmp;
}
alert(handle(4)(5)(6));

我們來(lái)一步一步看：首先是handle(4)，到這里，程序開(kāi)始運(yùn)行，創(chuàng)建了一個(gè)tmp函數(shù)，同時(shí)把tmp函數(shù)的toString方法重寫(xiě)了，最后返回這個(gè)tmp函數(shù)。
注意：tmp里的a不是傳進(jìn)去的4，不要把tmp的a和handle的a搞混了，所以這里傳的4啥也沒(méi)干。

然后到第二步：handle(4)(5)，這里就是執(zhí)行了tmp函數(shù)，這個(gè)時(shí)候tmp函數(shù)的a就是傳進(jìn)來(lái)的5，·b就是第一步函數(shù)執(zhí)行的b即3(不懂為何是3的同學(xué)再去了解了解閉包吧)，最后這個(gè)b就等于8。

第三部重復(fù)第二步8+6，最后b為14，javascript引擎最后自動(dòng)調(diào)用了toString返回b，所以結(jié)果是14。

javscript表達(dá)式"[]=="""的值是什么，為什么？

這題考察對(duì)js==運(yùn)算符的了解，我們知道==運(yùn)算符如果兩邊值類(lèi)型不一樣會(huì)把它們轉(zhuǎn)換為相同類(lèi)型的值再來(lái)比較。這題左邊是object類(lèi)型，右邊是string類(lèi)型，所以會(huì)把左邊的轉(zhuǎn)化為string類(lèi)型來(lái)比較，[].toString()就是""所以最后結(jié)果是true。

Js生成下面html，點(diǎn)擊每個(gè)li的時(shí)候彈出1,2,3......
//li onclick事件都能彈出當(dāng)前被點(diǎn)擊的index=?

    
index=0
    
index=1

這題直接按照要求生成對(duì)應(yīng)的html，再給ul綁定個(gè)事件，利用事件代理監(jiān)聽(tīng)是誰(shuí)被點(diǎn)了，然后輸出它們的序號(hào)和對(duì)應(yīng)的內(nèi)容，沒(méi)啥難度。我的代碼：

var ul=document.createElement("ul"),
    lis=[];
    ul.id="testUrl";
for(var i=0,li;i<2;i++){
    li=document.createElement("li");
    li.innerHTML="index="+i;
    ul.appendChild(li);
    lis.push(li);
}
ul.addEventListener("click",function(e){
    alert(lis.indexOf(e.target));
    alert(e.target.innerHTML)
});
document.body.appendChild(ul);

map方法是ES5中新增的，要求為ES5以下的環(huán)境增加個(gè)map方法

個(gè)人認(rèn)為只要對(duì)map方法夠了解，自然就能封裝出來(lái)了。嘿嘿，不喜勿噴。給的鏈接雖然也有一個(gè)實(shí)現(xiàn)map的方法，但是用到了es5的for in不符合題目，所以我的代碼：

if(!Array.prototype.map){
    Array.prototype.map=function(callback,context){
    var len=this.length,
        i=0,
        result=[];
    if (typeof callback !== "function") {
        throw new TypeError(callback + " is not a function");
    }
    context=context||window;
    for(;i
不過(guò)我的代碼和標(biāo)準(zhǔn)的輸出結(jié)果還是有點(diǎn)出入的。就是我不處理undefined和null，因?yàn)?b>this[i]!==undefined，這兩個(gè)值是會(huì)原樣返回的。不過(guò)日常的一些需求還是能滿(mǎn)足的。歡迎大家提建議哈。
終于打完了，這期就這么多題，希望能對(duì)大家有幫助，同時(shí)如果有不對(duì)的地方請(qǐng)及時(shí)指正，歡迎留言。
另外，歡迎大家來(lái)圍觀我封裝的一個(gè)ajax庫(kù) lightings。
參考
JS隨機(jī)打亂數(shù)組的方法小結(jié)
如何不使用loop循環(huán)，創(chuàng)建一個(gè)長(zhǎng)度為100的數(shù)組，并且每個(gè)元素的值等于它的下標(biāo)
MDN map