web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

前端33个js知识基础代码

482 ℃
     

1. 检查日期是否有效

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");  // true

2. 计算两个日期之间的间隔

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90

3. 查找日期位于一年中的第几天

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

4. 时间格式化hour:minutes:seconds

const timeFromDate = date => date.toTimeString().slice(0, 8);
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date());  // 返回当前时间 09:00:00

5 字符串首字母大写

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello world")  // Hello world

6. 翻转字符串

const reverse = str => str.split('').reverse().join('');
reverse('hello world');   // 'dlrow olleh'

7. 随机字符串

const randomString = () => Math.random().toString(36).slice(2);
randomString();

8. 截断字符串

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;
truncateString('Hi, I should be truncated because I am too loooong!', 36)   // 'Hi, I should be truncated because...'

9. 去除字符串中的HTML

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

10. 从数组中移除重复项

const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));

11. 判断数组是否为空

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);  // true

12. 合并两个数组

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

13. 判断一个数是奇数还是偶数

const isEven = num => num % 2 === 0;
isEven(996); 

14. 获得一组数的平均值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5);   // 3

15. 获取两个整数之间的随机整数

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
random(1, 50);

16. 指定位数四舍五入

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56

17. 将RGB转化为十六机制

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

18. 获取随机十六进制颜色

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
randomHex();

19. 复制内容到剪切板

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");

20. 清除所有cookie

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

21. 获取选中的文本

const getSelectedText = () => window.getSelection().toString();
getSelectedText();

22. 检测是否是黑暗模式

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)

23. 滚动到页面顶部

const goToTop = () => window.scrollTo(0, 0);
goToTop();

24. 判断当前标签页是否激活

const isTabInView = () => !document.hidden; 

25. 判断当前是否是苹果设备

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
isAppleDevice();

26. 是否滚动到页面底部

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

27. 重定向到一个URL

const redirect = url => location.href = url
redirect("https://www.ipkd.cn/")

28. 打开浏览器打印框

const showPrintDialog = () => window.print()

29. 随机布尔值

const randomBoolean = () => Math.random() >= 0.5;
randomBoolean();

30. 变量交换

[foo, bar] = [bar, foo];

31. 获取变量的类型

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
trueTypeOf('');     // string
trueTypeOf(0);      // number
trueTypeOf();       // undefined
trueTypeOf(null);   // null
trueTypeOf({});     // object
trueTypeOf([]);     // array
trueTypeOf(0);      // number
trueTypeOf(() => {});  // function

32. 华氏度和摄氏度之间的转化

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

33. 检测对象是否为空

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

前端css兼容性问题

前端冷知识:25个正则表达式

前端19个冷知识代码

前端MD5加密源码(md5.js)

标签: 前端知识

上面是“前端33个js知识基础代码”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_1496.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > js
本文共计3815个字,预计阅读时长26分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款免费在线图片处理工具——佐糖图片平台
下一篇: 推荐一款优设网免费可商用字体——优设标题黑体
x 打工人ai神器