• 一些封装好、使用度高的Api(JavaScript)


    数组去重(uniqueArr方法将数据转为Set,然后再解构为数组返回。)

    const uniqueArr = (arr) => [...new Set(arr)];
    
    console.log(uniqueArr(["前端","js","html","js","css","html"]));
    // ['前端', 'js', 'html', 'css']
    
    • 1
    • 2
    • 3
    • 4

    计算数组平均值

    计算平均值的方式很多,计算的逻辑都是一样的, 但是实现方式各不相同,一行代码简单实现:

    const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;
    average([1,9,18,36]) //16
    
    • 1
    • 2

    从url获取参数并转为对象

    网页路径经常是:www.baidu.com?search=js&xxx=kkk这种形式的,我们是经常需要取参数的,可以使用第三方的qs包实现,如果你只是要实现取参数,这一句代码就可以实现,不用再引入qs了。

    const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`
      )
    
    getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");
    // {q: 'js+md', newwindow: '1'}
    
    • 1
    • 2
    • 3
    • 4
    • 5

    检查对象是否为空

    检查对象是否为空,实际上并不那么简单,即使对象为空,每次检查对象是否等于 {} 也会返回 false。
    幸运的是,下面的单行代码正是我们想要的。

    const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
    isEmpty({}) // true
    isEmpty({a:"not empty"}) //false
    
    • 1
    • 2
    • 3

    反转字符串

    const reverse = str => str.split('').reverse().join('');
    reverse('this is reverse');
    // esrever si siht
    
    • 1
    • 2
    • 3

    生成随机十六进制(例如生成十六进制颜色值)

    const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
    console.log(randomHexColor());
    // #a2ce5b
    
    • 1
    • 2
    • 3

    检查当前选项卡是否在后台

    浏览器使用选项卡式浏览,任何网页都有可能在后台,此时对用户来说是没有在浏览的, 知道怎么快速检测到,你的网页对用户是隐藏还是可见吗?

    const isTabActive = () => !document.hidden; 
    isTabActive()
    // true|false
    
    • 1
    • 2
    • 3

    检测元素是否处于焦点

    activeElement 属性返回文档中当前获得焦点的元素。

    const elementIsInFocus = (el) => (el === document.activeElement);
    
    elementIsInFocus(anyElement)
    // 元素处于焦点返回true,反之返回false
    
    • 1
    • 2
    • 3
    • 4

    检查设备类型

    使用navigator.userAgent 判断是移动设备还是电脑设备:

    const judgeDeviceType =
          () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'PC';
    
    judgeDeviceType()  // PC | Mobile
    
    • 1
    • 2
    • 3
    • 4

    文字复制到剪贴板

    Clipboard API 它的所有操作都是异步的,返回 Promise 对象,不会造成页面卡顿。而且,它可以将任意内容(比如图片)放入剪贴板。

    const copyText = async (text) => await navigator.clipboard.writeText(text)
    copyText('单行代码 前端世界')
    
    • 1
    • 2

    获取选定的文本

    使用内置的 getSelection 获取用户选择的文本:

    const getSelectedText = () => window.getSelection().toString();
    getSelectedText();
    // 返回选中的内容
    
    • 1
    • 2
    • 3

    查询某天是否为工作日

    我们自己写日历组件时经常会用到,判断某个日期是否为工作日;周一至周五为工作日:

    const isWeekday = (date) => date.getDay() % 6 !== 0;
    
    isWeekday(new Date(2022, 03, 11))
    // true
    
    • 1
    • 2
    • 3
    • 4

    转换华氏/摄氏

    处理温度有时会晕头转向。这两个函数则能帮助大家将华氏温度转换为摄氏温度,以及将摄氏温度转换为华氏温度

    • 将华氏温度转换为摄氏温度
    const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
    fahrenheitToCelsius(50);
    // 10
    
    • 1
    • 2
    • 3
    • 将摄氏温度转华氏温度
    const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
    celsiusToFahrenheit(100)
    // 212
    
    • 1
    • 2
    • 3

    两日期之间相差的天数

    日常开发中经常遇到需要显示剩余天数, 一般我们就需要计算两日期之间相差天数:

    const dayDiff = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);
    
    dayDiff(new Date("2021-10-21"), new Date("2022-02-12"))
    // Result: 114
    
    • 1
    • 2
    • 3
    • 4

    将 RGB 转换为十六进制

    const rgbToHex = (r, g, b) =>   "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    
    rgbToHex(255, 255, 255); 
    //  #ffffff
    
    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    vue2 el-input-number 千分位显示的支持(不影响v-model的数值取值)
    【编码译码】基于matlab QC-LDPC码编码和译码【含Matlab译码 2194期】
    位运算(超详细)
    智慧路灯控制系统设计方案思路及设计原则
    vue2 通过vue.config.js实现跨域
    C# 使用Microsoft.Office.Interop.Excel库操作Excel
    设计模式-迭代器模式(Iterator)
    FSAF:嵌入anchor-free分支来指导acnhor-based算法训练 | CVPR2019
    git企业级使用
    EasyExcel 简单导入/导出 Controller Demo
  • 原文地址:https://blog.csdn.net/weixin_55846296/article/details/126361320