前言

原文地址&&我的博客
知乎&&知乎專欄
簡書
河南前端交流群官網

上次寫了一篇幾個讓我印象深刻的面試題(一)沒看過的同學可以去看哦。
這次文章的題目來源：這里有超過20家的前端面試題，你確定不點進來看看？。
如果上面的問題在我這篇文章里沒有提到的話，那就說明有些問題可以很容易查得到或者很簡單或者我能力有限不能解答出來的。如果有的問題你不會而且我又沒有提的那就認為就是我能力有限不能解答出來吧。嘿嘿嘿。開個玩笑，不過可以在下面留言哦！

正文

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

請問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);

用盡可能多的方法找出數組中重復出現過的元素

例如：[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

下面代碼會輸出什么？

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));

不用循環，創建一個長度為 100 的數組，并且每個元素的值等于它的下標。

一個整數，它的各位數字如果是左右對稱的，則這個數字是對稱數。那么請找出 1 至 10000 中所有的對稱數

以下代碼輸出結果是什么？

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();

請寫出以下正則表達式的詳細規則說明
/^(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

請寫出打亂數組方法

寫出element.getElementsByClassName 的實現方法

請寫出代碼輸出結果

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

請寫出代碼輸出結果

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表達式"[]==''"的值是什么，為什么？

Js生成下面html，點擊每個li的時候彈出1,2,3......
//li onclick事件都能彈出當前被點擊的index=?

<ul id="testUrl"><li>index=0</li><li>index=1</li> </ul>

map方法是ES5中新增的，要求為ES5以下的環境增加個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);

我們先來一步一步地看。首先是a=fun(0)因為只傳了一個參數，console輸出的是第二個參數的值，所以毫無疑問地輸出undefined。

然后到a.fun(1)可以看出，這句話是調用前面fun(0)返回回來的一個對象里面的函數fun，這個fun又把fun(m,n)返回出去。這個時候請注意：這個對象里的fun在返回之前調用了一下fun(m,n)，所以console又會被執行，可以確定，它肯定不會輸出傳進去的1，因為1作為第一個參數傳到fun(m,n)里，而console是輸出第二個參數的。那么這次會輸出啥呢？

好了，不給大家賣關子了，答案是0。可能有人會問了，納尼？為毛是0，0是哪來的？

要想看明白我的解釋，前提是你得清楚閉包。這里用到了閉包。我們知道，閉包有個功能就是外部作用域能通過閉包訪問函數內部的變量。其實在運行a=fun(0)的時候，return出來的對象里的函數fun把傳進來的這個0作為第二個參數傳到fun里面并返回出來這時0得到了保存。所以當運行a.fun(1)的時候其實輸出的是之前的0。后面的那兩個調用也和這個的原理一樣，最后都是輸出0。

這里可能會有點繞，需要花點時間來看或者自行去調試。（我已經在盡力表達清楚了，如果還不懂的話就留言吧=.=）。

然后到b，如果前面搞懂了這里就不難了。fun(0)運行的時候會return一個對象出去，后面的一串鏈式調用都是在調用前面函數返回的對象里的fun，最終導致輸出是undefined 0 1 2

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

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

第二題

用盡可能多的方法找出數組中重復出現過的元素
例如：[1，2，4，4，3，3，1，5，3]
輸出：[1，3，4]

我的思路是，先創建一個數組。然后將傳進來的數組進行排序。然后再利用sort方法遍歷數組，因為它能一次取到兩個數然后a和b比較如果相等而且result里面又沒有重復的就把a推進去。

這是我的代碼：

4.5日更新

感謝@倔強的小瓶蓋同學指出的問題

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; } //之前問題代碼 function repeat(arr){var result=[];arr.sort().sort(function(a,b){if(a===b&&result.indexOf(a)===-1){result.push(a);}});return result; }

3.23日更新

感謝@start-wrap同學提供的方法：

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，個人覺得用得很巧妙。

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

// 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思路解說：

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

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

Array.from( [iterable] )
返回一個數組(將上一步的集合變為數組)

//es5思路解說：

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

第三題

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

我的思路是：把第二個參數的數組用join合成一個字符串，然后用forEach遍歷，分別把文檔里的words也用join合成一個字符串，利用search方法找每個文檔里的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

第四題

下面代碼會輸出什么？

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));

可以看到，這里有兩個自執行函數。下面這個自執行函數執行完后向上面這個自執行函數傳了個1所以this.a=1，這里的this指向window。然后這個自執行函數返回個函數給test變量。下面調用test(1)，這個1傳進來后相當于return 1+1所以就輸出2。

第五題

不用循環，創建一個長度為 100 的數組，并且每個元素的值等于它的下標。

如果了解Object.keys和Array.form的話，這題基本上沒啥難度。
答案：

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

哎！等下Array.form不是es6的嗎，es5的怎么實現？
代碼來了：

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

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

第六題

一個整數，它的各位數字如果是左右對稱的，則這個數字是對稱數。那么請找出 1 至 10000 中所有的對稱數

