前端：收集非常实用的JS代码，值得收藏！

风晓 2023-12-25 15:36:47  50119 赞同 0 反对 0

分类：资源

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

1、随机生成字符串

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

randomStr();

输出结果：

2、实现字符串的翻转

const reverseStr = str => str.split('').reverse().join('');

reverseStr('vue 入门到精通');

reverseStr('IT技术分享社区');

输入结果：

3、删除数组中重复元素

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

console.log([...set]);

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

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

rgbToHex(255, 255, 255);

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

const shuffle = array => array.sort(() => 0.5-Math.random());

shuffle([29,3,57,2,40])

输出结果

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"))

输出结果

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

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

dayOfYearStr(new Date());

输出结果

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)

9、判断数组是否为空

const isNotEmptyArr = arr => Array.isArray(arr) && arr.length > 0;

isNotEmptyArr([6,66,666]);

isNotEmptyArr([]);

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

const merge = (a, b) => a.concat(b);

const a=[1,2,3];

const b=[4,5,6];

merge(a,b);

输出结果

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

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

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

capitalizeEveryWordStr('hello vue js ');

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);

输出结果：

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

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

getTimeFromDate(new Date());

输出结果：

14、判断是否是json字符串

const isJson = str => {

try {

JSON.parse(str);

return true;

} catch (e) {

return false;

}

};

isJson('{"name":"小明","address":"苏州"}');

isJson('{"name":"小王",address:"南京"}');

输出结果：

15、获取当前网址

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

currentURL();

输出结果：

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

前端：console 10 中使用小技巧，你都用过吗？ 2023-12-25 50707 浏览
今天给大家分享前端：console 10 中使用小技巧
前端已死？探讨人工智能与低代码对前端的影响 2023-12-28 48666 浏览
随着人工智能和低代码的崛起，“前端已死”的声音逐渐兴起，现在前端工作不好找，说前端已死？前端已死这个说法并不是事实，而是一种极端的观点。事实上，前端开发在当今的互联网行业中扮演着至关重要的角色，它是构建 Web 应用程序所必需的一部分，能够实现动态交互、良好的用户体验和友好的界面设计。随着前端技术的不断发展和升级，前端开发的工作也日益复杂和多样化。现在的前端开发不再只是简单地处理 HTML、CSS 和 JavaScript，而是需要掌握更多的技术，如 React、Vue、Angular、Node.js 等。同时，前端开发也需要与后端开发、产品经理、UI 设计师等协作，共同完成一个 Web 应用程序的开发。所以，不是前端已死，而是不能不断学习和适应新的技术和趋势的程序员会死。
web前端：关于浏览器内核的多线程机制 2023-12-25 48233 浏览
浏览器内核即浏览器底层最核心和最基础的那一部分，它主要负责对网页当中的html、css、JavaScript进行解释然后在浏览器当中进行渲染最终呈现给用户，也就是说内核的工作就是渲染，所以我们常常把浏览器内核称为渲染引擎（Rendering Engine）也称为布局引擎（Layout Engine）、排版引擎。另外，由于不同浏览器的渲染内核不同，对 html、css、 JavaScript的语法解释也存在差异（兼容问题），因此我们在开发过程中需要在不同内核的浏览器当中进行网页渲染效果的测试。
前端福利！10个短小却超实用的JavaScript 代码段 2023-12-25 53192 浏览
JavaScript正变得越来越流行，它已经成为前端开发的第一选择，并且利用基于JavaScript语言的NodeJS，我们也可以开发出高性能的后端服务，甚至我还看到在硬件编程领域也出现了JavaScript的身影。JavaScript正在逐渐进化为一门全能的开发语言。下面是我收集的10段实用JavaScript代码，基于它们你还可以创造出更强大的JS插件或功能函数。
【信息收集方法总结(来自 freebuf)】 2024-03-28 51799 浏览
当时的付费文章。做渗透测试的时候可以参考一下
小狐狸ChatGPT系统 H5前端底部菜单导航文字 2023-12-27 52033 浏览
小狐狸ChatGPT系统 H5前端底部菜单导航
前端：分享JS中7个高频的工具函数，值得收藏！ 2023-12-25 48517 浏览
JavaScript 实用函数是有用的、可重复使用的片段，您可以在许多不同的项目中重复使用。它们的目的是为常见任务提供一致且高效的输出，并帮助提高代码的一致性。因此在我们的日常开发中，经常整理和维护一套适合自己的函数工具库还是很有必要的。在本文中，我想重点介绍我在许多项目中使用的 7 个实用函数，并解释它们的用途。
前端常用60余种工具方法 2023-12-25 51532 浏览
可以 ctrl + f 关键字搜索，看看有没有你想要的方法。
前端：vue-element-admin 搭建踩坑笔记 2023-12-25 50193 浏览
vue-element-admin搭建过程中可能会遇到各种各样的安装依赖问题，今天给大家分享一下如何解决这些问题。
干货：前端工程师实用的网站合集，值得收藏！ 2023-12-25 52076 浏览
今天给大家分享前端工程师常用的网站，主要分为两类：学习充电，接单挣钱。

前端：收集非常实用的JS代码，值得收藏！

1、随机生成字符串

2、实现字符串的翻转

3、删除数组中重复元素

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

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

6、获取两个日期的时间间隔 （天数）

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

8、截断字符串长度

9、判断数组是否为空

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

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

12、数组删除元素

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

14、判断是否是json字符串

15、获取当前网址

相关资源

关注我们

6、获取两个日期的时间间隔（天数）