灵活运用JavaScript开发技巧

2025-12-25 JavaScript JS

灵活运用JavaScript开发技巧

文章插图

前言
何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。
每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧。
作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点) 。因此，我整理下三年来自己使用到的一些JAVAScript开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。

以下演示全是ES6版本的书写，在Webpack和Babel的加持下就不能好好写ES6吗，还写什么ES3和ES5呢，更别管那弱智的IE浏览器了，IE浏览器都快被淘汰了，Microsoft都宣布放弃使用自研的浏览器内核而使用google开源的Chromium内核了。

目录
既然写文章有这么多的写作技巧，那么我也需要对JavaScript开发技巧整理一下，起个易记的名字。

String Skill：字符串技巧
Number Skill：数值技巧
Boolean Skill：布尔值技巧
Array Skill：数组技巧
Object Skill：对象技巧
Function Skill：函数技巧
DOM Skill：DOM技巧

备注

代码只作演示用途，不会详细说明ES6语法
如有不明白的语法问题请参考阮一峰老师的《ECMAScript 6 入门》

String Skill

时间对比：时间个位数形式需补0

const time1 = "2019-03-31 21:00:00";const time2 = "2019-05-01 09:00:00";const overtime = time1 > time2;// overtime => false

格式化金钱

const thousand = num => num.toString().replace(/B(?=(d{3})+(?!d))/g, ",");const money = thousand(19941112);// money => "19,941,112"

生成随机ID

const randomId = len => Math.random().toString(36).substr(3, len);const id = randomId(10);// id => "jg7zpgiqva"

生成随机HEX色值

const randomColor = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");const color = randomColor();// color => "#f03665"

生成星级评分

const startScore = rate => "

推荐阅读

上一篇：麦饭石锅掉皮怎么回事麦饭石锅涂层掉了还能用吗

下一篇：go语言网络编程之session的实现