記錄一些實用的小技巧-JS篇

1.16進制隨機顏色

let color = '#'+Math.random().toString(16).slice(-6)

2.類型判斷工具函數

function isType(target, type) {
  let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
  type = type.toLowerCase()
  return targetType === type
}
isType([],'array') //true

3.正則匹配兩個字符間的內容

let str = '#javascript#html#css#'
let res = str.match(/#.*?#/)[0]

4.簡潔的設置默認參數

if(!arr){
  arr = []
}
arr.push(1)

//能夠這樣寫
(arr && (arr=[])).push(1)

5.reduce會更簡潔

filter和map的組合使用可能不少人都會使用過,可是這樣會進行兩次遍歷操做。能夠使用reduce遍歷一次完成一樣的操做。javascript

reduce接受一個回調函數和一個默認值。css

回調函數接受兩個參數,prev是上次返回值,curr是當前遍歷值。在第一次遍歷時,prev爲默認值,每次遍歷返回的prev都會在下一個遍歷中取到。reduce所以也被叫作」累加函數「。html

let people = [{name:'Joe',age:18},{name:'Mike',age:19},{name:'Jack',age:20}]
people.fliter(p=>p.age < 20).map(p=>p.name)

//能夠這樣寫
people.reduce((prev,curr)=>{
    if(age<20){
       prev.push(curr.name)
    }
    return prev
},[])

6.策略模式

使用策略模式來代替一堆的 if...else,讓代碼看起來更簡潔java

if(type == = 'content'){
    getContent()
}else if(type === 'hot'){
    getHot()
}else if(type === 'rank'){
    getRank()
}
...

//能夠這樣寫
let action = {
    content: getContent,
    hot: getHot,
    rank: getRank,
    ....
}
action[type]()

 7.JSON.stringify的其餘參數

let str = {a:1,b:2,c:3}

//過濾
JSON.stringify(str, ['a'])   //"{"a":1}"

//格式化
JSON.stringify(str, null, 2)  
/*
"{
  "a": 1,
  "b": 2,
  "c": 3
}"
*/

8.獲取月份的最後一天

new Date('2019','2',0).getDate()

 

部分來源於網絡收集,不定時更新~網絡

相關文章
相關標籤/搜索