通用方法整理 · vue.js

[TOC] ### 1. 將時間戳轉換時間 ~~~ /** * @msg: 通過格林尼治時間戳格式化為標準日期（時間為null的也會轉換） * @param {Number} timestamp 時間戳 * @param {String} type 格式化類型可選參數'YMD'和'YMDhms' * @return: 標準格式日期 */ export const formatDateByGreenwich = (timestamp, type) => { let result = null const date = new Date(timestamp) const Y = `${date.getFullYear()}-` const M = `${date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1}-` const D = `${date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()} ` const h = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}:` const m = `${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}:` const s = `${date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()}` if (type === 'YMD') { result = Y + M + D } else { result = Y + M + D + h + m + s } return result } ~~~ ### 2. 將數組中的時間戳轉格式 ~~~ /** * @msg: 通過格林尼治時間戳將數組中指定字段格式化為標準日期(轉換數組中的時間，依賴formatDateByGreenwich 方法) * @param {Array} arr 要修改的原數組 * @param {Array} nameArr 要修改的字段名稱如：nameArr = ['createTime', 'lastTime'] * @param {String} type 格式化類型可選參數'YMD'和'YMDhms' * @return: 標準格式日期后的數組 */ export const formatArrDateByGreenwich = (arr, nameArr, type) => { arr.forEach(object => { nameArr.forEach(ele => { if (Object.prototype.hasOwnProperty.call(object, ele)) { const create = formatDateByGreenwich(object[ele], type) object[ele] = create } }) }) return arr } ~~~ ### 3.將字符串格式轉時間格式（# 時間轉化前臺將2020-07-17T03:07:02.000+0000轉化為2020-07-17 11:07:02傳參） ~~~ /** * 時間格式化，將時間格式轉成字符串 */ formateDate(datetime) { // let = "2019-11-06T16:00:00.000Z" function addDateZero(num) { return (num < 10 ? "0" + num : num); } let d = new Date(datetime); let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds()); return formatdatetime; }, ~~~ ### 3. 過濾樹結構中是否包含某字段 ~~~ /** * 過濾目錄樹中是否包含指定名稱 * @param {arrTree} 被操作的樹 * @param {newName} 比較的字段 * @return:{Boole} */ export const filterTree = (arrTree, newName) => { let flag = false arrTree.children && arrTree.children.some(item => { if (item.name === newName || newName === '全部') { flag = true } filterTree(item, newName) }) return flag } some() 方法用于檢測數組中的元素是否滿足指定條件（函數提供）。 some() 方法會依次執行數組的每個元素： * 如果有一個元素滿足條件，則表達式返回*true*, 剩余的元素不會再執行檢測。 * 如果沒有滿足條件的元素，則返回false。注意：some() 不會對空數組進行檢測。注意：some() 不會改變原始數組。 ~~~ ### 4. 對象數組去重 ~~~ /** * 數組去重 * @param {Array} [需要排序的數組] * @param {type} [對象數組的字段] （傳入的為string型，就是通過什么判斷字段的唯一性） * @returns Array */ export const arrUnique = (arr, type) => { if (arr.length === 0) { return arr; } else { if (type) { const obj = {}; const newArr = arr.reduce((cur, next) => { obj[next[type]] ? "" : (obj[next[type]] = true && cur.push(next)); return cur; }, []); return newArr; } else { return Array.from(new Set(arr)); } } }; ~~~ ### 5. 將一維數組轉換為多維數組（根據數據格式調整） ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body> <script> function Ajax(collback){ $.ajax({ type:"get", url:"./json.json", dataType:"json", success:function(res){ collback(res) } }) } Ajax(res => { let arr = res; let ArrLength=[4,6,9,12] // arr為要處理的數組 a為數組中code的長度 (code的長度必須有規律) function aa(arr, a,pcode) { let arrlist = [] if (a > 9) { return arrlist } else { let filter = arr.filter(ele => { if (ele.code.length == a && ele.code.startsWith(pcode)) { // return ele let item = {} item.name = ele.name; item.code = ele.code; let readylist=aa(arr,a+3, item.code); item.children=changechild(item.code,readylist) arrlist.push(item) } }); return arrlist } } //過濾子數組 e為上一級的code arr為要過濾的數組 function changechild(e,arr){ let news=[] for (let i = 0; i < arr.length; i++) if(arr[i].code.startsWith(e)){ news.push(arr[i]) } return news } let a = aa(arr, 6, "4201") console.log(a) }) //遞歸：首先遞歸一定會有迭代條件，當不滿足情況直接return。滿足條件然后進行數據處理（在數據處理的時候調用自身），把最總的結果return出去 </script> </body> </html> ~~~ ### 6. 數組或對象排序 ~~~ /** * 數組排序不傳key -> 簡單值排序傳key ->（根據數組里的對象里的某個字段）排序 * @param {Array} originArray * @param {String} type (默認升序) * @param {String} key * @returns {Array} data */ export const sortArray = (originArray, type = 'up', key) => { // 深拷貝一份數據 // 不改變原數據 if (!Array.isArray(originArray)) { throw new Error('排序數據必須為數組類型!') } const array = JSON.parse(JSON.stringify(originArray)) const compare = n => (a, b) => { if (a < b) { return 1 * n } else if (a > b) { return -1 * n } return 0 } const sort = n => k => (objN, objM) => { const valN = objN[k] const valM = objM[k] return compare(n)(valN, valM) } // 不傳key，默認執行[1, 2, 3]這種排序 if (!key) { if (type === 'down') { array.sort(compare(1)) return array } array.sort(compare(-1)) return array } if (type === 'down') { array.sort(sort(1)(key)) return array } array.sort(sort(-1)(key)) return array } ~~~ ### 7. 判斷對象類型 ~~~ /** * 判斷對象類型 * @param {Object} obj * @returns {String} map[key] */ export const typeOf = obj => { const { toString } = Object.prototype const map = { '[object Boolean]': 'boolean', '[object Number]': 'number', '[object String]': 'string', '[object Function]': 'function', '[object Array]': 'array', '[object Date]': 'date', '[object RegExp]': 'regExp', '[object Undefined]': 'undefined', '[object Null]': 'null', '[object Object]': 'object' } return map[toString.call(obj)] } ~~~ ### 8.表單是否通過非空校驗 ~~~ // 表單數據是否通過非空校驗 isPassValidate(form) { for (let key in this.rules) { if (this.rules[key].some(x => x.required) && !this.isValidateValue(form[key])) { return false; } } return true; }, ~~~ ### 9. 錢格式轉換 ~~~ `$ ${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',') ~~~