前端:收集非常实用的JS代码,值得收藏!

119495b65e4ef6329ce8265dbe793214.png

今天给大家分享js实用的代码片段,值得收藏!

1、随机生成字符串

const randomStr = () => Math.random().toString(20).slice(2);
randomStr();

输出结果:

2323431ab8625ea833daec5839079c61.png

2、实现字符串的翻转

const reverseStr = str => str.split('').reverse().join('');
reverseStr('vue 入门到精通');   
reverseStr('IT技术分享社区');

输入结果:

7cce3b2684aeaed8fff5f4f89ac8c9c8.png

3、删除数组中重复元素

const set=new Set([5,7,1,3,4,2,5,6,8]);
console.log([...set]);

0d42970ff27884a2e26b6b42582f437f.png

4、RGB到十六进制转换机制

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(255, 255, 255);

f06b6b896cd11fb2fa1c638a5b6366b0.png

5、打乱一个数组,重新组合

const shuffle = array => array.sort(() => 0.5-Math.random());
shuffle([29,3,57,2,40])

输出结果

76b9b26adddf21ead917f602e8e568a9.png

6、获取两个日期的时间间隔 (天数)

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2022-09-03"), new Date("2022-11-15"))

输出结果

59665fb53b465ae23ad3f8ab389bf92a.png

7、获取当天属于今年的第几天

const dayOfYearStr = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYearStr(new Date());

输出结果

4113cfd3afb35ab5d0086a1b4e06b2f4.png

8、截断字符串长度

截取字符串长度,超过部分显示为 ...

const splitStr= (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;
splitStr('vue is good web frame', 7)  
splitStr('vue is good web frame', 10)

383946d040793f5213cbb3ef5736faaf.png

9、判断数组是否为空

const isNotEmptyArr = arr => Array.isArray(arr) && arr.length > 0;
isNotEmptyArr([6,66,666]); 
isNotEmptyArr([]);

9f5029cd3b7a2855f84aaac13dee0108.png

10、合并两个数组为一个数组

const merge = (a, b) => a.concat(b);
const a=[1,2,3];
const b=[4,5,6];
merge(a,b);

输出结果

292090fa9793775e8e68b225bcde3d78.png

11、英文句子首字母大写转换

实现英文句子中,每个单词首字母大写

const capitalizeEveryWordStr = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
capitalizeEveryWordStr('hello vue js ');

5f20bf43251ab43a51b79195f4a33a9f.png

12、数组删除元素

给定的数组从左边开始删除 n 个元素,默认n=1

const dropArr = (arr, n = 1) => arr.slice(n);
dropArr([10, 20, 30 , 40]);
dropArr([10, 20, 30 , 40], 2); 
dropArr([10, 20, 30 , 40], 42);

输出结果:

5eb96c662d8fe47681de0f6fbbd080d7.png

13、获取当前日期的时间部分

const getTimeFromDate = date => date.toTimeString().slice(0, 8);
getTimeFromDate(new Date());

输出结果:

8d0752dbcb41536bd37cab3feabfec16.png

14、判断是否是json字符串

const isJson = str => {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
};
isJson('{"name":"小明","address":"苏州"}'); 
isJson('{"name":"小王",address:"南京"}');

输出结果:

d085433274703e06c8b521bb9ec8481e.png

15、获取当前网址

const currentURL = () => window.location.href;
currentURL();

输出结果:

23a7965fa89cea2528dbfcc1e33a36f3.png

技术群:添加小编微信并备注进群

小编微信:mm1552923   

公众号:dotNet编程大全    

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值