标签：10 const 16 幸福感 JS let date ratio Math
总结一些能够提高开发效率的JS技巧，这些技巧很实用，觉得挺好，想推荐给大家，所以有了这篇文章。
生成随机UID
const genUid = () => {
var length = 20
var soupLength = genUid.soup.length
var id = []
for (var i = 0; i < length; i++) {
id[i] = genUid.soup.charAt(Math.random() soupLength)
}
return id.join('')
}
genUid.soup_ = '!#$%()+,-./:;=?@[]^_{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'<br/>genUid() // ;lyCPc9A8IuK}?N6,%}
无loop生成指定长度的数组
const List = len => [...new Array(len).keys()]
const list = List(10) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
一行代码去重数组
const list = [1, 1, 2, 3, 6, 45, 8, 5, 4, 6, 5]
const uniqueList = [...new Set(list)] // [1, 2, 3, 6, 45, 8, 5, 4]
RGB色值生成16进制色值
const rgb2Hex = (r, g, b) => {
r = Math.max(Math.min(Number(r), 100), 0) 2.55
g = Math.max(Math.min(Number(g), 100), 0) 2.55
b = Math.max(Math.min(Number(b), 100), 0) 2.55
r = ('0' + (Math.round(r) || 0).toString(16)).slice(-2)
g = ('0' + (Math.round(g) || 0).toString(16)).slice(-2)
b = ('0' + (Math.round(b) || 0).toString(16)).slice(-2)
return '#' + r + g + b
}
rgb2Hex(100, 50, 0) // "#ff7f00"
颜色混合
const colourBlend = (c1, c2, ratio) => {
ratio = Math.max(Math.min(Number(ratio), 1), 0)
let r1 = parseInt(c1.substring(1, 3), 16)
let g1 = parseInt(c1.substring(3, 5), 16)
let b1 = parseInt(c1.substring(5, 7), 16)
let r2 = parseInt(c2.substring(1, 3), 16)
let g2 = parseInt(c2.substring(3, 5), 16)
let b2 = parseInt(c2.substring(5, 7), 16)
let r = Math.round(r1 (1 - ratio) + r2 ratio)
let g = Math.round(g1 (1 - ratio) + g2 ratio)
let b = Math.round(b1 (1 - ratio) + b2 * ratio)
r = ('0' + (r || 0).toString(16)).slice(-2)
g = ('0' + (g || 0).toString(16)).slice(-2)
b = ('0' + (b || 0).toString(16)).slice(-2)
return '#' + r + g + b
}
colourBlend('#ff0000', '#3333ff', 0.5) // "#991a80"
判断是否为质数
const mathIsPrime = n => {
if (n === 2 || n === 3) {
return true
}
if (isNaN(n) || n <= 1 || n % 1 != 0 || n % 2 == 0 || n % 3 == 0) {
return false;
}
for (let x = 6; x <= Math.sqrt(n) + 1; x += 6) {
if (n % (x - 1) == 0 || n % (x + 1) == 0) {
return false
}
}
return true
}
mathIsPrime(0) // true
遍历类数组对象
const elements = document.querySelectorAll(selector);
[].prototype.forEach.call(elements, (el, idx, list) => {
console.log(el) // 元素节点
})
判断对象类型
const type = data => Object.prototype.toString.call(data).replace(/^[object (.+)]$/, '$1').toLowerCase()
type({}) // object
优化多层判断条件
const getScore = score => {
const scoreData = new Array(101).fill(0)
.map((data, idx) => ([idx, () => (idx < 60 ? '不及格' : '及格')]))
const scoreMap = new Map(scoreData)
return (scoreMap.get(score)
? scoreMap.get(score)()
: '未知分数')
}
getScore(30) // 不及格
时间格式化
const dateFormatter = (formatter, date) => {
date = (date ? new Date(date) : new Date)
const Y = date.getFullYear() + '',
M = date.getMonth() + 1,
D = date.getDate(),
H = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds()
return formatter.replace(/YYYY|yyyy/g, Y)
.replace(/YY|yy/g, Y.substr(2, 2))
.replace(/MM/g, (M < 10 ? '0' : '') + M)
.replace(/DD/g, (D < 10 ? '0' : '') + D)
.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
.replace(/mm/g, (m < 10 ? '0' : '') + m)
.replace(/ss/g, (s < 10 ? '0' : '') + s)
}
dateFormatter('YYYY-MM-DD HH:mm', '1995/02/15 13:55') // 1995-02-15 13:55
后记
如果此时正在看文章的你也有类似的技巧心得，不妨在下方留言来分享给大家。
如果觉得文章对您有帮助，请动动手指点赞加关注我哟！
标签：10,const,16,幸福感,JS,let,date,ratio,Math 来源： https://blog.51cto.com/14484771/2432080
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。