总结10个提高开发效率的JavaScript开发技巧。

1.生成随机的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,%}

2.不用循环生成指定长度的数组。

const List = len => [...new Array(len).keys()];
const list = List(10); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

3.一行代码对数组去重。

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]

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"

5.颜色混合。

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"

6.判断一个整数是否为质数。

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

7.遍历类数组对象。

const elements = document.querySelectorAll(selector);
[].prototype.forEach.call(elements, (el, idx, list) => {
console.log(el); // 元素节点
})

8.判断对象的类型。

const type = data => Object.prototype.toString.call(data).replace(/^\[object (.+)\]$/, '$1').toLowerCase()
type({}); // object

9.优化多层判断的条件。

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); // 不及格

10.时间格式化。

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', '2019/08/15 13:55'); // 2019-08-15 13:55

"讲的人不相信,听的人也不相信。"

javascript的10个开发技巧的更多相关文章

  1. JavaScript面试知识点与开发技巧汇总

    1.bind相关用法 fun.bind(obj)将obj传入fun作为其作用域 fun.bind将返回一个新的函数地址,fun.bind(obj)!=fun.bind(obj) 反复bind只有第一次 ...

  2. Python 的 10 个开发技巧!太实用了

    1. 如何在运行状态查看源代码? 查看函数的源代码,我们通常会使用 IDE 来完成. 比如在 PyCharm 中,你可以 Ctrl + 鼠标点击 进入函数的源代码. 那如果没有 IDE 呢? 当我们想 ...

  3. 使用JavaScript在项目前台开发的58种常用小技巧

    oncontextmenu="return false" :禁止右键 onselectstart="return false" : 禁止选取 onpaste = ...

  4. Visual Studio 原生开发的10个调试技巧(二)

    原文:Visual Studio 原生开发的10个调试技巧(二) 我以前关于 Visual Studio 调试技巧的文章引起了大家很大的兴趣,以至于我决定分享更多调试的知识.以下的列表中你可以看到写原 ...

  5. Javascript网页特效开发技巧

    Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一 ...

  6. ES6 Javascript 实用开发技巧

    ES6 实用开发技巧 定义变量/常量 ES6 中新增加了 let 和 const 两个命令,let 用于定义变量,const 用于定义常量 两个命令与原有的 var 命令所不同的地方在于,let, c ...

  7. 【前端】javascript中10常用的个小技巧总结

    javascript中10常用的个小技巧总结 本文转自:http://www.cnblogs.com/libin-1/p/6756393.html 1. new Set() 可能有人知道ES6中提供了 ...

  8. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  9. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

随机推荐

  1. 《Web Development with Go》Middleware之使用codegangsta.negroni

    这个第三方库,使用自定义中间件时, 语法就感觉流畅很多. package main import ( "fmt" "log" "net/http&qu ...

  2. 【使用篇二】SpringBoot使用Druid作为数据源(19)

    Druid是一个关系型数据库连接池,它是阿里巴巴的一个开源项目.Druid支持所有JDBC兼容数据库,包括了Oracle.MySQL.PostgreSQL.SQL Server.H2等.Druid在监 ...

  3. queue队列基础讲解

    前言 似乎这种对蒟蒻最重要的概念都搜不到,对巨佬来说也根本不必要提及. 导致我也不懂. Queue 意义 queue,队列,一种数据结构. 队列是一种操作受限制的线性表: 特点: 1.元素先进先出. ...

  4. 使用IntelliJ IDEA创建第一个Mawen项目

    咳咳...首先各位在学习SSM框架的时候,单个单个学完之后,老夫掐指一算(其实,我是个小鲜肉),各位必定会去整合SSM,这个时候,老夫又掐指一算,各位必定会碰到个mawen的东西,在这里,我可以告诉各 ...

  5. RocketMQ(一):推拉消费模型客户端实践

    消息中间件是为解耦生产者和消费者的目的,三大服务点:解耦.异步.削峰. 现在的的互联网系统中,mq已经必备基础设施了,我们已明显感觉它的必要性与强大.然而,它的本质是啥?存储转发系统罢了! MQ有很多 ...

  6. MVC过滤器:自定义操作过滤器

    一.操作过滤器 1.定义 操作过滤器用于实现IActionFilter接口以及包装操作方法执行.IActionFilter接口声明两个方法:OnActionExecuting和OnActionExec ...

  7. 在Python中反向遍历序列(列表、字符串、元组等)的五种方式

    1. reversed() a = [1, 2, 3, 4] for i in reversed(a): print(i) 2. range(len(a)-1, -1, -1) a = [1, 2, ...

  8. C#中增量类功能的方式之 继承与扩展

    之前一次公司培训的时候,将它记录下来,https://www.cnblogs.com/AlvinLee/p/10180536.html这个博客上面比较全面. 1.扩展方法 扩展方法是一种特殊的静态方法 ...

  9. iOS中点击按钮复制指定内容

    话不多说,直接上图和代码:

  10. QPNP 8909 8916 充电相关(2)【转】

    上一篇主要讲电池相关的一些知识,上节忘记讲了,电池一般分为电量计电池和非电流计电池,电量计电池,就不需要用pmu8916的IC,当然这只是只,不需要BMS来计算soc,而jni层也需要读取电流计的电池 ...