将一级的数据构造处置惩罚成树状数据构造
处置惩罚成树状构造，平常就是须要节点和父节点标识，或许须要斟酌以哪一个节点为根节点天生树构造数据
// 运用示例代码：
list: [{id: 1, pid: 0, name: 11}, {id: 2, pid: 1, name: 2}]
getTreeArr({ key: 'id', pKey: 'pid', data: list })
result: [
{id: 1, pid: 0, name: 11, children: [
{id: 2, pid: 1, name: 2}
]}
] /**
* 将一级的数据构造处置惩罚成树状数据构造
* @param {Object} obj {key, pKey, data}
* @param obj.key 字段称号 比方id
* @param obj.pKey 父字段称号 比方 pid
* @param obj.rootPValue 根节点的父字段的值
* @param obj.data 须要处置惩罚的数据
* @param obj.jsonData 是不是深复制数据（默许是true）
* @return {Array} arr
*/
getTreeArr: (obj) => {
if (!Array.isArray(obj.data)) {
console.log('getTreeArr=>请传入数组')
return []
}
obj.jsonData = obj.jsonData === false ? obj.jsonData : true
const arr = obj.jsonData ? JSON.parse(JSON.stringify(obj.data)) : obj.data
const arr1 = []
// 将数据处置惩罚成数状构造
arr.forEach(item => {
let index = 0
item.children = []
arr.forEach(item1 => {
// 获得树构造关联
if (item[obj.key] === item1[obj.pKey]) {
item.children.push(item1)
}
// 推断根节点
if (item1[obj.key] !== item[obj.pKey]) {
index++
}
})
// 没传入根节点，根据当前数据构造获得根节点
if (!('rootPValue' in obj) && index === arr.length) {
arr1.push(item)
}
})
// 传入根节点，根据传入的根节点构成树构造
if ('rootPValue' in obj) {
arr.forEach(item => {
if (item[obj.pKey] === obj.rootPValue) {
arr1.push(item)
}
})
}
return arr1
}数组去重
数组去重要领有很多，还分为一般数组和对象数组，这里列举了一些，并把个中优瑕玷剖析了一下
/**
* 数组去重
* @param {Array} data 要去重的数组
* @param {String} key 作为去重根据的字段 (处置惩罚对象数组时须要传入)
* @return arr 返回处置惩罚后的数据
*/根据对象的属性不同去重
引荐运用
handleRepeatArr ({ data, key }) {
if (!Array.isArray(data)) {
console.log('请传入数组')
return
}
const arr = []; const obj = {}
data.forEach((item, index) => {
const attr = key ? item[key] : item
if (!obj[attr]) {
obj[attr] = index + 1
arr.push(item)
}
})
return arr
}递回去重
瑕玷：会将数据默许排序
handleRepeatArr ({ data, key }) {
if (!Array.isArray(data)) {
console.log('请传入数组')
return
}
/** 1.递回去重，瑕玷，会将数据默许排序 */
// 先对数据做排序处置惩罚
data = data.sort((item, item1) => {
if (key) {
return item[key] - item1[key]
}
return item - item1
})
// 递回去重
function getData (index) {
if (index >= 1) {
// 推断当前数据和下一条数据是不是相称
let result = key ? data[index][key] === data[index - 1][key] : data[index] === data[index - 1]
if (result) {
data.splice(index, 1)
}
getData(index - 1)
}
}
getData(data.length - 1)
return data
}应用indexOf以及forEach
瑕玷：合适处置惩罚数组，不合适处置惩罚对象数组
handleRepeatArr ({ data, key }) {
if (!Array.isArray(data)) {
console.log('请传入数组')
return
}
let arr = []
data.forEach((item, index) => {
// 假如当前元素在以后没有涌现过(背面涌现的数据会保存)
// let result = data.indexOf(item, index + 1)
// 假如当前元素在之前没有涌现过(前面涌现的数据会保存)
let result = index === 0 ? -1 : data.lastIndexOf(item, index - 1)
if (result === -1) {
arr.push(item)
}
})
return arr
}new Set
瑕玷：合适处置惩罚数组，不合适处置惩罚对象数组
return [...new Set(data)]双层轮回去重
瑕玷：占用内存高
handleRepeatArr ({ data, key }) {
if (!Array.isArray(data)) {
console.log('请传入数组')
return
}
for (let i = 0, len = data.length; i < len; i++) {
for (let j = i + 1; j < len; j++) {
let result = key ? data[i][key] === data[j][key] : data[i] === data[j]
if (result) {
data.splice(j, 1)
len--
j--
}
}
}
return data
}复制内容
复制胜利后假如须要提醒，须要自定义相关回调，当前函数运用的是element-ui的弹窗
/**
* 复制
* @param {String} value 要复制的值
*/
copyData (value) {
const inputDom = document.createElement('input')
inputDom.value = value
document.body.appendChild(inputDom)
inputDom.select() // 选择对象
document.execCommand('Copy') // 实行浏览器复制敕令
document.body.removeChild(inputDom) // 删除DOM
Message({
type: 'success',
message: '复制胜利'
})
}a模仿window.open翻开窗口
由于有些浏览器会默许阻拦window.open，当须要函数中翻开窗口，能够运用a标签模仿window.open
/**
* a模仿window.open，不会被浏览器阻拦
* @param {String} url a标签翻开的地点
* @param {String} id a标签的ID
* @param {String} targetType a标签点击翻开的体式格局（当前页面翻开照样新窗口翻开）
*/
openWindow: (url, targetType = '_blank', id = 'open', download = false) => {
// 假如存在则删除
if (document.getElementById(id)) {
document.body.removeChild(document.getElementById(id))
}
const a = document.createElement('a')
a.setAttribute('href', url)
if (download) {
a.setAttribute('download', url)
}
a.setAttribute('target', targetType)
a.setAttribute('id', id)
document.body.appendChild(a)
a.click()
}获得想要的时候花样
这个在营业顶用的比较频仍
// 运用示例代码：
switchTime(new Date(), 'YYYY-MM-DD hh') // 返回 2019-05-22 11
switchTime(new Date(), 'YYYYMMDD hh:mm:ss') // 返回 20190522 11:00:00 /**
* 传入时候戳，转换指定的时候花样
* @param {Number} val 时候戳
* @param {String} dateType 要获得的时候花样 比方 YYYY-MM-DD hh:mm:ss
* @return dataStr 比方 YYYY-MM-DD hh:mm:ss
*/
switchTime: (val = +new Date(), dateType = 'YYYY-MM-DD hh:mm:ss') => {
// 将字符串转换成数字
const timeStamp = +new Date(val)
// 假如转换成数字失足
if (!timeStamp) {
return val
}
let str
// 获得时候字符串
const dateStr = new Date(timeStamp)
str = dateType.replace('YYYY', dateStr.getFullYear())
str = str.replace('MM', (dateStr.getMonth() + 1 < 10 ? '0' : '') + (dateStr.getMonth() + 1))
str = str.replace('DD', (dateStr.getDate() < 10 ? '0' : '') + dateStr.getDate())
str = str.replace('hh', (dateStr.getHours() < 10 ? '0' : '') + dateStr.getHours())
str = str.replace('mm', (dateStr.getMinutes() < 10 ? '0' : '') + dateStr.getMinutes())
str = str.replace('ss', (dateStr.getSeconds() < 10 ? '0' : '') + dateStr.getSeconds())
return str
}时候显现转换
这个要领中须要应用到上一个要领，猎取当前时候，或许能够自行获得时候然后再去处置惩罚
假定当前时候为 2019-05-20 00:00:00
// 运用示例代码：
timeView(new Date()) // 方才宣布
timeView('2019-05-19 23:01:00') // 59分钟前
timeView('2019-05-19 12:00:00') // 12小时前
timeView('2019-05-15 12:00:00') // 5天前
timeView('2019-04-15 12:00:00') // 04-15
timeView('2018-04-15 12:00:00') // 2018-04-15 /**
* 时候显现
*/
timeView: function (val) {
const now = +new Date() // 当时时候
const timeStamp = +new Date(val) // 须要处置惩罚的时候
const result = now - timeStamp // 相差的时候戳
const min = 60 * 1000 // 分钟的毫秒数
const hour = 60 * 60 * 1000 // 小时的毫秒数
const day = 60 * 60 * 1000 * 24 // 日的毫秒数
if (result / min < 1) {
return '方才宣布'
} else if (result / min < 60) {
return Math.floor(result / min) + '分钟前'
} else if (result / hour > 1 && result / hour < 24) {
return Math.floor(result / hour) + '小时前'
} else if (result / day > 1 && result / day < 7) {
return Math.floor(result / day) + '天前'
} else if (this.switchTime(now, 'YYYY') === this.switchTime(timeStamp, 'YYYY')) {
return this.switchTime(timeStamp, 'MM月DD日')
} else {
return this.switchTime(timeStamp, 'YYYY年MM月DD日')
}
}处置惩罚搜刮栏参数
getLocationSearch () {
const str = window.location.search
const arr = str.substr(1).split('&')
const obj = {}
for (const item of arr) {
const data = item.split('=')
obj[data[0]] = data[1]
}
return obj
}文件大小显现转换
bytesToSize (bytes) {
if (bytes === 0) return '0 B'
var k = 1024 // or 1024
var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
var i = Math.floor(Math.log(bytes) / Math.log(k))
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
}对请求失利的HTTP状况码做处置惩罚
/**
* 对请求失利的HTTP状况码做处置惩罚
* @param {Number} code HTTP状况码
* @param {String} message 毛病提醒
* @return message 返回处置惩罚过的提醒信息
*/
requestError: (code, message) => {
const statusCode = (code + '').replace(/[^0-9]+/g, '') - 0
switch (statusCode) {
case 400:
return 'Bad Request (毛病的请求)'
case 401:
return 'Unauthorized (请求请求身份验证)'
case 403:
return 'Forbidden (效劳器拒绝请求)'
case 404:
return 'NOT Found (效劳器找不到请求的资本)'
case 405:
return 'Bad Request (禁用请求中指定的要领)'
case 406:
return 'Not Acceptable (没法运用请求的内容特征相应请求的网页)'
case 407:
return 'Proxy Authentication Required (须要代办受权)'
case 408:
return 'Request Timed-Out (效劳器期待请求时发作超时)'
case 409:
return 'Conflict (效劳器在完成请求时发作争执。效劳器必须在相应中包括有关争执的信息)'
case 410:
return 'Gone (请求的资本已被永远删除)'
case 411:
return 'Length Required (效劳器不接受不含有用内容长度标头字段的请求)'
case 412:
return 'Precondition Failed (未满足前提条件)'
case 413:
return 'Request Entity Too Large (请求实体过大)'
case 414:
return 'Request, URI Too Large (请求的 URI 太长)'
case 415:
return 'Unsupported Media Type (不支撑的媒体范例)'
case 429:
return '您的操纵过于频仍,请稍后重试'
case 500:
return 'Internal Server Error (效劳器内部毛病)'
case 501:
return 'Not Implemented (还没有实行)'
case 502:
return 'Bad Gateway (毛病网关)'
case 503:
return 'Server Unavailable (效劳不可用)'
case 504:
return 'Gateway Timed-Out (网关超时)'
case 505:
return 'HTTP Version not supported (HTTP 版本不受支撑)'
default:
return message
}
}经由过程key找到在列表中对应的名字
// 运用示例代码：
list: [{key: '赤色', value: 1}]
getDataName({dataList: list, value: 'value', label: 'key', data: 1}) // 赤色 /**
* 经由过程key找到在列表中对应的显现
* @param {Object} obj
* @param obj.dataList 数据列表
* @param obj.value 数据的值对应的字段称号 比方 'value'
* @param obj.label 数据的申明对应的字段称号 比方 'label'
* @param obj.data 当前传入的数据值
* @return name 返回当前传入值在数组中对应的名字
*/
getDataName: (obj) => {
let name = obj.data
if (Array.isArray(obj.dataList) && obj.dataList.length > 0) {
for (let i = 0; i < obj.dataList.length; i++) {
if (obj.dataList[i][obj.value] === obj.data) {
name = obj.dataList[i][obj.label]
}
}
}
return name
}