11|11 个对开发有帮助的 JS 技巧 11个对开发有帮助的JS技巧

作者：Orkhan Jafarov
译者：前端小智
来源: dev

有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

1. 生成一个带有随机数的列表

Array.from({ length: 1000 }, Math.random) // [ 0.6163093133259432,?0.8877401276499153,?0.4094354756035987,?...] - 1000 items

2.生成一个带有数字的列表

Array.from({ length: 1000 }, (v, i) => i) // [0, 1, 2, 3, 4, 5, 6....999]

3. RGB→转换为十六进制

const rgb2hex = ([r, g, b]) => `#${(1 << 24) + (r << 16) + (g << 8) + b}`.toString(16).substr(1); rgb2hex([76, 11, 181]); // #4c0bb5

4. 转换十六进制→RGB
怎么把它转换回去？这是实现该目标的一种好方法。

const hex2rgb = hex => [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16)); hex2rgb("#4c0bb5"); // [76, 11, 181]

5.奇数或偶数
使用位运算的方式：

const value = https://www.it610.com/article/232; if (value & 1) console.log("odd"); else console.log("even"); // even

6.检查有效的 URL

const isValidURL = (url) => { try { new URL(url); return true; } catch (error) { return false; } }isValidURL('https://segmentfault.com/u/minnanitkong/articles') // trueisValidURL("https//invalidto"); // false

7.距离过去到现在时间表示
有时我们需要打印6分钟前的日期，但不希望很大的库来完成。这里有一个小片段可以做到这一点：

const fromAgo = (date) => { const ms = Date.now() - date.getTime(); const seconds = Math.round(ms / 1000); const minutes = Math.round(ms / 60000); const hours = Math.round(ms / 3600000); const days = Math.round(ms / 86400000); const months = Math.round(ms / 2592000000); const years = Math.round(ms / 31104000000); switch (true) { case seconds < 60: return `${seconds} second(s) ago"`; case minutes < 60: return `${minutes} minute(s) ago"`; case hours < 24: return `${hours} hour(s) ago"`; case days < 30: return `${days} day(s) ago`; case months < 12: return `${months} month(s) ago`; default: return `${years} year(s) ago`; } }; const createdAt = new Date(2021, 0, 5); fromAgo(createdAt); // 14 day(s) ago;

8. 用参数生成路径
我们在处理路线/路径时常做很多工作，我们总是需要对其进行操作。当我们需要生成带有参数的路径以将浏览器推送到那里时，generatePath 可以帮助我们！

const generatePath = (path, obj) => path.replace(/(:[a-z]+)/g, (v) => obj[v.substr(1)]); const route = "/app/:page/:id"; generatePath(route, { page: "products", id: 85, }); // /app/products/123

9.从路径获取参数

const getPathParams = (path, pathMap, serializer) => { path = path.split("/"); pathMap = pathMap.split("/"); return pathMap.reduce((acc, crr, i) => { if (crr[0] === ":") { const param = crr.substr(1); acc[param] = serializer && serializer[param] ? serializer[param](path[i]) : path[i]; } return acc; }, {}); }; getPathParams("/app/products/123", "/app/:page/:id"); // { page: 'products', id: '123' }getPathParams("/items/2/id/8583212", "/items/:category/id/:id", { category: v => ['Car', 'Mobile', 'Home'][v], id: v => +v }); // { category: 'Home', id: 8583212 }

10.用查询字符串生成路径

const getQueryParams = url => url.match(/([^?=&]+)(=([^&]*))/g).reduce((total, crr) => { const [key, value] = crr.split("="); total[key] = value; return total; }, {}); getQueryParams("/user?name=Orkhan&age=30"); // { name: 'Orkhan', age: '30' }

我是小智，我要去刷碗了，我们下期见~
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文：https://dev.to/11-javascript-...
交流文章每周持续更新，可以微信搜索【大迁世界】第一时间阅读，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，欢迎Star。
【11|11 个对开发有帮助的 JS 技巧】