我的思路，先將數字轉為字符串，然后利用數組的map方法遍歷這個字符串，將字符串全部分開變為數組，然后調用數組的reverse方法，再將翻轉后的數組join成字符串，最后對比翻轉后的字符串和翻轉前的字符串是否相等即可（方法有點愚笨，望大神指教）：

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指向，個人覺得難度不是太大，因為this已經被我完全承包啦(壞笑臉)。
這題的話只需考慮誰調用的函數this就指向誰。
函數開始執行self=this這里的this是指向myObject的，因為myObject.func()很明顯是myObject在調用它嘛，所以頭兩句console輸出的foo都是bar。
下面是一個自執行函數，要知道，自執行函數的this一般情況下都指向window這里也不例外，所以，第三個console輸出的foo是undefined因為在window下foo沒定義。第四個輸出的是self.foo這個self就是上面定義的self即myObject所以，這里的foo為bar。

第八題

請寫出以下正則表達式的詳細規則說明
/^(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

嘿嘿，正則也算我比較拿手的部分。我來一個一個解釋吧，有些正則比較難用語言表達，大家意會意會吧。

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

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

下面是例子：
022222222222 //true
002222222222 //false 因為第二個數字是1-9
02222222222 //第一個括號最后一個數字或者最后面的數字省略
0222222222 //第一個括號最后一個數字和者最后面的數字省略
22222222 //第一個括號里的內容全部省略
02222222 //d{6}沒有滿足。

第二個：匹配以1作為第一個，8或9作為第二個又或者以2-9為第一個，數字為第二個又或者匹配100的字符串，并以他們為開頭和結尾，忽略大小寫。

還是例子比較直觀：

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

第三個：
匹配前面至少一個數字或字母或_或-再匹配@然后再匹配至少一個字母或數字或-然后到再匹配{字母2-6個}1-2個，的字符串，并以他們為開頭和結尾忽略大小寫。

這個用語言描述太難了，是我不會說話嗎，上例子吧：

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

第九題

請寫出打亂數組方法

4.5日更新

參考這里

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

第十題

寫出element.getElementsByClassName 的實現方法
我的思路：先獲取頁面下的所有元素，然后用split將傳進來的多個class分割成數組，然后利兩層循環找出符合條件的元素（個人覺得這種方法效率實在低下，就當是拋磚引玉吧，歡迎留言）
代碼：

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++) {//如果這個元素上有這個class且沒在ele里面(主要防止多個class加在一個元素上推進去兩次的情況)if(tags[i].className === className[j] && ele.indexOf(tags[i]) === -1) {ele.push(tags[i]);}}}return ele;} }

第十一題

請寫出代碼輸出結果

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

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

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

所以，在if語句執行前a就已經在window中了，所以這里會atert undefined

第十二題

請寫出代碼輸出結果

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));

我們來一步一步看：首先是handle(4)，到這里，程序開始運行，創建了一個tmp函數，同時把tmp函數的toString方法重寫了，最后返回這個tmp函數。
注意：tmp里的a不是傳進去的4，不要把tmp的a和handle的a搞混了，所以這里傳的4啥也沒干。

然后到第二步：handle(4)(5)，這里就是執行了tmp函數，這個時候tmp函數的a就是傳進來的5，·b就是第一步函數執行的b即3(不懂為何是3的同學再去了解了解閉包吧)，最后這個b就等于8。

第三部重復第二步8+6，最后b為14，javascript引擎最后自動調用了toString返回b，所以結果是14。

第十三題

javscript表達式"[]==''"的值是什么，為什么？

這題考察對js==運算符的了解，我們知道==運算符如果兩邊值類型不一樣會把它們轉換為相同類型的值再來比較。這題左邊是object類型，右邊是string類型，所以會把左邊的轉化為string類型來比較，[].toString()就是''所以最后結果是true。

第十四題

Js生成下面html，點擊每個li的時候彈出1,2,3......
//li onclick事件都能彈出當前被點擊的index=?

<ul id="testUrl"><li>index=0</li><li>index=1</li> </ul>

這題直接按照要求生成對應的html，再給ul綁定個事件，利用事件代理監聽是誰被點了，然后輸出它們的序號和對應的內容，沒啥難度。我的代碼：

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以下的環境增加個map方法

個人認為只要對map方法夠了解，自然就能封裝出來了。嘿嘿，不喜勿噴。給的鏈接雖然也有一個實現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<len;i++){this[i]!==undefined?result.push(callback.call(context,this[i],i,this)):result.push(this[i]);}return result;} }

不過我的代碼和標準的輸出結果還是有點出入的。就是我不處理undefined和null，因為this[i]!==undefined，這兩個值是會原樣返回的。不過日常的一些需求還是能滿足的。歡迎大家提建議哈。

終于打完了，這期就這么多題，希望能對大家有幫助，同時如果有不對的地方請及時指正，歡迎留言。

另外，歡迎大家來圍觀我封裝的一個ajax庫 lightings。

參考

JS隨機打亂數組的方法小結
如何不使用loop循環，創建一個長度為100的數組，并且每個元素的值等于它的下標
MDN map

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的几个让我印象深刻的面试题(二)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。