首页 > 其他分享 >日常js方法记录

日常js方法记录

时间:2023-03-11 14:34:02浏览次数:43  
标签:obj name 记录 return js content 日常 const else

当前浏览器名称

 function getExplorer() {  
              const ua = window.navigator.userAgent    
              const isExplorer = (exp) => {      return ua.indexOf(exp) > -1    }    
              if (isExplorer('MSIE')) return 'IE'    
              else if (isExplorer('Firefox')) return 'Firefox'    
              else if (isExplorer('Chrome')) return 'Chrome'    
              else if (isExplorer('Opera')) return 'Opera'    
              else if (isExplorer('Safari')) return 'Safari'  
            } 
             const arr = getExplorer()  
            console.log(arr) //Chrome

Object是否相同

/**      *
           *  @param {*} obj1 对象   * 
           * @param {*} obj2 对象   * 
           * @description 判断两个对象是否相等,这两个对象的值只能是数字或字符串   
           * */  
          function objEqual(obj1, obj2) {    
            const keysArr1 = Object.keys(obj1)    
            const keysArr2 = Object.keys(obj2)    
            if (keysArr1.length !== keysArr2.length) return false    
            else if (keysArr1.length === 0 && keysArr2.length === 0) return true    
            else return !keysArr1.some((key) => obj1[key] != obj2[key])  
        }

localStore的常用方法

// 存储localStorage 
        setStore = (params) => {
            let name = params.name,
                content = params.content,
                type = params.type,
                datetime = params.datetime
            name = `${process.env.VUE_APP_NAME}-${name}`
            const obj = {
                dataType: typeof content,
                content: content,
                datetime: new Date().getTime(),
            }
            if (type) obj.type = type
            try {
                if (type) {
                    window.sessionStorage.setItem(name, JSON.stringify(obj))
                } else {        // 
                    localforage.setItem(name, JSON.stringify(obj))
                    store.set(name, JSON.stringify(obj))
                }
            } catch (e) { console.log(e) }
        }
        // 获取localStorage  
        getStore = (params) => {
            let { name, type } = params
            let obj = {}
            let content
            name = `${process.env.VUE_APP_NAME}-${name}`
            obj = store.get(name)
            if (validatenull(obj))
                obj = window.sessionStorage.getItem(name)
            if (validatenull(obj)) return
            obj = obj ? JSON.parse(obj) : {}
            if (obj.dataType === 'string') {
                content = obj.content
            } else if (obj.dataType === 'number') {
                content = Number(obj.content)
            } else if (obj.dataType === 'boolean') {
                content = eval(obj.content)
            } else if (obj.dataType === 'object') {
                content = obj.content
            } return content
        }
        // 删除localStorage 
        removeStore = (name) => {
            name = `${process.env.VUE_APP_NAME}-${name}`
            store.remove(name)
            window.sessionStorage.removeItem(name)
        }

生成随机颜色

//随机颜色
        const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`

        console.log(generateRandomHexColor())

数组重排序

重排序是有问题的,因为sort快排的原因导致并不是每一个元素都是被交换的,所以不是完全公平的重排。

建议使用洗牌算法。

const shuffle = (arr) => arr.sort(() => Math.random() - 0.5)

const arr = [1, 2, 3, 4, 5]
console.log(shuffle(arr))//[3,2,4,5,1]

复制到剪贴板

const copyToClipboard = (text) => navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(text)

copyToClipboard("Hello World!")

滚动到顶部

将元素滚动到顶部最简单的方法是使用 scrollIntoView。设置 block 为 start 可以滚动到顶部;设置 behavior 为 smooth 可以开启平滑滚动。

const scrollToTop = (element) => 
  element.scrollIntoView({ behavior: "smooth", block: "start" });

滚动到底部

与滚动到顶部一样,滚动到底部只需要设置 block 为 end 即可。

const scrollToBottom = (element) => 
  element.scrollIntoView({ behavior: "smooth", block: "end" });

检测元素是否在屏幕中

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` is the dom element
      console.log(`${entry.target.id} is visible`);
    }
  });
};

const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);

检测设备

使用 navigator.userAgent 来检测网站运行在哪种平台设备上。

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  ) ? "Mobile" : "Desktop";

console.log(detectDeviceType());

隐藏元素

