当前位置: 首页 > news >正文

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

CSDN话题挑战赛第2期
参赛话题:学习笔记

目录

1、随机生成字符串

2、实现字符串的翻转

3、删除数组中重复元素

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

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

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

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

8、截断字符串长度

9、判断数组是否为空

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

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

12、数组删除元素

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

14、判断是否是json字符串

15、获取当前网址


今天给大家分享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();

输出结果:

相关文章:

  • Swin Transformer v2实战:使用Swin Transformer v2实现图像分类(一)
  • Mysql权限
  • 微信小程序开发实战(SM周期及WXS脚本)
  • 实训任务1:Linux基本操作
  • C++11新特性精讲(多线程除外)
  • SpringCloud——Ribbon
  • 2022 华为杯数学建模研赛思路分享
  • MySql经典50道SQL练习题
  • 基于紧凑度和调度处理的粒子群优化算法-附代码
  • Keras深度学习实战——使用循环神经网络构建情感分析模型
  • 【中国大学生计算机大赛二等奖】智能中医-中e诊简介(一)
  • 【Linux】挂载硬盘、镜像文件、rpm软件包管理器、yum软件包管理器、软件安装jdk、tomcat、mysql
  • 【IDEA主题极致优化】全面优提升你的编码体验
  • 【论文阅读】Finetuned Language Models Are Zero-Shot Learners
  • Node.js基础常用知识点全总结
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • axios 和 cookie 的那些事
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • codis proxy处理流程
  • Flannel解读
  • golang 发送GET和POST示例
  • JavaScript DOM 10 - 滚动
  • Javascript弹出层-初探
  • java概述
  • js中forEach回调同异步问题
  • Node项目之评分系统(二)- 数据库设计
  • Redis学习笔记 - pipline(流水线、管道)
  • swift基础之_对象 实例方法 对象方法。
  • 初探 Vue 生命周期和钩子函数
  • 构建工具 - 收藏集 - 掘金
  • 如何将自己的网站分享到QQ空间,微信,微博等等
  • 树莓派 - 使用须知
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 物联网链路协议
  • 移动互联网+智能运营体系搭建=你家有金矿啊!
  • - 转 Ext2.0 form使用实例
  • 走向全栈之MongoDB的使用
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • ​直流电和交流电有什么区别为什么这个时候又要变成直流电呢?交流转换到直流(整流器)直流变交流(逆变器)​
  • # 飞书APP集成平台-数字化落地
  • (12)目标检测_SSD基于pytorch搭建代码
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • (Redis使用系列) Springboot 实现Redis消息的订阅与分布 四
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (转)Android学习笔记 --- android任务栈和启动模式
  • (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • ... fatal error LINK1120:1个无法解析的外部命令 的解决办法
  • .desktop 桌面快捷_Linux桌面环境那么多,这几款优秀的任你选
  • .dwp和.webpart的区别
  • .L0CK3D来袭:如何保护您的数据免受致命攻击
  • .NET BackgroundWorker
  • .Net Core webapi RestFul 统一接口数据返回格式
  • .net6Api后台+uniapp导出Excel
  • .stream().map与.stream().flatMap的使用