「干货」日常js工具函数整理

桃扇骨 2021-09-07 06:03 299阅读 0赞

## 防抖方法 ##

/** * 防抖 * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */
    let timeout;
    export default function Debounce(func, wait = 3000, immediate = true) { 
      // 清除定时器
      if (timeout !== null) clearTimeout(timeout);
      // 立即执行，此类情况一般用不到
      if (immediate) { 
        var callNow = !timeout;
        timeout = setTimeout(function() { 
          timeout = null;
        }, wait);
        if (callNow) typeof func === 'function' && func();
      } else { 
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(function() { 
          typeof func === 'function' && func();
        }, wait);
      }
    }

Debounce(()=>{ 
    	console.log(1);
    });

## 函数只执行一次 ##

## 构造函数回调方法 ##

## 用 apply 将数组各项添加到另一个数组 ##

var array = ['a', 'b'];
    var elements = [0, 1, 2];
    array.push.apply(array, elements);
    console.info(array); // ["a", "b", 0, 1, 2]

## 微信JS-SDK 调用 ##

import wx from 'weixin-js-sdk' //引入微信js-sdk
    import {  getWXSignature } from '../request/api'
    const custom = function(url, jsApiList) { 
      return getWXConfig(url, jsApiList)
    }
    function getWXConfig(url, jsApiList) { 
      getWXSignature({  url })
        .then(res => { 
          let {  appId, timestamp, noncestr, signature } = res.data
          console.log(appId, timestamp, noncestr, signature, jsApiList, url)
          wx.config({ 
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: noncestr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名
            jsApiList: jsApiList, // 必填，需要使用的JS接口列表
          })
          wx.error(function(res) { 
            console.log('wxerr', res)
          })
        })
        .catch(err => { 
          console.log(err)
        })
    }
    export default custom
    
    // ***
    getWeiXinConfig() { 
          let url = window.location.href
          // let url = encodeURIComponent(location.href.split('#')[0])
          this.$getWXConfig(url, ['scanQRCode'])
    }
    //微信扫一扫
    wxSweep() { 
          wx.scanQRCode({ 
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ['barCode'], //'qrCode', 可以指定扫二维码还是一维码，默认二者都有
            success: function(res) { 
              var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
              console.log(result)
              if (this.type === 1) { 
                //位置上传
                this.$router.push({ 
                  path: '/updateLocation',
                  query: { 
                    projectId: this.projectId,
                    type: 1,
                    mac: result,
                  },
                })
              } else if (this.type === 2) { 
                //模块更换
                this.$router.push({ 
                  path: '/changeModule',
                  query: { 
                    projectId: this.projectId,
                    type: 1,
                    mac: result,
                  },
                })
              } else { 
                //开关更换
                this.$router.push({ 
                  path: '/changeSwitch',
                  query: { 
                    projectId: this.projectId,
                    type: 1,
                    mac: result,
                  },
                })
              }
            },
          })
        },

## js 递归数组降维 ##

## js 数组降维(二维降一维) ##

## File对象 转 base64 ##

inputImage(e) { 
          let img = e.target.files[0];
          if (img) { 
            this.blobToDataURL(img);
          }
        },
        blobToDataURL(blob) { 
          let reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = function(evt) { 
            let base64 = evt.target.result;
            console.log(base64);
          };
        },

## Vue3 ##

## 递归寻找操作（已删除指定项为例） ##

// 递归寻找
        recursion(data, id) { 
          let result;
          if (!data) { 
            return;
          }
          for (let i = 0; i < data.length; i++) { 
            let item = data[i];
            if (item.breakerId === id) { 
              result = item;
              data.splice(i, 1);
              break;
            } else if (item.childrenBranch && item.childrenBranch.length > 0) { 
              result = this.recursion(item.childrenBranch, id);
              if (result) { 
                return result;
              }
            }
          }
    
          return result;
        },

## 递归数组，将数组为空设为undefined ##

## 数组对象中相同属性值的个数 ##

