js arraybuffer转string_127个常用的JS代码片段,每段代码花30秒就能看懂(三)
发布日期:2021-06-24 17:21:33
浏览次数:2
分类:技术文章
本文共 4670 字,大约阅读时间需要 15 分钟。
大家好,我是老皮; 在前两篇文章里 127个常用的JS代码片段,每段代码花30秒就能看懂(一) 和 127个常用的JS代码片段,每段代码花30秒就能看懂(二) ,我分享了前42段代码,今天我继续分享第三部分,希望对你的日常工作有所帮助。
43、getColonTimeFromDate
此段代码从Date对象里获取当前时间。const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);getColonTimeFromDate(new Date()); // "08:38:00"
44、getDaysDiffBetweenDates
此段代码返回两个日期之间相差多少天const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2
45、getStyle
此代码返回DOM元素节点对应的属性值。const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];getStyle(document.querySelector('p'), 'font-size'); // '16px'
46、getType
此段代码的主要功能就是返回数据的类型。const getType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase(); getType(new Set([1, 2, 3])); // 'set'
47、hasClass
此段代码返回DOM元素是否包含指定的Class样式。const hasClass = (el, className) => el.classList.contains(className);hasClass(document.querySelector('p.special'), 'special'); // true
48、head
此段代码输出数组的第一个元素。const head = arr => arr[0];head([1, 2, 3]); // 1
49、hide
此段代码隐藏指定的DOM元素。const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));hide(document.querySelectorAll('img')); // Hides all elements on the page
50、httpsRedirect
此段代码的功能就是将http网址重定向https网址。const httpsRedirect = () => { if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);};httpsRedirect(); // If you are on http://mydomain.com, you are redirected to https://mydomain.com
51、indexOfAll
此代码可以返回数组中某个值对应的所有索引值,如果不包含该值,则返回一个空数组。const indexOfAll = (arr, val) => arr.reduce((acc, el, i) => (el === val ? [...acc, i] : acc), []);indexOfAll([1, 2, 3, 1, 2, 3], 1); // [0,3]indexOfAll([1, 2, 3], 4); // []
52、initial
此段代码返回数组中除最后一个元素的所有元素const initial = arr => arr.slice(0, -1);initial([1, 2, 3]); // [1,2]const initial = arr => arr.slice(0, -1);initial([1, 2, 3]); // [1,2]
53、insertAfter
此段代码的功能主要是在给定的DOM节点后插入新的节点内容const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);insertAfter(document.getElementById('myId'), '
after
'); //
...
after
54、insertBefore
此段代码的功能主要是在给定的DOM节点前插入新的节点内容const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);insertBefore(document.getElementById('myId'), '
before
'); //
before
...
55、intersection
此段代码返回两个数组元素之间的交集。const intersection = (a, b) => { const s = new Set(b); return a.filter(x => s.has(x));};intersection([1, 2, 3], [4, 3, 2]); // [2, 3]
56、intersectionBy
按照给定的函数处理需要对比的数组元素,然后根据处理后的数组,找出交集,最后从第一个数组中将对应的元素输出。const intersectionBy = (a, b, fn) => { const s = new Set(b.map(fn)); return a.filter(x => s.has(fn(x)));};intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [2.1]
57、intersectionBy
按照给定的函数对比两个数组的差异,然后找出交集,最后从第一个数组中将对应的元素输出。const intersectionWith = (a, b, comp) => a.filter(x => b.findIndex(y => comp(x, y)) !== -1);intersectionWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0, 3.9], (a, b) => Math.round(a) === Math.round(b)); // [1.5, 3, 0]
58、is
此段代码用于判断数据是否为指定的数据类型,如果是则返回true。const is = (type, val) => ![, null].includes(val) && val.constructor === type;is(Array, [1]); // trueis(ArrayBuffer, new ArrayBuffer()); // trueis(Map, new Map()); // trueis(RegExp, /./g); // trueis(Set, new Set()); // trueis(WeakMap, new WeakMap()); // trueis(WeakSet, new WeakSet()); // trueis(String, ''); // trueis(String, new String('')); // trueis(Number, 1); // trueis(Number, new Number(1)); // trueis(Boolean, true); // trueis(Boolean, new Boolean(true)); // true
59、isAfterDate
接收两个日期类型的参数,判断前者的日期是否晚于后者的日期。const isAfterDate = (dateA, dateB) => dateA > dateB;isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true
60、isAnagram
用于检测两个单词是否相似。const isAnagram = (str1, str2) => { const normalize = str => str .toLowerCase() .replace(/[^a-z0-9]/gi, '') .split('') .sort() .join(''); return normalize(str1) === normalize(str2);};isAnagram('iceman', 'cinema'); // true
61、isArrayLike
此段代码用于检测对象是否为类数组对象,是否可迭代。const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function';isArrayLike(document.querySelectorAll('.className')); // trueisArrayLike('abc'); // trueisArrayLike(null); // false
62、isBeforeDate
接收两个日期类型的参数,判断前者的日期是否早于后者的日期。const isBeforeDate = (dateA, dateB) => dateA < dateB;isBeforeDate(new Date(2010, 10, 20), new Date(2010, 10, 21)); // true
63、isBoolean
此段代码用于检查参数是否为布尔类型。const isBoolean = val => typeof val === 'boolean';isBoolean(null); // falseisBoolean(false); // true今天的内容就和大家分享到这里,感谢你的阅读,如果你喜欢我的分享,麻烦给个关注、点赞加转发哦,你的支持,就是我分享的动力,后续会持续分享剩余的代码片段,欢迎持续关注。
本文原作者:Fatos Morina 来源网站:medium 注:并非直译
转载地址:https://blog.csdn.net/weixin_34081553/article/details/112079191 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年04月16日 05时10分25秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
mac技巧|如何设定Mac 的睡眠和唤醒时间教程?
2019-04-28
运用到工作中的Mac OS 技巧分享~
2019-04-28
Mac新手必备小技巧:让你的MAC操作更顺手
2019-04-28
教你快速将系统偏好设置窗口添加到Mac Dock,快来学准没错!
2019-04-28
Ps Elements 2021使用教程:修复和增强照片
2019-04-28
mac电脑变成访客模式,快速恢复管理员方法分享~
2019-04-28
mac电脑运行速度变慢的十种解决方法
2019-04-28
苹果电脑新手必备:MacOS访达的隐藏小技巧
2019-04-28
解决Mac苹果电脑使用Safari浏览器时无法在地址栏搜索的方法
2019-04-28
Mac上设置共享的视频音乐或照片的教程
2019-04-28
为Mac任意命令设置快捷键,你可以这样做~
2019-04-28
幻灯片制作,你选好工具了吗?
2019-04-28
2020万圣节狂欢,想要拥有恐怖氛围,你选好邀请函和叠加素材了吗
2019-04-28
mac 隔空接力(HandOff)无法使用解决办法
2019-04-28
macOS Big Sur 11:快速入门的50个使用技巧
2019-04-28
一键改善照片「pixelmator pro」无需学习复杂知识
2019-04-28
如何在 iPhone 或 iPad 上使用“快捷指令”?
2019-04-28
VideoProc使用教程:在视频中添加效果,字幕,水印的方法
2019-04-28
如何将视频转换为GIF?
2019-04-28
6个潮流UI设计套件合集
2019-04-28