記錄一些小技巧-JS篇-有解無憂

16進制隨機顏色

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

型別判斷工具函式

function isType(target, type) {
  let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
  type = type.toLowerCase()
  return targetType === type
}

isType([],'array') //true

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

第一種：斷言匹配（這種方式在ie瀏覽器不適應）

let str = '訂閱專案:{{phrase1.DATA}}\n更新內容:{{thing_2.DATA}}\n提示說明:{{thing3.DATA}}'
let res = str.match(/(?<={{).*?(?=}})/g) // ["phrase1.DATA", "thing_2.DATA", "thing3.DATA"]

x(?=y)： 匹配'x'僅僅當'x'后面跟著'y'.這種叫做先行斷言,y不作為匹配結果的一部分

(?<=y)x：匹配'x'僅僅當'x'前面是'y'.這種叫做后行斷言，y不作為匹配結果的一部分

第二種：組匹配

let str = '訂閱專案:{{phrase1.DATA}}\n更新內容:{{thing_2.DATA}}\n提示說明:{{thing3.DATA}}'
let arr = []
str.replace(/{{(.*?)}}/g,($0,$1)={arr.push($1)})

replace第二個引數可以設定為回呼函式

函式第一個引數為正則匹配到的字串

函式第二個引數為組匹配的內容（即圓括號的內容）

簡潔的設定默認引數

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

//可以這樣寫
(arr && (arr=[])).push(1)

reduce會更簡潔

filter和map的組合使用可能很多人都會使用過，但是這樣會進行兩次遍歷操作，可以使用reduce遍歷一次完成同樣的操作，

reduce接受一個回呼函式和一個默認值，

回呼函式接受兩個引數，prev是上次回傳值，curr是當前遍歷值，在第一次遍歷時，prev為默認值，每次遍歷回傳的prev都會在下一個遍歷中取到，reduce因此也被叫做”累加函式“，

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
},[])

策略模式

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

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

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

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
}"
*/

獲取月份的最后一天

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

優雅處理await例外

一般處理await會使用try catch，但這樣的代碼結構看起來會顯得冗余不夠簡潔，我們可以通過Error-first模式來處理例外，該模式參考node.js處理回呼模式

//to.js
export default function to(promise){
  return promise
    .then(res=>[null,res])
    .catch(err=>[err])
}

import to from './to.js'

async function foo(){
  let err,res;
  [err, res] = await to(promiseTask)
  if(err) throw err  
}

獲取當天凌晨12點時間

new Date(new Date().toLocaleDateString()).getTime()

驗證陣列項

every方法接受一個回呼函式，函式內需要回傳驗證規則（布林值），

every會根據回呼函式回傳的規則去驗證每一項，只有全部通過規則，才會回傳true，some方法恰好與every方法相反，some方法只需要一項通過，即回傳true，

let wordData = https://www.cnblogs.com/chanwahfung/p/['', 0, undefined, null, false]
wordData.every(Boolean) // false

科學計數

比如我們需要用毫秒數來表達一天的時間即86400000，為了簡潔可以使用科學計數

8.64e7 //86400000

快速生成一周的時間

Array建構式若只傳數字作為引數會生成對應長度的陣列，但這種陣列只是擁有長度屬性并沒有實際內容，需要擴展陣列為項設定初始值，這樣使用遍歷方法才能夠拿到想要的資料

[...Array(7)].map((j,i)=> new Date(Date.now()+i*8.64e7).toLocaleDateString())
// ["2019/12/25", "2019/12/26", "2019/12/27", "2019/12/28", "2019/12/29", "2019/12/30", "2019/12/31"]

靈活的日期格式化函式

第一個引數接受時間戳，第二個函式接受格式化字串，重點在于第二個引數，可以根據使用者輸入的格式來應對多種需求，

當然也可以判斷格式化字串內的字符按需獲取對應的資料，而不是一次性全部替換，這樣可以做到一點優化，

function startFillZero(num){
  return num < 10 ? '0'+num : num
}

function formatDate(timestamp=Date.now(), format='Y-M-D h:m'){
  if((timestamp).toString().length == 10){
    timestamp = timestamp * 1000
  }
  let date = new Date(timestamp)
  let dateObj = {
    Y: date.getFullYear(),
    M: date.getMonth()+1,
    D: date.getDate(),
    h: date.getHours(),
    m: date.getMinutes(),
    s: date.getSeconds()
  }
  let res = format
    .replace('Y',dateObj.Y)
    .replace('M',dateObj.M)
    .replace('D',dateObj.D)
    .replace('h',startFillZero(dateObj.h))
    .replace('m',startFillZero(dateObj.m))
    .replace('s',startFillZero(dateObj.s))
  return res
}

正則驗證密碼強度

const strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
const mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

(?=.*[a-z])	該字串必須包含至少1個小寫字母字符
(?=.*[A-Z])	該字串必須包含至少1個大寫字母字符
(?=.*[0-9])	該字串必須至少包含1個數字字符
(?=.[!@#\$%\^&])	該字串必須至少包含一個特殊字符，但是為了避免沖突，轉義了 RegEx 保留字符，
(?=.{8,})	字串必須至少是八個字符，

物件屬性剔除

function omit(object, props=[]){
  let res = {}
  Object.keys(object).forEach(key=>{
    if(props.includes(key) === false){
      res[key] = typeof object[key] === 'object' && object[key] !== null ?
        JSON.parse(JSON.stringify(object[key])):
        object[key]
    }
  })
  return res
}

使用

let obj = {
  name: 'joe',  
  age: 18,
  like: ['apple']
}
omit(obj, ['like']) // {name: 'joe', age: 18}

正則匹配域名

'https://bbb.aaa.juejin.im/post/5ea6950ee51d4546ef36bae5'.match(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(:[0-9]+)?|(?:ww??w.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#???(?:[\w]*))?)/)[0]
'https://bbb.aaa.juejin.im/post/5ea6950ee51d4546ef36bae5'.match(/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/)[0]

正則匹配網址資訊

const parseUrl = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;

數字格式化

效果:

// 輸入
formatNum(123456789)
// 輸出
'123,456,789'

實作方法1：

function formatNumber(num) {
  return num.toLocaleString('en-US')  
}

實作方法2：

function formatNumber(num) {
  return new Intl.NumberFormat().format(num)  
}

實作方法3：

function formatNumber(num) {
  return num.toString().split('').reverse().reduce((prev,next,index)=>{
      return index%3 ? next+prev : (next+',')+prev
  })
}

查詢串決議

let params = new URLSearchParams('id=123&name=mike')
params.get('id') // 123

不定時更新~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/170816.html

標籤：JavaScript

上一篇：Vue-Cli 指南

下一篇：前端基礎之BOM和DOM操作