本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家分享11 个对开发有帮助的 JS 技巧。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。相关推荐:JavaScript视频教程
1. 生成一个带有随机数的列表
1 2 | Array.from({ length: 1000 }, Math.random)
|
2.生成一个带有数字的列表
1 2 | Array.from({ length: 1000 }, (v, i) => i)
|
3. RGB→转换为十六进制
1 2 3 4 5 | const rgb2hex = ([r, g, b]) =>
` #${(1 << 24) + (r << 16) + (g << 8) + b}`.toString(16).substr(1);
rgb2hex([76, 11, 181]);
|
4. 转换十六进制→RGB
怎么把它转换回去? 这是实现该目标的一种好方法。
1 2 3 4 5 | const hex2rgb = hex =>
[1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16));
hex2rgb( "#4c0bb5" );
|
5.奇数或偶数
使用 位 运算的方式:
1 2 3 4 5 | const value = 232;
if (value & 1) console.log( "odd" );
else console.log( "even" );
|
6.检查有效的 URL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const isValidURL = (url) => {
try {
new URL(url);
return true ;
} catch (error) {
return false ;
}
}
isValidURL( 'https://segmentfault.com/u/minnanitkong/articles' )
isValidURL( "https//invalidto" );
|
7.距离过去到现在时间表示
有时我们需要打印6分钟前的日期,但不希望很大的库来完成。这里有一个小片段可以做到这一点:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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);
|
8. 用参数生成路径
我们在处理路线/路径时常做很多工作,我们总是需要对其进行操作。 当我们需要生成带有参数的路径以将浏览器推送到那里时,generatePath
可以帮助我们!
1 2 3 4 5 6 7 8 9 | 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,
});
|
9.从路径获取参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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" );
getPathParams( "/items/2/id/8583212" , "/items/:category/id/:id" , {
category: v => [ 'Car' , 'Mobile' , 'Home' ][v],
id: v => +v
});
|
10.用查询字符串生成路径
1 2 3 4 5 6 7 8 9 | 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" );
|
原文地址:https://dev.to/11-javascript-tips-and-tricks-to-code-like-a-superhero-vol-2-mp6
作者:Orkhan Jafarov
译文地址:https://segmentfault.com/a/1190000039122988
更多编程相关知识,请访问:编程视频!!
以上就是值得收藏的11个对开发有帮助的 JS 技巧的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
canvas实现五子棋游戏的代码示例
html网址跳转代码是什么
总结html网页中插入视频的方法
es6块级绑定中let and const的详细分析
如何理解html、css、javascript之间的关系?
代码详解vue中key的作用示例
javascript实现间隔和延时的方法是什么
html怎么让超链接没有下划线
html中circle是什么意思
html网页选择使用哪种浏览器内核渲染的方法
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 值得收藏的11个对开发有帮助的 JS 技巧