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

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

image_0a547d5f.png

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

1、随机生成字符串

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

输出结果:

image_b6100110.png

2、实现字符串的翻转

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

输入结果:

image_4259df62.png

3、删除数组中重复元素

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

image_de41a879.png

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

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

image_cdbb40e7.png

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

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

输出结果

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

输出结果

image_8151504f.png

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)

image_06fa3acb.png

9、判断数组是否为空

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

image_69fb17bd.png

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

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

输出结果

image_72b5caff.png

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

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

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

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

输出结果:

image_9b654dcc.png

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

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

输出结果:

image_279af472.png

14、判断是否是json字符串

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

输出结果:

image_ac0e7701.png

15、获取当前网址

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

输出结果:

image_efbe20fb.png

相关文章
|
13天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
31 3
原生js炫酷随机抽奖中奖效果代码
|
6天前
|
前端开发 JavaScript
前端界的革命:掌握这些新技术,让你的代码简洁到让人惊叹!
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法,极大减少了代码冗余。React通过虚拟DOM和组件化思想,提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割,优化了应用性能和加载速度。这些新技术正引领前端开发的革命,使代码更加简洁、高效、可维护。
11 2
|
6天前
|
前端开发 JavaScript 测试技术
前端工程师的必修课:如何写出优雅、可维护的代码?
前端工程作为数字世界的门面,编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面,提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习,前端工程师可以写出高效且易于维护的代码,为项目的成功打下坚实基础。
15 2
|
12天前
|
监控 前端开发 JavaScript
前端开发的终极奥义:如何让你的代码既快又美,还不易出错?
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域,本文从性能优化、代码美化和错误处理三个方面,探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能;遵循命名规范、保持一致的缩进与空行、添加注释与文档,让代码更易读;通过输入验证、try-catch捕获异常、日志与监控,增强代码的健壮性。追求代码的“快、美、稳”,是每个前端开发者的目标。
29 3
|
11天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
11天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
18 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
13天前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
29 1
|
16天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
22 1
|
16天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
47 1