1、redux的compose實現

例：

??const?add?=?num?=>?num?+?10
??const?multiply?=?num?=>?num?*?2
??const?foo?=?compose(multiply,?add)
??foo(5)?//30

實現：

??/*?注意：compose 的每一個參數都是 function，并且返回的也是 function */
??//?...funcs?將傳入的所有參數，組成一個?array
??function?compose(...funcs)?{
????//?如果沒有傳參，則返回一個?(a)=>a?的?callback
????if(funcs.length===0){
??????return?argument=>argument
????}
????//?如果參數只有一個，則直接返回該參數，而不是?callback
????if(funcs.length===1){
??????return?funcs[0]
????}
????//?簡單理解，就是將每一個參數?function?執行后返回的?result，作為下一個參數?function?的?arguments
????return?funcs.reduce((a,b)=>(...argument)=>a(b(...argument)))
????//?return?funcs.reduce((a,b)=>{
????//???return?(...argument)=>a(b(...argument))
????//?})
??}

2、git查看是基于哪個分支建立的

git?reflog?--date=local?--all?|?grep?

3、git調換提交順序

還是使用git rebase

如果之前的commit已經push到origin branch了，直接：

git?push?origin?-f

4、當fucntion里的arguments非常多時，轉成object，防止因少傳一個，導致位置錯亂

bad：

function(a,b,c,d,e,f)

good:

function({a,b,c,d,e,f})

5、String. prototype.repeat()

幾乎沒用過，熟悉下

"abc".repeat(-1)?????//?RangeError:?repeat?count?must?be?positive?and?less?than?inifinity
"abc".repeat(0)??????//?""
"abc".repeat(1)??????//?"abc"
"abc".repeat(2)??????//?"abcabc"
"abc".repeat(3.5)????//?"abcabcabc"?參數count將會被自動轉換成整數.
"abc".repeat(1/0)????//?RangeError:?repeat?count?must?be?positive?and?less?than?inifinity

6、數組和鏈表的區別

① 數組易讀取，鏈表只能一個個讀或者需要額外空間才能易讀取
② 數組增刪元素需要使用index，鏈表不用

數組和鏈表優點缺點，應用場景【舉例】
① 增刪：數組增刪的時候需要維護index，鏈表不需要考慮
② 查：鏈表查取某一項就比較麻煩。數組的優勢在于需要index的時候，隨時讀取某一個。但很多情況下，簡單的列表遍歷用哪個都一樣。
③ fiber：鏈表可以模擬任何流程，并可以隨時中斷/繼續，比如react的fiber使用鏈表可以隨時回到當前狀態

7、addEventListener第三個參數的作用及區別

html：

"a"?style="width:100px;height:100px;border:1px?blue?solid;">
??aaa"b"?style="width:50px;height:50px;border:1px?red?solid;">
????bbb
??</div>div>

① 當你將第三個參數設為true/false時，true：表示在事件捕獲階段觸發 handlerfalse(默認)：表示在事件冒泡階段觸發 handler

js：

??const?clickA1=()=>{console.log('事件捕獲階段，點擊?a')}
??const?clickA2=()=>{console.log('事件冒泡階段，點擊?a')}
??//1.第三個參數作為?useCapture:boolean
??//true：表示在事件捕獲階段，觸發 handler
??document.getElementById('a').addEventListener('click',clickA1,true)
??//false：表示在事件冒泡階段，觸發 handler
??document.getElementById('a').addEventListener('click',clickA2,false)

注意：
當你將useCapture設為true時，同一節點可綁定兩次click事件，
分別為 事件捕獲階段(useCapture=true) 和 事件冒泡階段(useCapture=false) 觸發，即觸發兩次

② 當你將第三個參數設為{capture : true}時，addEventListener('click',handler,{capture : true})
作用同 ①

③ 當你將第三個參數設為{once : true}時，addEventListener('click',handler,{once : true})注冊事件只觸發一次
js：

??const?clickA2=()=>{console.log('事件冒泡階段，點擊?a')}
??document.getElementById('a').addEventListener('click',clickA2,?{once?:?true})

④ 當你將第三個參數設為{passive : true}時，addEventListener('click',handler,{passive : true})禁止注冊事件調用preventDefault()

常見于移動端優化，因為不設置該參數的話，瀏覽器會自己去判斷要不要preventDefault，所以會影響性能，所以干脆顯式地設置為 true，讓移動端的滑動更流暢

8、字符串大小寫反轉

??const?str='abCDeFg'

??function?reverse(str)?{
????let?st=''
????for(let?i=0;i??????const?char=str[i]
??????if(char.toLowerCase()!==char){
????????st+=char.toLowerCase()
??????}else{
????????/*不是?heigherCase*/
????????st+=char.toUpperCase()
??????}
????}
????return?st
??}

??console.log(reverse(str),str);?//ABcdEfG?abCDeFg

9、Array.splice和 Array.slice的區別

這兩個不經常去用的話，很容易搞混

一、Array.splice(deleteIndex,deleteCount,addItem,addItem,...)作用：
① 改變原數組
② 始終返回刪除的item

例子：

??const?arr=[1,2,3]

??//?從?index=1?開始，刪除了?index=1?及后面的?item，改變原數組
??arr.splice(1)?//返回?[2,3]?，arr=[1]

??//?從?index=1?開始，刪除了?1?個?item，，改變原數組
??arr.splice(1,1)?//返回?[2]?，arr=[1,3]

??//?從?index=1?開始，刪除了?1?個?item，并且在?index=1?的位置上新增了?'a','b'，改變原數組
??arr.splice(1,1,'a','b')?//返回?[2]?，arr=[1,'a','b',3]

二、Array.slice(startIndex,endIndex)作用：
① 不改變原數組
② 左開右閉，返回被截取的item

例子：

??const?arr=[1,2,3]

??//?從?index=1?開始截取
??arr.slice(1)?//?返回[2,3]?，不改變原數組

??//?從?index=0?開始截取，到?index=2?結束(不包括?2)
??arr.slice(0,2)?//?左開右閉?，返回[1,2]?，不改變原數組

??//?從倒數第二個?index?開始截取
??arr.slice(-2)?//?返回[2,3]?，不改變原數組

??//?從倒數第二個?index?開始截取，到倒數第一個?index?結束(不包括?-1)
??arr.slice(-2,-1)?//?左開右閉，返回[2]?，不改變原數組

10、father/child組件的componentWillMount和componentDidMount的執行順序

<Child/>Father>

① app componentWillMount
② child componentWillMount
③ child componentDidMount
④ app componentDidMount

參考：React的ClassComp和FunctionComp組件的更新/卸載順序

小進進已開通「讀者討論」功能，覺得不錯的話，留言、點「在看」、轉發朋友圈都是一種支持?(●'?'●)ﾉ?。

歡迎關注本公眾號：

(完)

總結

以上是生活随笔為你收集整理的原生js绑定click为什么点一次执行两次_前端小知识10点(2020.10.8)的全部內容，希望文章能夠幫你解決所遇到的問題。

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