你可能會用到的JS工具函數(shù)（第二期）

Vue3在script標簽中引入

    const oDiv = document.createElement('div');
    const oScript = document.createElement('script');
    oDiv.setAttribute('id', 'app');
    oScript.type = 'text/javascript';
    oScript.src = "https://unpkg.com/vue@next";
    document.body.appendChild(oDiv);
    document.body.appendChild(oScript);


    window.onload = function () {
      const { createApp,ref } = Vue;
      const App = {
        template: `
            <div>{{msg}}</div>
            <p>{{count}}</p>
            `,
        data(){
              return {
                msg:'maomin'
              }
        },
        setup(){
          let count = ref(0);

          return {
            count
          }
        }
    }
     createApp(App).mount('#app');
    }

遞歸尋找操作（已刪除指定項為例）

    // 遞歸尋找
    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;
    },

遞歸數(shù)組，將數(shù)組為空設為undefined

   function useTree(data) {
        for (let index = 0; index < data.length; index++) {
          const element = data[index];
          if (element.childrenBranch.length < 1) {
            element.childrenBranch = undefined;
          } else {
            useTree(element.childrenBranch);
          }
        }
        return data;
      }

數(shù)組對象中相同屬性值的個數(shù)

  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)

檢測數(shù)據對象中是否有空對象

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 數(shù)字類型

       <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}-go7utgvlrp {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;
}

不斷更新...

我創(chuàng)建了一個技術交流、文章分享群，群里有很多大廠的前端大佬，關注公眾號后，點擊下方菜單了解更多即可加我微信，期待你的加入。