分享18个常用的ECMAScript 6代码片段

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)];

};www.hk-ipad.com

// 调用示例

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结束

完