11 个对开发有帮助的 JS 技巧，进收藏夹当小词典吧！

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://segmentfault.com/u/minnanitkong/articles’)

// true

isValidURL(“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];

}

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-tips-and-tricks-to-code-like-a-superhero-vol-2-mp6

交流

---

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复福利，即可看到福利，你懂的。
、