记录一些实用的小技巧-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 = ['', 0, undefined, null, false]
wordData.every(Boolean) // false
科学计数
比如我们需要用毫秒数来表达一天的时间即86400000,为了简洁可以使用科学计数
8.64e7 //
快速生成一周的时间
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]+)?|(?:www.|[-;:&=\+\$,\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]
不定时更新~
记录一些实用的小技巧-JS篇的更多相关文章
- 记录一些实用的小技巧-CSS篇
1.单行文本截断 .text{ width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 2.多行 ...
- scanf和printf格式化输入输出中非常实用的小技巧
输入输出几乎是每个C程序必须具备的功能,因为有了它们,程序才有了交互性.C提供的输入输出函数除了具有必须的输入输出功能外,还有一些其他实用的小技巧,了解这些小技巧将会为程序带来更友好的用户体验. 一. ...
- 实用在线小工具 -- JS代码压缩工具
实用在线小工具 -- JS代码压缩工具 将JS代码进行压缩可以减少内存占用,下面链接是一个在线JS代码压缩工具,它将多余的空格和换行符压缩了. JS代码压缩工具链接:http://jspack ...
- 哪些window你不知道的却实用的小技巧----window小技巧
前言 一直想要整理一篇有关于window比较全的使用小技巧,却又不知道从哪里开始写起.而让我准备动手写这边随笔的动力,还是在加入虫部落<一个绿色环保,充满朝气的好地方>,从大家的分享中,我 ...
- JavaScript小技巧整理篇(非常全)
能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力,这对于我来说是件很开心的事.每天仅花上不到2分钟的时间中,你将可 以读遍JavaScript这门可怕的语言所呈现给我们的特性: ...
- javascript小技巧-js小技巧收集(转)
本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(&qu ...
- 分享几个 SpringBoot 实用的小技巧
前言 最近分享的一些源码.框架设计的东西.我发现大家热情不是特别高,想想大多数应该还是正儿八经写代码的居多:这次就分享一点接地气的: SpringBoot 使用中的一些小技巧. 算不上多高大上的东西, ...
- js的一些实用的小技巧
1.移动端自适应: 移动端的编写首先需要在header写入以下内容来表示页面是以不缩放的形式展示的: <meta name="viewport" content=" ...
- js-分享107个js中的非常实用的小技巧(借鉴保存)
转载原文:http://***/Show.aspx?id=285 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:doc ...
随机推荐
- Mysql中,update语句引起的时间戳自动更新问题
前几天遇到一个奇怪的问题. 在Mysql数据库中有一张表,表中有一个字段是timestamp类型的.我在update别的字段时,这个timestamp字段的时间会自动更新为当前时间. 后来发现,是My ...
- .NET Core3.0 EF 连接 MySql
一:创建项目 添加 csproj (或者直接NuGet 引用) <ItemGroup> <PackageReference Include="Microsoft.Entit ...
- 【Error】Maven Dependency 下载失败问题
原文 前言 在使用Maven私服Sonatype Nexus的时候,经常会出现依赖包找不到的问题. 此时通过浏览器去私服页面查看,发现依赖包坐标是存在的,对应的文件(比如jar文件). 或者私服上面也 ...
- nyoj 23-取石子(一)(博弈)
23-取石子(一) 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:20 submit:33 题目描述: 一天,TT在寝室闲着无聊,和同寝的人玩起了取 ...
- nyoj 36-最长公共子序列 (动态规划,DP, LCS)
36-最长公共子序列 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:18 submit:38 题目描述: 咱们就不拐弯抹角了,如题,需要你做的就是写 ...
- python的文件操作及简单的用例
一.python的文件操作介绍 1.文件操作函数介绍 open() 打开一个文件 语法:open(file, mode='r', buffering=-1, encoding=None, errors ...
- gcc在x64体系中如何传递参数,linux,mac,iOS适用
上一篇介绍了vc(windows)平台在x64体系当中,c函数的传参方式.本篇将要介绍gcc(类linux,mac)平台在x64中,c函数是如何传参的.为节约时间和篇幅,首先来定义一个有十个参数的函数 ...
- 破解网站二维码验证,Java实现,不调用任何平台api接口
package image.images; import java.io.File; import java.io.IOException; import java.io.InputStream; i ...
- TypeScript SDK 和 REST API
在本文中,我们将讨论CUBA平台中已经存在很长时间的一个功能,但是很多人还不知道,这就是前端SDK生成器,并了解它如何与CUBA的REST API插件一起使用. Java+JavaScript - 在 ...
- 《VueRouter爬坑第三篇》-嵌套路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...