11个常见ES6代码使用

1. 隐藏所有元素

<div>
    <img src="user.jpg">
    <img src="user.jpg">
    <img src="user.jpg">
    <img src="user.jpg">
    <img src="user.jpg">
    <img src="user.jpg">
</div>

使用了 三个点称为扩展运算符，简单理解就是用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。

// 隐藏所有指定元素
const hideEl = (el)=>[...el].forEach(e=>e.style.display = "none")
hideEl(document.querySelectorAll('img'))

2. 确定元素具有指定的类

<div>
    <p class="special">测试指定类</p>
</div>

contains是js中原生的方法 并不是判断字符串，仅用于判断DOM元素的包含关系，参数是Element类型。

// 如何确定元素是否具有指定的类
const hasClass = (el,className) => el.classList.contains(className);
console.log(hasClass(document.querySelector("p"),"special"))；//true
// hasClass(document.querySelector("p"),"special");

3. 获取当前元素的滚动位置

<div style="height: 1920px;width: 2980px">
    <p>获取当前页面的滚动位置</p>
</div>

pageXOffset和pageYOffset属性返回文档在窗口左上角水平和垂直方向滚动的像素。

// 获取当前页面的滚动位置
const getScrollPosition = (el = window) => ({
    x:el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
    y:el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
})
console.log(getScrollPosition())

4. 确认父元素是否包含子元素

// 确认父元素是否包含子元素
const elementContains = (parent, child) => parent !== child && parent.contains(child);
const isTitle = elementContains(document.querySelector("head"),document.querySelector("title"));
const isBody = elementContains(document.querySelector("body"),document.querySelector("body"));
console.log(isTitle,isBody) // true false

5. 如何分辨设备是移动设备还是桌面设备

// 如何分辨设备是移动设备还是桌面设备
const deviceType = () => /Andriod|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "Mobile" : "Desktop";
console.log(deviceType())

6. 获取当前URL

// 获取当前URL
const currentURL = () => window.location.href;
console.log(currentURL());

7. 创建一个包含当前URL参数的对象

reduce方法接收一个函数作为累加器，数组中的每个值从左到右开始缩减，最终计算为一个值，对于空数组是不会执行回调函数的。
slice 从已有的数组中返回选定的元素，不会修改数组

// 创建一个包含当前URL参数的对象
const getURLParam = url => (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce((a,v) => ((a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=")+1)),a),{});
console.log(getURLParam("http://url.com/page?user=admin&name=join")) // {user:"admin",name:"join"}

8. 在等待一定时间后调用提供的函数

// 在等待一定时间后调用提供的函数
const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args)
delay(text=>{
    console.log(text)
},1000,"later");// 一秒后 later

9. 在给定元素上触发特定事件，且可传递自定义数据

dispatchEvent给节点分派一个合成事件，调用该方法的节点将称为事件的目标节点，该事件在捕捉阶段中第一次沿着文档树向下传播，如果该事件的bubbles属性为 true，那么在事件的目标节点自身处理事件后，它将沿着文档树向上起泡。

// 在给定元素上触发特定事件，且可传递自定义数据
const triggerEvent = (el,eventType,detail) => el.dispatchEvent(new CustomEvent(eventType, {detail}));
triggerEvent(document.getElementById('myBox'),"click",{username:"join"})

10.获得给定毫秒数的可读格式

// 获得给定毫秒数的可读格式
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
    };
    return Object.entries(time).filter(val => val[1] !== 0).map(([key, val]) => `${val} ${key} ${val !==1 ? "s" : ""}`).join(",");
}
console.log(formatDuration(354578245451)); // 4103 day s,21 hour s,57 minute s,25 second s,451 millisecond 

11. 获取两个日期之间的天数间隔

// 获取两个日期之间的天数间隔
const getDayInterval = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
const data = getDayInterval(new Date("2020-12-13"), new Date("2020-12-31"));
console.log(data); // 18