今天的这些技巧的汇总,希望可以帮助到你。
此方法用于检查给定日期是否有效。
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 27, 2022 13:14:00"); // true
此方法用于计算两个日期之间的间隔。
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2022-08-27"), new Date("2022-12-25")) // 120
距离圣诞节还有 120 天。
此方法用于检测给定日期所在的一年中的哪一天。
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date()); // 239
2022年已经过去了239天。
此方法可用于将时间转换为 hh:mm:ss 格式。
const timeFromDate = date => date.toTimeString().slice(0, 8);
timeFromDate(new Date(2021, 11, 2, 12, 30, 0)); // 12:30:00
timeFromDate(new Date()); // now time 09:00:00
此方法用于将字符串的第一个字母大写。
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello world") // Hello world
该方法用于翻转字符串并返回翻转后的字符串。
const reverse = str => str.split('').reverse().join('');
reverse('hello world'); // 'dlrow olleh'
此方法用于生成随机字符串。
const randomString = () => Math.random().toString(36).slice(2);
randomString();
此方法将字符串截断为指定长度。
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...'
此方法用于从字符串中删除 HTML 元素。
const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
删除重复元素是我们在数组中做的常见事情之一,这里有两种方法,根据情况选择使用。
1)、
const removeDuplicates = (arr) => [... .new Set(arr)];
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
2)、
const num = [1,2,2,2,5,66,666,55,5]
const name = ["adarsh","gupta","adarsh","raj","ratesh","raj"]
const uniquenum = [... new Set(num)]
// [1,2,5,66,666,55]
const uniquenames = [... new Set(name)
// ["adarsh","gupta","raj","ratesh"]
1)、使用 isArray 方法检查数组是否为空,并通过传递数组检查 Object.keys(arr) 的长度来确认它。
Object.keys() 方法返回给定对象自己的可枚举属性名称的数组,以与正常循环相同的顺序进行迭代。
const isArrayNotEmpty = (arr) => Array.isArray(arr) &&
Object.keys(arr).length > 0; // Examples
isArrayNotEmpty([]); // false
isArrayNotEmpty([1, 2, 3]); // true
2)、该方法用于判断一个数组是否为空数组,它返回一个布尔值。
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]); // true
可以使用以下两种方法来合并两个数组:
const merge = (a, b) => a.concat(b);
const merge = (a, b) => [. . a, . . b];
此方法用于确定数字是奇数还是偶数。
const isEven = num => num % 2 === 0;
isEven(996);
const average = (.. .args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5); // 3
此方法用于获取两个整数之间的随机整数。
const random = (min, max) => Math.floor(Math.random() * (max — min + 1) + min);
random(1, 50);
此方法可用于将数字四舍五入到指定的数字。
const round = (n, d) => Number(Math.round(n + “e” + d) + “e-” + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56
此方法可以将 RGB 颜色值转换为十六进制值。
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(255, 255, 255); // '#ffffff'
此方法用于获取随机的十六进制颜色值。
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
randomHex();
此方法使用 navigator.clipboard.writeText 将文本复制到剪贴板。
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");
该方法使用 document.cookie 访问 cookie 并清除网页上存储的所有 cookie。
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
该方法通过内置的 getSelection 属性获取用户选择的文本。
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
该方法用于检测当前环境是否处于暗模式,它是一个布尔值。
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)
此方法用于返回页面顶部。
const goToTop = () => window.scrollTo(0, 0);
goToTop();
此方法用于检查当前选项卡是否处于活动状态。
const isTabInView = () => !document.hidden;
此方法用于检查当前设备是否为 Apple 设备。
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
isAppleDevice();
该方法用于判断页面是否在底部。
const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
此方法用于重定向到新 URL。
const redirect = url => location.href = url
redirect("https://www.google.com/")
该方法用于打开浏览器的打印框。
const showPrintDialog = () => window.print()
有时可能会出现需要生成随机字符串的情况,请使用此代码片段来获取它。
const randomstr = Math.random().toString(36).substring(7)
由于在对浮点进行字符串化时会删除尾随零,因此它将生成 0 到 6 个字符之间的任何字符。
反转字符串从未如此简单,首先我们将其转换为数组(字符数组),现在我们反转该数组,然后将该数组转换为字符串。
使用这个单线来实现这一点:
const rev = (str) => str.split("").reverse().join("")
此方法返回一个随机布尔值。使用 Math.random(),你可以得到一个 0-1 的随机数,并将它与 0.5 进行比较,有一半的概率得到一个真值或假值。
const randomBoolean = () => Math.random() >= 0.5;
randomBoolean();
可以使用以下形式交换两个变量的值,而无需应用第三个变量。
[foo, bar] = [bar, foo];
该方法用于获取变量的类型。
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
此方法用于在摄氏度和华氏度之间进行转换。
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
35.检测对象是否为空
该方法用于检测 JavaScript 对象是否为空。
const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
36.打乱数组,返回一个数组可以使用数学模块的随机方法对数组进行洗牌。
const shuffle = array => array.sort(() => 0.5-Math.random());
//output
shuffle([1,5,2,45])
[5,2,1,25]
Math.random() 返回一个介于 0 和 1 之间的随机数。因此,如果它恰好给你一个小于 0.5 的数字,那么,你会得到一个负数,如果超过了,那么你会得到一个正数。
在此比较函数中选择 0.5 的原因是,如果从 0 和 1 的每个端点中减去 0.5,则会得到 -0.5 和 +0.5 的新范围,但不包括 +0.5,因为不包括原始 1 在 Math.random() 函数的结果中。
因此,当从这个范围返回一个随机数时,它是正数或负数的可能性几乎相等,有时它也会为零。
在某些情况下,我们可能希望在激活暗模式时做一些额外的事情,使用这段代码来检查暗模式是打开还是关闭。
const isDark = window.matchMedia && window.matchMedia(`(prefers-color-scheme:dark)`).match
下面的代码是在不使用第三个变量且仅使用一行代码的情况下交换两个变量的更简单方法之一。
[var1, var2] = [var2, var1];
关于JavaScript的单行代码技巧,我们在前面也分享过一些,但是,没有今天齐全,今天分享的这些代码,基本都是我们日常开发中会使用到的一些单行代码。
希望你能从今天的内容中,学习到一些新的内容,帮助你提升开发效率。
一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间
良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。
减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!
Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。
程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。
函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程
朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构
页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮
软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!