Javascript面試經(jīng)典套路reduce函數(shù)查重
今天在偶然間查看到了一段代碼,代碼使用了很短的篇幅完成了字符串統(tǒng)計相同字符次數(shù)這個經(jīng)典面試題,其中用到了reduce這個方法,網(wǎng)上查了查,沒有查到什么有價值的東西,導致浪費了我一些時間才看懂,現(xiàn)將我的思路整理如下:
原代碼:
var arr="qweqrq" var info= arr.split('').reduce((a,b)=> (a[b]++ || (a[b]=1),a) ,{}) console.log(info)
代碼思路是這樣的,先將字符串a(chǎn)rr通過split方法切割成數(shù)組,然后使用reduce,這個方法干了什么呢,分為這幾步:
1.首先reduce會接收一個callback來對數(shù)組里的每一個元素執(zhí)行,如果有第二個參數(shù)如上例:{}。,那么callback將會使用這個{}作為參數(shù)來和數(shù)組中的第一個元素一同傳入callback;
2.傳入?yún)?shù)之后,會進行一個與門短路操作,也可以叫默認值操作,當a[b]++成真,則返回a[b]。而這里的a為{},b為"q",很明顯a中并沒有b,執(zhí)行a[b]=1,那么就會給a[b]賦值為1,后面是一個逗號表達式,所以會返回有了a[b]:1這樣屬性的a對象;
與門短路操作:如果第一個操作數(shù)的值為true,進行短路操作,直接產(chǎn)生第一個操作數(shù)的值。如果為false,則產(chǎn)生第二個操作數(shù)的值。
逗號表達式:逗號表達式的一般形式是:表達式1,表達式2,表達式3……表達式n。逗號表達式的求解過程是:先計算表達式1的值,再計算表達式2的值,……一直計算到表達式n的值。最后整個逗號表達式的值是表達式n的值。
3.之后要說下reduce函數(shù),它可以將之前一次執(zhí)行后返回的結果作為參數(shù)繼續(xù)和之后的元素一同傳入callback執(zhí)行,相當于fn(fn(fn(fn(a,b),c),d),e),fn即為callback;
4.在本例中,因為有第二個參數(shù){}傳入,所以callback執(zhí)行了6次。相當于對數(shù)組中每一個元素都進行了錄入和查重操作,比如當callback運行到第四次,這時的a是{q:1,w:1,e:1},執(zhí)行callback,a[b]即a['q']存在,執(zhí)行a['q']++,a['q']值為2,以此類推,最后得到的就是一個以數(shù)組每個元素為屬性名,出現(xiàn)次數(shù)為屬性值的對象。
需要注意的是,reduce是es5推出的方法,ie8及以下都不兼容。
以上所述是小編給大家介紹的Javascript面試經(jīng)典套路reduce函數(shù)查重,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
詳解JavaScript時間處理之幾個月前或幾個月后的指定日期
本篇文章主要介紹了JavaScript時間處理之幾個月前或幾個月后的指定日期 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2016-12-12淺談javascript中的 “ && ” 和 “ || ”
本文主要介紹了Javascript中的 “ && ” 和 “ || ”的相關知識。具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02Javascript ParentNode和ChildNode接口原理解析
這篇文章主要介紹了Javascript ParentNode和ChildNode接口原理解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03