JavaScript必会的技巧（二）

1、滚动到页面顶部

使用 window。scrollT哦（） 滚动到页面顶部

const scrollToTop = ()=>{
    window.scrollTo({
        top :0,left:0,behavior:'smooth'
    });
};

2、滚动到页面底部

需要获取文档的高度

const scrollToBottom = ()=>{
    window.scrollTo({
        top:document.documentElement.offsetHeight,
        left:0,
        behavior:'smooth'
    })
}

3、滚动元素到可见区域

使用 Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView()的元素对用户可见。

const viewScroll = (element)=>{
    element.scrollIntoView({
        behavior:"smooth",
    })
}

4、全屏显示

下面给大家介绍JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍

Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

// 判断各种浏览器，找到正确的方法
function launchFullscreen(element) {
 if(element.requestFullscreen) {
  element.requestFullscreen();
 } else if(element.mozRequestFullScreen) { //兼容Firefox
  element.mozRequestFullScreen();
 } else if(element.webkitRequestFullscreen) { //兼容Chrome, Safari and Opera等
  element.webkitRequestFullscreen();
 } else if(element.msRequestFullscreen) {//兼容IE/Edge
  element.msRequestFullscreen();
 }
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

5、退出全屏

取消全屏模式：exitFullscreen()方法退出全屏模式

const exitFullscreen = () => {
        if(document.exitFullScreen) {
            document.exitFullScreen();
        } else if(document.mozCancelFullScreen) {//兼容Firefox
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {//兼容Chrome, Safari and Opera等
            document.webkitExitFullscreen();
        } else if(element.msExitFullscreen) {//兼容IE/Edge
            element.msExitFullscreen();
        }
}

6、获取数据类型

const getType = (data)=>{
    const m = Object.prototype.toString.call(data).match(/(\w+)]/);
    console.log(m)
    return m[1].toLocaleLowerCase()
}
getType()
getType({})  //['Object]', 'Object', index: 8, input: '[object Object]', groups: undefined]
getType([])  // ['Array]', 'Array', index: 8, input: '[object Array]', groups: undefined]
getType(123)
getType('abc')

7、停止事件冒泡

适应于所有平台

const stopPropagation = (event)=>{
    event = event || window.event;
    if(event.stopPropagation){
        event.stopPropagation()
    }else{
        event.stopPropagation = true;
    }
}

8、深拷贝对象

const deepCopy = (obj,hash = new WeakMap())=>{
    if(obj instanceof Date){
        return new Date(obj)
    }
    if(obj instanceof RegExp){
        return new RegExp(obj)
    }
    if(hash.has(obj)){
        return hash.get(obj)
    };
    //获取对象的描述信息
    const getOPDesc = Object.getOwnPropertyDescriptors(obj);
    
    const deepCloneObj = Object.create(Object.getPrototypeOf(obj,getOPDesc));
    hash.set(obj,deepCloneObj);
    for(let key of Reflect.ownKeys(obj)){
        if(obj[key] && typeof obj[key] === 'object'){
            deepCloneObj[key] = deepCopy(obj[key],hash)
        }else {
            deepCloneObj[key] = obj[key];
        }
    }
    return deepCloneObj;
}

const user = {
     id: 101,
     email: 'jack@dev.com',
     personalInfo: {
       name: 'Jack',
       address: {
         line1: 'westwish st',
         line2: 'washmasher',
         city: 'wallas',
         state: 'WX'
       }
     }
}
deepCopy(user)

9、设置cookies

自己封装cookies，提高开发效率

const setCookie = (ket,value,expire)=>{
    const d = new Date();
    d.setDate(d.getDate()+expire)
    document.cookie = `${key} = ${value},expires = ${d.toUTCString()}`
}

10、获取cookies

const getCookie = (key){
	const strCookies = unescape(document.cookie);
    let arr = strCookies.split(';');
    let cookieValue = '';
    for(let i = 0;i < arr.length;i++){
        const tem = arr[i].split('=');
        if(tem[0] === key){
            cookieValue = tem[1];
            break;
        }
    }
    return cookieValue
}

11、删除cookie

删除cookie的想法是？ 就是说，将此cookie的过期时间设置为此刻，那么这个cookie就过期了（相当于删除了）

const deleteCookie = (key)=>{
    document.cookie = `${encodeURIComponent(key)} = ; expires = ${new Date()}`
}

12、生成指定范围的随机数

const randomNum = (min,max) =>{
   return Math.floor(Math.random() * (max - min + 1) + min);
}
randomNum(5,15)

13、打乱数组顺序

const crashArray = (arr)=>{
    return arr.sort(()=> 0.5 - Math.random())
}
const arr = [1,2,3,4,5]
crashArray(arr)