[[403909]]

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; 
    }, 

遞歸數組，將數組為空設為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; 
     } 

數組對象中相同屬性值的個數

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

本文轉載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關注。轉載本文請聯系前端歷劫之路公眾號。