![7_0)52US2JO]BY1X[Q@`B88.png](https://ucc.alicdn.com/pic/developer-ecology/65be00cbb7d84ef99ab3536bf6961d9d.png?x-oss-process=image/resize,w_1400/format,webp "7_0)52US2JO]BY1X[Q@`B88.png")
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格式和HEX之间的转化
const rgb2hex = ([r, g, b]) => `#${(1 << 24) + (r << 16) + (g << 8) + b}`.toString(16).substr(1); rgb2hex([76, 11, 181]); // #4c0bb5
4.颜色值HEX格式和RGB之间的转化
const hex2rgb = hex => [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16)); hex2rgb("#4c0bb5"); // [76, 11, 181]
5.奇偶数判断
const value = 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://dev.to"); // true isValidURL("https//invalidto"); // false
7.多长时间以前
我们经常有这样的需求，在页面中打印已经过去多长时间6 minute(s) ago，但是我们又不想为了这点功能去引入一个日期的库，这里一个简单的函数帮你搞定
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.通过传参生成路径
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.参数生成页面路径
这种是我们经常要在业务中用到的，通过一个对象参数拼接成URL后面的请求参数，注意它的写法，如果是你可能用for循环
const generatePathQuery = (path, obj) => path + Object.entries(obj) .reduce((total, [k, v]) => (total += `${k}=${encodeURIComponent(v)}&`), "?") .slice(0, -1); generatePathQuery("/user", { name: "Orkhan", age: 30 }); // "/user?name=Orkhan&age=30"
11.从URL请求字符串中解析出参数对象
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' }
这些都是平时我们经常在业务中会用的功能，实现起来的方法不止一种，但是我们要经常思考，举一反三，追求一种简洁高效的写法，不是吗？
