前端小知识10点(2020.10.8)

450 阅读4分钟

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 <branch>

3、git调换提交顺序

还是使用git rebase

如果之前的commit已经pushorigin 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:链表可以模拟任何流程,并可以随时中断/继续,比如reactfiber使用链表可以随时回到当前状态

7、addEventListener第三个参数的作用及区别

html:

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

① 当你将第三个参数设为true/false时,
true:表示在事件捕获阶段触发 handler
false(默认):表示在事件冒泡阶段触发 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<str.length;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的执行顺序

<Father>
  <Child/>
</Father>

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

参考:
React的ClassComp和FunctionComp组件的更新/卸载顺序


(完)

本文使用 mdnice 排版