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值转换成十六进制值
无需任何库即可将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 = 232;
if (value & 1) console.log("odd");
else console.log("even");
// even
6.检查有效URL
我想大多数人使用的都是这种方式来验证URL。
const isValidURL = (url) => {
try {
new URL(url);
return true;
} catch (error) {
return false;
}
};
isValidURL("https://dev.to");
// true
isValidURL("https//invalidto");
// false
- N分钟前
有时你将一个日期输出为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.使用参数生成路径
我们在处理路线/路径工作时,总是经常需要对其进行操作。当我们需要生成w/参数路径,并将其推送到浏览器那边去时,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.从路径中获取参数
没错,现在我们需要获取参数了。另外,你可以通过serializer来解析数据。
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 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.从查询字符串中获取参数
现在要说的是如何从查询字符串中获取参数。
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' }