记录一些实用的小技巧-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 = '订阅项目:{{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不作为匹配结果的一部分

4.简洁的设置默认参数

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

//可以这样写
(arr && (arr=[])).push(1)

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

6.策略模式

使用策略模式来代替一堆的 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]()

 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()

9.优雅处理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  
}

10.获取当天凌晨12点时间

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

 11.验证数组项

every方法接受一个回调函数，函数内需要返回验证规则（布尔值）。

every会根据回调函数返回的规则去验证每一项，只有全部通过规则，才会返回true。some方法恰好与every方法相反，some方法只需要一项通过，即返回true。

let wordData = ['', 0, undefined, null, false]
wordData.every(Boolean) // false

12.科学计数 

比如我们需要用毫秒数来表达一天的时间即86400000，为了简洁可以使用科学计数

8.64e7 //86400000

 

部分来源于网络收集，不定时更新~