关闭

10条提高开发效率的JS技巧

时间: 2019-08-24阅读: 693标签: 技巧

总结一些能够提高开发效率的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‘
genUid() // ;l`yCPc9A8IuK}?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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4918

关闭

我总结了12个Vue.js开发技巧和窍门

我真的很喜欢使用Vue.js,每次使用框架时,我都会喜欢深入研究其功能和特性。通过这篇文章,我向你介绍了十个很酷的提示和技巧,你可能尚未意识到这些技巧和窍门,以帮助你成为更好的Vue开发人员。

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

七个 JavaScript 实用小技巧

和许多其他语言一样,JavaScript 也需要靠很多小技巧去完成各种不同的事情。有的可能早已经广为人知,有的却可能会让你感到有些迷惑。接下来先介绍七个马上就能用起来的 JavaScript 小技巧。

Js应用技巧集合

这里我将会对这些应用技巧进行集中描述,如果你觉得遗漏了一些好用的应用技巧,也请在留言中提出,我会及时更新到这篇文章中的。

如何能提高CSS编写技巧?提高Web前端开发效率

如何能提高CSS编写技巧?怎么学好Web前端开发?很多人在学习Web前端时,刚开始都会学习HTML和CSS,HTML用于文本内容,CSS用于样式设计,掌握这两部分知识就可以进行简单的页面制作。不过如果耗时过长作品一般未免有些得不偿失

编程技巧:重构if...else if...else

新入职的公司,前人留下来一个项目,里面充斥着大量的if...else...,则倒是其次,主要连注释写的都很少。面对这样的已经上线的代码,我并没有想去重构他因为成本太高,只好鞭策自己不要写出这种代码

JS 中有趣的事实

使用 JS 有很多有趣的地方。尽管工程师们每天都在与之打交道,但仍有一些语言没有被开发出来。本广将介绍一些你可能想不到的JS特性。NaN 是一个 number 类型

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

使用Js的一些小技巧

任何一门技术在实际中都会有一些属于自己的小技巧。同样的,在使用JavaScript时也有一些自己的小技巧,只不过很多时候有可能容易被大家忽略。而在互联网上,时不时的有很多同行朋友会总结

ES6常用的小技巧

ES6中常用的小技巧,如果能在实际项目中能使用到,必定事半功倍: 强制要求参数;强大的reduce;使用reduce同时实现map和filter;使用reduce取代map和filter

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!