其他分享
首页 > 其他分享> > 20个实用的js小技巧

20个实用的js小技巧

作者:互联网

 // 1  滚动到页面顶部   window.scrollTo() 平滑滚动到页面顶部
      const scrollToTop = () => {
        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
      }
      //  2  滚动到页面底部  如果知道页面的高度,也可以平滑滚动到页面底部
      const scorllToBottom = () => {
        window.scrollTo({
          top: document.documentElement.offsetHeight,
          left: 0,
          behavior: 'smooth'
        })
      }
      // 3 滚动元素到可见区域     将元素滚动到可见区域   scrollIntoView 就足够了
      const smoothScroll = (element) => {
        element.scrollIntoView({
          behavior: 'smooth'
        })
      }
      //  4 全屏显示元素  全屏播放视频,并在浏览器中全屏打开页面。
      const goToFullScreen = (elements) => {
        elements = elements || document.body
        if (elements.requestFullscreen) {
          elements.requestFullscreen()
        } else if (elements.mozRequestFullScreen) {
          elements.mozRequestFullScreen()
        } else if (elements.msRequestFullscreen) {
          elements.msRequestFullscreen()
        } else if (elements.webkitRequestFullscreen) {
          elements.webkitRequestFullscreen()
        }
      }
      //  5 退出浏览器全屏状态 和第四点一起使用。
      const goExitFullscreen = () => {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        }
      }
      //  6 获取数据类型  如何通过函数获取变量的数据类型
      const getType = (value) => {
        const match = Object.prototype.toString.call(value).match(/(\w+)]/)
        return match[1].toLocaleLowerCase()
      }
      getType()// undefined
      getType({}) // object
      getType([]) // array
      getType(1) // number
      getType('fatfish') // string
      getType(true) // boolean
      getType(/fatfish/) // regexp正则表达式

      //  7 停止冒泡事件  一种适用于所有平台的防止事件冒泡的方法
      const stopPropagation = (event) => {
        event = event || window.event
        if (event.stopPropagation) {
          event.stopPropagation()
        } else {
          event.cancelBubble = true
        }
      }
      //  8 深拷贝一个对象  复制深度嵌套的对象
      const deepCopy = (obj, hash = new WeakMap()) => {
        if (obj instanceof Date) {
          return new RegExp(obj)
        }
        if (hash.has(obj)) {
          return hash.get(obj)
        }
        let allDesc = Object.getOwnPropertyDescriptors(obj)
        let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc)
        hash.set(obj, cloneObj)
        for (let key of Reflect.ownKeys(obj)) {
          if (obj[key] && typeof obj[key] === 'object') {
            cloneObj[key] = deepCopy(obj[key], hash)
          } else {
            cloneObj[key] = obj[key]
          }
        }
        return cloneObj
      }
      //  9 确定设备类型  我们经常必须这样做才能在手机上显示 A 逻辑,在 PC 上显示 B 逻辑。基本上,设备类型是通过识别浏览器的 userAgent 来确定的。
      const isMobile = () => {
        return !!navigator.userAgent.match(
          /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
        )
      }
      //  10 判断设备是安卓还是IOS  除了区分是移动端还是PC端,很多时候我们还需要区分当前设备是Android还是IOS。
      const isAndroid = () => {
        return /android/i.test(navigator.userAgent.toLowerCase())
      }
      const isIOS = () => {
        let reg = /iPhone|iPad|iPod|iOS|Macintosh/i
        return reg.test(navigator.userAgent.toLowerCase())
      }
      // 11 获取浏览器类型及其版本   兼容性问题
      const getExplorerInfo = () => {
        let t = navigator.userAgent.toLowerCase()
        return 0 <= t.indexOf('msie') ? {
          //  ie<11
          type: 'IE',
          version: Number(t.match(/msie([\d]+)/)[1])
        } : !!t.match(/trident\/.+?rv:(([\d.]+))/) ? {
          //  ie 11
          type: 'IE',
          version: 11
        } : 0 <= t.indexOf('edge')
          ? {
            type: 'Edge',
            version: Number(t.match(/edge\/([\d]+)/)[1])
          } : 0 <= t.indexOf('firefox')
            ? {
              type: 'Firefox',
              version: Number(t.match(/firefox\/([\d]+)/)[1])
            }
            : 0 <= t.indexOf('chrome')
              ? {
                type: 'Chrome',
                version: Number(t.match(/chrome\/([\d]+)/)[1])
              }
              : 0 <= t.indexOf('opera')
                ? {
                  type: 'opera',
                  version: Number(t.match(/opera\/([\d]+)/)[1])
                }
                : 0 <= t.indexOf(Safari)
                  ? {
                    type: 'Safari',
                    version: Number(t.match(/version\/([\d]+)/)[1])
                  }
                  : {
                    type: t,
                    version: -1
                  }
      }
      // 12 设置cookies  cookies是糟糕的API,重新安装提高开发效率
      const setCookie = (key, value, expire) => {
        const d = new Date()
        d.setDate(d.getDate() + expire)
        document.cookie = `${key}=${value};expries=${d.toUTCString()}`
      }
      //  13 读取cookie
      const getCookie = (key) => {
        const cookieStr = unescape(document.cookie)
        const arr = cookieStr.split(';')
        let cookieValue = ''
        for (let i = 0; i < arr.length; i++) {
          const temp = arr[i].split('=')
          if (temp[0] === key) {
            cookieValue = temp[1]
            break
          }
        }
        return cookieValue
      }
      //  14 删除cookies      将过期时间设置为这一刻,它就会立即过期
      const delCookiie = (keys) => {
        document.cookie = `${encodeURIComponent(keys)}=;expires=${new Date()}`
      }
      //  15 生成随机字符串
      const randomString = (len) => {
        let charts = 'ABCDEFGHIJKLMNOPPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789'
        let strLen = charts.length
        let randomStr = ''
        for (let i = 0; i < len; i++) {
          randomStr = randomStr + charts.charAt(Math.floor(Math.random() * strLen))
        }
        return randomStr
      }
      //  16  字符串首字母大写
      const fistLetterUpper = (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
      }
      fistLetterUpper('fatfish') // Fatfish

      //  17 生成指定范围内的随机数
      const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min

      randomNum(1, 10)// 6
      randomNum(10, 20)// 11

      //  18 打乱数组的顺序  打乱数组的原始顺序
      const shuffleArray = (array) => {
        return array.sort(() => 0.5 - Math.random())
      }
      let arras = [1, -1, 10, 5]
      shuffleArray(arras)// 数组顺序随机
      shuffleArray(arras)//

      //  19 从数组中获取随机值
      const getRandomValue = arrays[Math.floor(Math.random() * arrays.length)]
      const prizes = ['$100', '可乐', '

标签:document,const,return,20,实用,elements,let,obj,js
来源: https://www.cnblogs.com/reverse-x/p/16645484.html