分享18个常用的ECMAScript 6代码片段
最近在整理电脑的项目，总结了一些常见的小功能（获取URL、URL参数解析、Form表单数据解析等），特别的reduce方法的妙用。 1.如何批量隐藏指定的元素？ const hide = (...el) => [...el].forEach((e) => (e.style.display = "none")); // 调用示例 hide(document.querySelectorAll("img")); 2.如何检查元素是否具有指定的类？ const hasClass = (el, className) => el.classList.contains(className); // 调用示例 hasClass(document.querySelector("p.special"), "special"); // true 3.如何切换元素的样式类？ const toggleClass = (el, className) => el.classList.toggle(className); // 调用示例 toggleClass(document.querySelector("p.special"), "special"); 4.如何获取当前页面的滚动位置？ const getScrollPosition = (el = window) => ({ x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop, }); // 调用示例 getScrollPosition(); // {x: 0, y: 100} 5.如何平滑滚动到页面顶部？ const scrollToTop = () => { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, scrollTop - scrollTop / 8); } }; // 调用示例 scrollToTop(); 6.如何检查父元素是否包含子元素？ const elementContains = (parent, child) => parent !== child && parent.contains(child); // 调用示例 elementContains( document.querySelector("head"), document.querySelector("title") ); // true elementContains(document.querySelector("body"), document.querySelector("body")); // false 7.如何检查指定的元素在视窗中是否可见？ const elementIsVisibleInViewport = (el, partiallyVisible = false) => { const { top, left, bottom, right } = el.getBoundingClientRect(); const { innerHeight, innerWidth } = window; return partiallyVisible ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; }; // 调用示例 elementIsVisibleInViewport(el); // 不完全可见 elementIsVisibleInViewport(el, true); // 部分可见 8.如何获取元素中的所有图像？ const getImages = (el, includeDuplicates = false) => { const images = [...el.getElementsByTagName("img")].map((img) => img.getAttribute("src") ); return includeDuplicates ? images : [...new Set(images)]; }; // 调用示例 getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...'] getImages(document, false); // ['image1.jpg', 'image2.png', '...'] 9.如何确定该设备是移动设备还是桌面端？ const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? "Mobile" : "Desktop"; // 调用示例 detectDeviceType(); // "移动端" or "桌面" 10.如何获取当前URL？ const currentURL = () => window.location.href; // 调用示例 currentURL(); 11.将URL参数解析为对象？ const getURLParameters = (url) => (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce( (a, v) => ( (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a ), {} ); // 调用示例 getURLParameters("http://url.com/page?n=DevPoint&s=Shenzhen"); // {n: 'DevPoint', s: 'Shenzhen'} getURLParameters("baidu.com"); // {} 12.如何将Form表单数据转为对象? const formToObject = (form) => Array.from(new FormData(form)).reduce( (account, [key, value]) => ({ ...account, [key]: value, }), {} ); // 调用示例 formToObject(document.querySelector("#form")); // { city: 'Shenzhen', name: 'DevPoint' } 13.延迟执行函数（毫秒）? const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args); delay( (text) => { console.log(text); }, 1000, "later" ); 14.如何删除DOM事件？ const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts); const fn = () => console.log("!"); document.body.addEventListener("click", fn); off(document.body, "click", fn); 15.如何将时间戳转为直观的时间格式？ const formatDuration = (ms) => { if (ms < 0) ms = -ms; const time = { day: Math.floor(ms / 86400000), hour: Math.floor(ms / 3600000) % 24, minute: Math.floor(ms / 60000) % 60, second: Math.floor(ms / 1000) % 60, millisecond: Math.floor(ms) % 1000, }; const timeZh = { day: "天", hour: "小时", minute: "分钟", second: "秒", millisecond: "毫秒", }; return Object.entries(time) .filter((val) => val[1] !== 0) .map(([key, val]) => `${val} ${timeZh[key]}`) .join("，"); }; // 调用示例 formatDuration(1001); // 1 秒，1 毫秒 formatDuration(34325055574); // 397 天，6 小时，44 分钟，15 秒，574 毫秒 16.如何获得两个日期的时间差？ const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); // 调用示例，以天计算 getDaysDiffBetweenDates(new Date("2021-03-20"), new Date("2021-04-03")); // 14 17.如何将字符串复制到剪贴板？ const copyToClipboard = (str) => { const el = document.createElement("textarea"); el.value = str; el.setAttribute("readonly", ""); el.style.position = "absolute"; el.style.left = "-9999px"; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; el.select(); document.execCommand("copy"); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } }; // 调用示例 copyToClipboard("DevPoint"); // 'DevPoint' copied to clipboard. 18.如何创建一个计数器？ 指定一个DOM id，创建一个计数器，指定步长，结束数值，按照同样的频率计数。 const counter = (selector, start, end, step = 1, duration = 2000) => { let current = start; const _step = (end - start) * step < 0 ? -step : step; const timer = setInterval(() => { current += _step; document.querySelector(selector).innerHTML = current; if (current >= end) document.querySelector(selector).innerHTML = end; if (current >= end) clearInterval(timer); }, Math.abs(Math.floor(duration / (end - start)))); return timer; }; // 调用示例 counter("#counter", 1, 1000, 5, 2000); // 创建一个计数器，从1开始，步长为5，计数到1000结束 完
