目录
记录一些工作中常用的方法,方便以后开发的查阅
一、函数
1.通用函数 common/utils.js
/**
* 去除指定属性
* @name unique
* @prama attr 去重的属性
* @return 去重后的数组
*/
export function unique (arr, attr) {
const res = new Map()
const fArr = arr.filter((a) => !res.has(a[attr]) && res.set(a[attr], 1))
console.log('对象数组根据某个属性去重', fArr)
return fArr.filter(a => a[attr] && a[attr] !== 'undefined')
}
/**
* 生成guid
* @name guid
*/
export function guid () {
return `${S4()}-${S4()}-${S4()}-${S4()}`
}
/**
* HTML 转译
* @name htmlEscape
* @param {String} html 需要反转译的html
* @return {String} 返回反转译后的html
*/
export const htmlEscape = (html) => {
if (!html) return ''
return html.replace(/[<>"&]/g, function (match, pos, originalText) {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '&':
return '&'
case '"':
return '"'
}
})
}
/**
* HTML 反转译
* @name htmlEscapeBack
* @param {String} html 需要转译的html
* @return {String} 返回转译后的html
*/
export const htmlEscapeBack = (html) => {
const reg = /(<)|(>)|(&)|(")/g
if (!html) return html
return html.replace(reg, function (match) {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '&':
return '&'
case '"':
return '"'
}
})
}
/**
* 获取dom节点样式
* @name getStyle
* @param {*} obj dom元素
* @param {*} name 样式树形名称
*/
export function getStyle (obj, name) {
return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name]
}
/**
* 节流函数
* @name throttle
* @param {*} fn 执行函数
* @param {*} delay 延迟时间
*/
export const throttle = (fn, delay) => {
let previous = 0
// 使用闭包返回一个函数并且用到闭包函数外面的变量previous
return function () {
let _this = this
let args = arguments
let now = new Date()
if (now - previous > delay) {
fn.apply(_this, args)
previous = now
}
}
}
/**
* 防抖函数
* @name debounce
* @param {*} fn 要执行的方法
* @param {*} delay 延迟
*/
export const debounce = (fn, delay) => {
let timer // 维护一个 timer
return function () {
let _this = this // 取debounce执行作用域的this
let args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
fn.apply(_this, args) // 用apply指向调用debounce的对象,相当于_this.fn(args);
}, delay)
}
}
/**
* 获取两个基础数据类型数组的差集
* @param {Array} list1 数组1
* @param {Array} list2 数组2
* @return {Array} list
*/
export const minusArray = (list1, list2) => {
if (!Array.isArray(list1) || !Array.isArray(list1)) throw new Error('params must be Array')
if (list1.length > list2.length) {
const mSet = new Set(list2)
return list1.filter(x => !mSet.has(x))
} else {
const mSet = new Set(list1)
return list2.filter(x => !mSet.has(x))
}
}
/**
* 获取两个对象数组的差集
* @param {Array} arr1 数组1
* @param {Array} arr2 数组2
* @param {String} typeName 判断的key名称
*/
export const getDifferenceSet = (arr1, arr2, typeName) => {
const list = []
const differenceObject = arr1.concat(arr2).reduce((acc, cur) => {
if (acc[cur[typeName]] && acc[cur[typeName]][typeName] === cur[typeName]) {
delete acc[cur[typeName]]
} else {
acc[cur[typeName]] = cur
}
return acc
}, {})
for (const key in differenceObject) {
list.push(differenceObject[key])
}
return list
}
/**
* 列表转成树
* @param {*} list list
* @param {*} id node-key
* @param {*} pid parent key
* @param {*} childrenKey children key
*/
export const listToTree = (list, id = 'id', pkey = 'pid', childrenKey = 'children') => {
const map = new Map()
const newList = []
list && list.forEach(item => {
map.set(item[id], item)
})
map.forEach((item) => {
if (map.has(item[pkey])) {
const parent = map.get(item[pkey])
parent[childrenKey] = parent[childrenKey] || []
parent[childrenKey].push(item)
} else {
newList.push(item)
}
})
return newList
}
/**
* 树转列表
* @param {*} tree 树数组
* @param {*} list 接收结果的数据
* @param {*} childrenKey 子项的key
*/
export const treeToList = (tree = [], list = [], childrenKey = 'children', handleMethod) => {
tree.forEach(node => {
if (typeof handleMethod === 'function') {
handleMethod(node)
}
list.push(node)
if (node[childrenKey] && node[childrenKey].length) {
treeToList(node[childrenKey], list, childrenKey, handleMethod)
}
})
}
/**
* 树组件过滤,返回新的数组
* @param {*} tree 数据列表
* @param {*} propKey 子项的要过滤的字段名
* @param {*} value 要过滤的值
* @param {*} matchPid 匹配的父级ID列表
* @param {*} idKey id名称
* @param {*} pid pid
* @param {*} parentFilterKey 父级元素的字段名
*/
export const filterTree = (tree, propKey, value, childrenKey = 'children', idKey = 'id', pid = 'pid', parentFilterKey = propKey, matchPid = []) => {
const filterList = []
tree.forEach(item => {
const newItem = { ...item }
const pIncludes = item[parentFilterKey] && item[parentFilterKey].includes(value)
if (pIncludes) {
matchPid.push(item[idKey])
filterList.push(newItem)
} else if (item[childrenKey] && item[childrenKey].length) {
if (pIncludes) {
matchPid.push(item[idKey])
}
newItem[childrenKey] = filterTree(item[childrenKey], propKey, value, childrenKey, idKey, pid, parentFilterKey, matchPid)
if (newItem[childrenKey].length || pIncludes) {
filterList.push(newItem)
}
} else if (matchPid.includes(item[pid])) {
filterList.push(item)
} else if (Array.isArray(propKey)) {
propKey.forEach(pItem => {
if (item[pItem] && item[pItem].includes(value)) {
filterList.push(item)
}
})
} else if (item[propKey] && item[propKey].includes(value)) {
filterList.push(item)
}
})
return filterList
}
/**
* 复杂类型深拷贝
* @param {*} obj 数据
*/
export const deepClone = (obj) => {
if (obj === null || typeof obj !== 'object') return obj
const cpObj = obj instanceof Array ? [] : {}
for (let key in obj) cpObj[key] = deepClone(obj[key])
return cpObj
}
/**
* 获取数据类型
* @param {*} obj
*/
export const getType = (obj) => {
let type = Object.prototype.toString.call(obj).match(/^\[object (.*)\]$/)[1].toLowerCase()
if (type === 'string' && typeof obj === 'object') return 'object' // Let "new String('')" return 'object'
if (obj === null) return 'null' // PhantomJS has type "DOMWindow" for null
if (obj === undefined) return 'undefined' // PhantomJS has type "DOMWindow" for undefined
return type
}
/**
* getStyle
* @param {*} obj dom元素
* @param {*} name 样式树形名称
*/
export function getStyle (obj, name) {
return window.getComputedStyle && obj ? getComputedStyle(obj, null)[name] : (obj ? obj.currentStyle[name] : 0)
}
/**
* amountRule
* @param {*} 千分位计算
* @param {*} val 计算值
*/
export function amountRule (val) {
let defaultAmount = ''
let setAmount = amount + ''
if (setAmount != 'null' && setAmount != '' && setAmount != 'undefined' && setAmount != '--') {
defaultAmount = setAmount.split('').join('').replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
return defaultAmount
} else {
return defaultAmount
}
}