通用方法整理 · 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, ',') ~~~