总结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. 基于django的个人博客网站建立(六)

    基于django的个人博客网站建立(六) 前言 今天主要完成的是项目在腾讯云服务器上ubuntu16.04+django+mysql+uwsig+nginx的部署过程网站效果可点击这里访问 主要内容 ...

  2. [C]副作用和序列点

    概述 副作用: <C语言核心技术>对副作用的描述: 表达式内包含了一串的常量.标识符.运算符(指示的运算方式).表达式的目的可以是获得结果值,或者得到运算的副作用(side effect) ...

  3. bootstrap-select使用过程中的一些问题

    这里总结一下上次使用bootstrap-select的过程中遇到的一些问题.至于bootstrap-select的具体使用方法这里就不介绍了,网上有很多例子. 地址: 官方插件地址:https://d ...

  4. angularjs $scope与this的区别,controller as vm有何含义?

     壹 ❀ 引 初学angularjs的同学对于$scope一定不会陌生,scope(作用域)是将view(视图)与model(模板)关联起来的桥梁,通过controller(控制器)对于model的数 ...

  5. Bit Manipulation-leetcode

    Bit Manipulation Find the Difference /* * Given two strings s and t which consist of only lowercase  ...

  6. 第11章 UDP:用户数据报协-----读书笔记

    1.分片应用程序只关心IP数据报的长度,如果它超过MTU值,那么就要对数据包进行分片. 2.UDP首部字段图: (16位源端口号+16位目端口号+16位UDP长度+16位UDP校验和+数据) 3.UD ...

  7. linux查看占用端口号的程序及pid

    netstat -tunlp|grep 端口号 圈出来的就是pid

  8. spring = servlet + 依赖管理 + 业务逻辑

    spring = servlet + 依赖管理 + 业务逻辑

  9. C/C++ 中 `printf` 格式化

    作为强类型静态语言,类型不仅规定了可以对数据进行的操作,还决定了应该怎样在 printf 中输出. printf 的签名是: int printf ( const char * format, ... ...

  10. fiddler抓包syntaxview窗口乱码

    只需再fiddler界面GO往右第二个Decode点击一下,让他出现蓝色边框即可 注意:抓取前的他不会进行自动解码,要再重新刷新页面才能获取界面后的内容