group(arr) { 
          var obj = { };
          if (Array.isArray(arr)) { 
            for (var i = 0; i < arr.length; ++i) { 
              var isNew = arr[i].isNew;
              if (isNew in obj) obj[isNew].push(arr[i]);
              else obj[isNew] = [arr[i]];
            }
          }
          return obj;
        },
        max(obj) { 
          var ret = 0;
          if (obj && typeof obj === "object") { 
            for (var key in obj) { 
              var length = obj[key].length;
              if (length > ret) ret = length;
            }
          }
          return ret;
        },
    var data = [
    	{ 
    	 addr: "1",
    	 isNew: false,
    	},
    	{ 
    	 addr: "2",
    	 isNew: false,
    	}
    ]
    max(group(data) // 2

## 检测版本是vue3 ##

import {  h } from 'vue';
    const isVue3 = typeof h === 'function';
    console.log(isVue3)

## 检测数据对象中是否有空对象 ##

let arr = [{ },{ name:'1'}]
    const arr = this.bannerList.filter(item =>
           item == null || item == '' || JSON.stringify(item) == '{}'
    );
     console.log(arr.length > 0 ? '不通过' : '通过')

## 深拷贝 ##

/* @param {*} obj * @param {Array<Object>} cache * @return {*} */
    function deepCopy (obj, cache = []) { 
      // just return if obj is immutable value
      if (obj === null || typeof obj !== 'object') { 
        return obj
      }
    
      // if obj is hit, it is in circular structure
      const hit = find(cache, c => c.original === obj)
      if (hit) { 
        return hit.copy
      }
    
      const copy = Array.isArray(obj) ? [] : { }
      // put the copy into cache at first
      // because we want to refer it in recursive deepCopy
      cache.push({ 
        original: obj,
        copy
      })
    
      Object.keys(obj).forEach(key => { 
        copy[key] = deepCopy(obj[key], cache)
      })
    
      return copy
    }
    
    const objs = { 
    	name:'maomin',
    	age:'17'
    }
    
    console.log(deepCopy(objs));

## h5文字转语音 ##

speech(txt){ 
    	var synth = null;
    	var msg = null;
    	synth = window.speechSynthesis;
    	msg = new SpeechSynthesisUtterance();
    	msg.text = txt;
    	msg.lang = "zh-CN";
    	synth.speak(msg);
    	if(window.speechSynthesis.speaking){ 
    	  console.log("音效有效");
    	 } else { 
    	 console.log("音效失效");
    	 }
     }

## 模糊搜索 ##

recursion(data, name) { 
                let result;
                if (!data) { 
                    return;
                }
                for (var i = 0; i < data.length; i++) { 
                    let item = data[i];
                    if (item.name.toLowerCase().indexOf(name) > -1) { 
                        result = item;
                        break;
                    } else if (item.children && item.children.length > 0) { 
                        result = this.recursion(item.children, name);
                        if (result) { 
                            return result;
                        }
                    }
                }
                return result;
            },
            onSearch(v) { 
                if (v) { 
                    if (!this.recursion(this.subtable, v)) { 
                        this.$message({ 
                            type: 'error',
                            message: '搜索不到',
                        });
                    } else { 
                        this.tableData = [this.recursion(this.subtable, v)];
                    }
                }
            },

## input 数字类型 ##

<el-input
                            v-model.number="form.redVal"
                            type="number"
                            @keydown.native="channelInputLimit"
                            placeholder="请输入阈值设定"
                            maxlength="8"
         ></el-input>
    
            channelInputLimit(e) { 
                let key = e.key;
                // 不允许输入‘e‘和‘.‘
                if (key === 'e' || key === '.') { 
                    e.returnValue = false;
                    return false;
                }
                return true;
            },

## 排序（交换位置） ##

const list = [1,2,3,4,5,6];
        function useChangeSort (arr,oldIndex,newIndex){ 
        	const targetRow = arr.splice(oldIndex, 1)[0];
        	const targetRow1 = arr.splice(newIndex, 1)[0];
            arr.splice(newIndex, 0, targetRow);
            arr.splice(oldIndex, 0, targetRow1);
            return arr
        }
        console.log(useChangeSort(list,5,0)); // [6, 2, 3, 4, 5, 1]

## 格式化时间 ##

/** * Parse the time to string * @param {(Object|string|number)} time * @param {string} cFormat * @returns {string | null} */
    export function parseTime(time, cFormat) { 
        if (arguments.length === 0 || !time) { 
            return null;
        }
        const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
        let date;
        if (typeof time === 'object') { 
            date = time;
        } else { 
            if (typeof time === 'string') { 
                if (/^[0-9]+$/.test(time)) { 
                    // support "1548221490638"
                    time = parseInt(time);
                } else { 
                    // support safari
                    // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
                    time = time.replace(new RegExp(/-/gm), '/');
                }
            }
    
            if (typeof time === 'number' && time.toString().length === 10) { 
                time = time * 1000;
            }
            date = new Date(time);
        }
        const formatObj = { 
            y: date.getFullYear(),
            m: date.getMonth() + 1,
            d: date.getDate(),
            h: date.getHours(),
            i: date.getMinutes(),
            s: date.getSeconds(),
            a: date.getDay()
        };
        const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { 
            const value = formatObj[key];
            // Note: getDay() returns 0 on Sunday
            if (key === 'a') { 
                return ['日', '一', '二', '三', '四', '五', '六'][value];
            }
            return value.toString().padStart(2, '0');
        });
        return time_str;
    }

> 不断更新…

>  *  欢迎关注我的公众号`前端历劫之路`
>  *  我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入。  
>