我们可以将元素的 style.visibility 设置为 hidden,隐藏元素的可见性。

缺点是元素的空间仍然会被占用。

如果设置元素的 style.display 为 none,会将元素从渲染流中删除。

const hideElement = (el, removeFromFlow = false) => {
  removeFromFlow ? (el.style.display = 'none')
  : (el.style.visibility = 'hidden')
}

从URL中获取参数

再次敲黑板!!

JavaScript 中有一个 URL 对象,通过它可以非常方便的获取 URL 中的参数。

const getParamByUrl = (key) => {
  const url = new URL(location.href)
  return url.searchParams.get(key)
}

深拷贝对象

深拷贝对象非常简单,先将对象转换为字符串,再转换成对象即可。

const deepCopy = obj => JSON.parse(JSON.stringify(obj))

除了利用 JSON 的 API,还有更新的深拷贝对象的 structuredClone API。

但要注意,并不是在所有的浏览器中都支持。

structuredClone(obj)
复制代码

PS:深拷贝遇到正则或者undefined是不会被拷贝的,JSON API 只能拷贝 Array 和 Object 这两种复合类型,其他的复合类型都会丢失。

省事的话建议使用 lodash 的cloneDeep 函数。


等待函数

疯狂敲黑板,重要高频知识点!!

JavaScript 提供了 setTimeout 函数,但是它并不返回 Promise 对象,所以我们没办法使用 async 作用在这个函数上,但是我们可以封装等待函数。

const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms))

const asyncFn = async () => {
  await wait(1000)
  console.log('等待异步函数执行结束')
}

asyncFn()

 

检测暗色主题

我们将页面主题切换成暗色主题,主要是为了提高用户体验。

const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

console.log(isDarkMode())// false

 



标签:obj,name,记录,return,js,content,日常,const,else
From: https://www.cnblogs.com/xiaobaizitaibai/p/17205989.html

相关文章

  • 把本地js文件生成本地可访问的url
    1、下载nginx压缩包2、解压3、进入文件夹nginx->conf->nginx.conf,查看第36行的端口号4、把自己本地的js文件放进文件夹nginx->html中5、拼接ip+端口号+js文件名即可访......
  • js判断是否是字符串 instanceof
    exportfunctionisString(str){if(typeofstr==="string"||strinstanceofString){returntrue}returnfalse}conststr=newString('hello'......
  • xlsx.full.min.js实现xlsx的导入与导出
    1.json转xlsx<htmllang="zh"><head><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script><scriptsrc="htt......
  • 【质因数分解算法详解】C/Java/Go/Python/JS/Dart/Swift/Rust等不同语言实现
    关于质因数分解算法的不同语言实现,通过实例来看不同语言的差异什么是质因数算法?即任意一个合数可以分解为多个质数相乘。例如:20=2*2*545=3*3*5210=2*......
  • 练习记录-cf-div2-A-D
    上课的时候抓紧时间写的,状态不好,c也没过,估计换个环境也很难想吧ALikes题意点赞,a<0表示取消赞a>0表示增加赞,a数组乱序输出如何排让赞数价值最多分别记录大于0和小......
  • python unittest 接口自动化遇到的问题记录
    1.ConfigParser类读取config.ini的options全部返回为小写字母查看configparser.ConfigParser类中,是因为optionxform方法返回了optionstr.lower()defoptionxform(self,......
  • TypeScript tsconfig.json declaration All In One
    TypeScripttsconfig.jsondeclarationAllInOne.d.tstsconfig.json{"compilerOptions":{"declaration":true,"declarationDir":"./types"}}......
  • webview注入js
    js中与webview通信functionsetStyle(){console.log('1111')returnfunction(){console.log('2222')try{console.log('3333')//隐藏图......
  • WebApi问题与跨域和返回json
    1、编写接口时,发现访问不到指定接口注释掉[Authorize]特性给方法设置访问方式,已经指定路由方法如下2、出现一下跨域问题在web.config里面配置2、返回类型指定接口......
  • Linux 安装 Wiki.js
    一、概要1.环境(1)CentOS7.92009(2)Node.js16(3)Wiki.js2.5.2972.概念Wiki.js是一个开源的知识管理系统,它是一款使用JS编写的Node.js项目,它的文档类型支持M......