📕重学JavaScript：一些实用的代码实践
嗨，大家好！这里是道长王jj~ 🎩🧙♂️
这篇文章要分享一些写出漂亮、干净的代码的秘诀。👩💻
要想写出好代码，就要搞清楚每一行都是干什么的，还要让代码看起来整洁/清晰。👌
把这些秘诀记下来，以后遇到问题就能快速解决！🚀
📌防止代码崩溃
代码里有一些奇怪的事情发生，这是不好的，但是我们要学会应对。😅
比如说，有时候会出现 TypeError 的错误，就是因为我们想要从 undefined/null 之类的东西里取属性。
如果你的项目可以用可选链，那就用吧，它很方便。👍
但是如果无法使用可选链，你可能会遇到下面这种情况：
const found = [{
name: "王jj" }].find(i => i.name === '林xx');
console.log(found.name);
// TypeError: Cannot read property 'name' of undefined
现在你可以这样避免这个错误：
const found = [{
name: "王jj" }].find(i => i.name === '林xx') || {
};
console.log(found.name);
// undefined
当然这要看具体情况，不过对于小项目来说还是可以的。现在你不需要编写大量代码来处理它了。
📌屏蔽字符串
有时候我们需要把一些变量隐藏起来。我们只保留字符串 substr(-3) 的最后 3 个字符，其他的都用一些符号（比如 * ）代替。🙈
const password = "hahahacde";
password.substr(-3).padStart(password.length, "*");
// ******cde
📌生成随机数列表
有时候我们需要一堆假数据来做一些事情。所以这里有一个小技巧可以轻松地做到这一点。👇
Array.from({
length: 10 }, Math.random)
// [0.7222684333921601, 0.7280629203984461, 0.41602354124964935, 0.5217500130889969, 0.9377950574322391, 0.5640588877216546, 0.2526865158094982, 0.002992488477135513, 0.9815489925438687, 0.6208392853986444]
Array.from({
length: 1000 }, (v, i) => i)
// [0, 1, 2, 3, 4, 5, 6....999]
📌转换颜色数据：RGB → HEX
想把 RGB 变成 HEX ？不用下载任何库，就能做到！👏
const rgb2hex = ([r, g, b]) =>
'#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).substr(1);
rgb2hex([76, 11, 181]);
// #4c0bb5
📌转换颜色数据：HEX → RGB
转换回来👏
const hex2rgb = hex =>
[1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16));
hex2rgb("#4c0bb5");
// [76, 11, 181]
📌检查奇数偶数
const value = 232;
if (value & 1) console.log("奇");
else console.log("偶");
// 偶
📌检查有效的 URL
你们可能都知道这个方法来检查 URL 是否正确，但还是给你们看看吧。😊
const isValidURL = (url) => {
try {
new URL(url);
return true;
} catch (error) {
return false;
}
};
isValidURL("https://wangxinleo.cn");
// true
isValidURL("https//wangxinleo");
// false
📌如何显示“更新于N秒/分/小时”等等
有时候你想把日期显示成 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} 秒前"`;
case minutes < 60:
return `${
minutes} 分钟前"`;
case hours < 24:
return `${
hours} 小时前"`;
case days < 30:
return `${
days} 天前`;
case months < 12:
return `${
months} 月前`;
default:
return `${
years} 年前`;
}
};
const createdAt = new Date(2023, 3, 5);
fromAgo(createdAt); // '3 月前'
📌如何优雅生成路径
我们经常要用到 app/xxxx ，还要对它们做一些操作。如果我们想要创建一个带有参数的路径，然后让浏览器跳转到那里，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
📌如何优雅地从路径中获取参数
接下来我们要拿到我们的参数。另外，你还可以用下面的方法来轻松地处理你的数据。👍
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 }
📌如何优雅地生成包含query参数的路径
const generatePathQuery = (path, obj) =>
path +
Object.entries(obj)
.reduce((total, [k, v]) => (total += `${k}=${encodeURIComponent(v)}&`), "?")
.slice(0, -1);
generatePathQuery("/user", {
name: "wangjj", age: 30 });
// "/user?name=wangjj&age=30"
📌从Query中获取参数
const getQueryParams = url =>
url.match(/([^?=&]+)(=([^&]*))/g).reduce((total, crr) => {
const [key, value] = crr.split("=");
total[key] = value;
return total;
}, {
});
getQueryParams("/user?name=wangjj&age=30");
// { name: 'wangjj', age: '30' }
🎉 你觉得怎么样？这篇文章可以给你带来帮助吗？当你处于这个阶段时，你发现什么对你帮助最大？如果你有任何疑问或者想进一步讨论相关话题，请随时发表评论分享您的想法，让其他人从中受益。🚀✨
