js 常用功能实现(函数)

时间:2021-11-14 08:03:18

1、10 个短小实用的代码片段 :https://www.jianshu.com/p/3ef822ec5a63

2、js常用函数  : https://www.cnblogs.com/wangyuyuan/p/8807765.html (原生实现)

/**
* 导入文件内方法
*/
import Promise from './es6-promise.min.js';
import CONSTANTS from '../constants/constants.js'; /**
* 操作dom类
*/
let dom = {
// 判断是否有该 class
hasClass(el, className) {
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
return reg.test(el.className)
}, // 添加 class
addClass(el, className) {
if (this.hasClass(el, className)) {
return
}
let newClass = el.className.split(' ')
newClass.push(className)
el.className = newClass.join(' ')
}, // 删除类名
removeClass(el, className) {
if (this.hasClass(el, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
el.className = el.className.replace(reg, '')
}
},
// 替换类名
replaceClass(obj, newName, oldName) {
this.removeClass(obj, oldName)
this.addClass(obj, newName)
}, /**
* 获取/设置 自定义属性 data-${name}=val
* 如果传入了 val 就设置自定义属性 `data-${name}` 的值为 val
* 如果没有传入了 val 就获取自定义属性 `data-${name}` 的值
*/
customAttribute(el, name, val) {
if (val) {
return el.setAttribute(`data-${name}`, val)
} else {
return el.getAttribute(`data-${name}`)
}
}, /**
* 获取元素相对屏幕的位置
* let one = document.getElementById('one')
* console.log(getPos(one)) -> {top: 8, left: 8}
*/
getPos(elem) {
if (!elem) return { left: 0, top: 0 } let top = 0
let left = 0 top = elem.getBoundingClientRect().top
left = elem.getBoundingClientRect().left return { top, left }
}
} /***
* 操作数组类
*/
let arr = {
// 克隆数组
cloneArr(arr) {
// 从第一个字符就开始 copy
// slice(start,end) 方法可从已有的数组中返回选定的元素。
return arr.slice(0)
}, /**
* 洗牌函数
* @param {Array} arr 原数组
* @param {boolean} flag 是否改变原数组,默认不改变
* @return {Array} 新数组
*/
shuffle(arr, flag = false) {
let newArr = []
if (flag) {
newArr = arr
} else {
newArr = arr.slice(0)
} for (let i = 0; i < newArr.length; i++) {
let j = utils.num.getRandom(0, i)
let temp = newArr[i]
newArr[i] = newArr[j]
newArr[j] = temp
}
return newArr
}, // 随机获取数组的一个成员
randomOne(arr) {
return arr[Math.floor(Math.random() * arr.length)]
}, // 数组去重
removeRepeat(arr) {
return Array.from(new Set(arr))
},
// [1,2,3,1,'a',1,'a'].filter(function(ele,index,array){
// return index===array.indexOf(ele)
// }) // 数组最大值
maxArr(arr) {
return Math.max.apply(null, arr) // var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
// var maxInNumbers = Math.max.apply(Math, numbers);
// var minInNumbers = Math.min.apply(Math, numbers);
}, // 数组最小值
minArr(arr) {
return Math.min.apply(null, arr)
}, // 数组数字总和 (必须保证数组每个元素都是 Number)
sumArr(arr) {
let sum = 0 for (let i = 0; i < arr.length; i++) {
sum += arr[i]
} return sum
}, // 数组数字平均值,小数点可能会有很多位,这里不做处理,处理了使用就不灵活了!
averageArr(arr) {
let average = this.sumArr(arr) / arr.length
return average
}, /**
* 一个元素出现的次数
* getEleCount('asd56+asdasdwqe', 'a') -> 3
* getEleCount([1, 2, 3, 4, 2], 3) -> 1
* @param {[type]} obj 可以是对象或者数组
* @param {[type]} ele [description]
* @return {[type]} [description]
*/
getEleCount(obj, ele) {
let num = 0 for (let i = 0; i < obj.length; i++) {
if (ele === obj[i]) {
num++
}
} return num
}
} /**
* 操作字符串类
*/
let str = {
/**
* 正则验证(可扩展)
* @param {String} str 需要检测的字符串
* @param {String} type 检测类型
* @return {Boolean} 返回布尔值
*/
testReg(str, type) {
switch (type) {
case 'email':
return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str)
case 'phone':
return /^1[3|4|5|7|8][0-9]{9}$/.test(str)
case 'tel':
return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str)
case 'number':
return /^[0-9]$/.test(str)
case 'english':
return /^[a-zA-Z]+$/.test(str)
case 'chinese':
return /^[\u4E00-\u9FA5]+$/.test(str)
case 'lower':
return /^[a-z]+$/.test(str)
case 'upper':
return /^[A-Z]+$/.test(str)
default:
return true
}
}, /**
* 去掉前后空格
* 1:前后空格(默认) 2:所有空格 3:前空格 4:后空格
* @param {[type]} str [description]
* @param {Number} type [description]
* @return {[type]} [description]
*/
trim(str, type = 1) {
switch (type) {
case 1:
return str.replace(/(^\s*)|(\s*$)/g, '')
case 2:
return str.replace(/\s+/g, '')
case 3:
return str.replace(/(^\s*)/g, '')
case 4:
return str.replace(/(\s*$)/g, '')
default:
return str
}
}, /**
* 大小写转换
* 1:首字母大写 2:首页母小写 3:大小写转换 4:全部大写 5:全部小写
*/
changeCase(str, type) {
function ToggleCase(str) {
var itemText = ''
str.split('').forEach(
function (item) {
if (/^([a-z]+)/.test(item)) {
itemText += item.toUpperCase()
} else if (/^([A-Z]+)/.test(item)) {
itemText += item.toLowerCase()
} else {
itemText += item
}
})
return itemText
} switch (type) {
case 1:
return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
return v1.toUpperCase() + v2.toLowerCase()
})
case 2:
return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
return v1.toLowerCase() + v2.toUpperCase()
})
case 3:
return ToggleCase(str)
case 4:
return str.toUpperCase()
case 5:
return str.toLowerCase()
default:
return str
}
}, /**
* 如何优雅的实现金钱格式化
* 1234567890 --> 1,234,567,890
* @return {[type]} [description]
*/
formatMoney(str = '1234567890') {
return str.replace(/\B(?=(\d{3})+(?!\d))/g, ',') // 1,234,567,890
}, /**
* 实现标准JSON的深拷贝
* 不考虑IE的情况下,标准JSON格式的对象蛮实用,不过对于undefined和function的会忽略掉。
* @param {[type]} a [description]
* @return {[type]} [description]
*/
deepCopy(a) {
return JSON.parse(JSON.stringify(a))
}
} /**
* 操作时间类
*/
let time = { /**
* 获取当前时间
* 2017-08-11 22:52:13 星期六
* @param {Boolean} hasDay 是否需要年月日
* @param {Boolean} hasHour 是否需要十分秒
* @param {Boolean} hasWeek 是否需要星期
* @param {String} sign1 分隔符
* @param {String} sign2 分隔符
*/
getNowDate(hasDay = true, hasHour = true, hasWeek = true, sign1 = '/', sign2 = ':') {
let date = new Date()
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = (date.getDate()).toString().padStart(2, '0')
let hour = (date.getHours()).toString().padStart(2, '0')
let minutes = (date.getMinutes()).toString().padStart(2, '0')
let seconds = (date.getSeconds()).toString().padStart(2, '0')
let weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
let week = weekArr[date.getDay()] let time1 = hasDay ? `${year}${sign1}${month}${sign1}${day}` : ''
let time2 = hasHour ? `${hour}${sign2}${minutes}${sign2}${seconds}` : ''
let time3 = hasWeek ? `${week}` : '' return `${time1} ${time2} ${time3}`.replace(/(^\s*)|(\s*$)/g, '')
}, /**
* 格式化时间戳 (分:秒)
* 61 -> 01:01
* @param {Number} timestamp 时间戳
* @param {String} sign 分隔符,默认 :
* @return {[type]} [description]
*/
format(timestamp, sign = ':') {
timestamp = Math.floor(timestamp) let minute = (Math.floor(timestamp / 60)).toString().padStart(2, '0')
let second = (timestamp % 60).toString().padStart(2, '0')
return `${minute}${sign}${second}`
}, /**
* 倒计时
* countDown('2017-8-11 24:0:0') -> 剩余0天0小时54分钟41秒
* @param {Date} endTime 结束时间
* @return {[type]} [description]
*/
countDown(endTime) {
let start = new Date()
let end = new Date(endTime)
let dif = end.getTime() - start.getTime() let d = 0
let h = 0
let m = 0
let s = 0 if (dif >= 0) {
d = Math.floor(dif / 1000 / 3600 / 24)
h = Math.floor(dif / 1000 / 60 / 60 % 24)
m = Math.floor(dif / 1000 / 60 % 60)
s = Math.floor(dif / 1000 % 60)
} return `仅剩${d}天${h}小时${m}分钟${s}秒`
}
} /**
* 请求接口类
*/
let ajax = { /**
* 请求接口方法
* @param{url}请求url
* @param{method} 请求方式
* @param{data} 请求参数
*/
brmRequest(url, method, data) {
let token = wx.getStorageSync('AuthToken');
return new Promise((resolve, reject) => {
wx.request({
url,
method,
data,
header: {
'Cookie': 'XDEBUG_SESSION=PHPSTORM',
'Content-Type': 'application/json',
'Authorization': token
},
success: function (res) {
if (res.header.Authorization && token != res.header.Authorization) {
wx.setStorageSync('AuthToken', res.header.Authorization)
}
resolve(res.data);
},
fail: function (err) {
reject(err);
}
});
})
} } //导出方法类
module.exports = {
dom: dom,
arr: arr,
str: str,
time: time,
ajax: ajax,
}

3、快速创建一个 对象的数组:【做模拟数据的时候回经常用到,20-30条这样的数据,看页面的效果】

  实现思路:基于一个现有数组,进行遍历(推荐这种,快速)   或   for循环 给数组添加数据。

      let arr = new Array(20)
let arr2 = Array.from(arr, () => {
return{
groupId: 'xxxxx',
personNum: '12',
casesTimes: '20',
involveFeeMed: '¥8,888',
involveFeeFund: '¥8,888',
digDate: '2019-01-01',
recentDate: '2019-01-01',
}
})

4、将 js 对象,拼接成 请求参数显示。原生的ajax请求参数都是 key1=value1&key2=value2 这种显示的。所以需要这样一个方法就像处理函数。 参考链接

  // 格式化参数
function formatParams (data) {
var arr = []
for (var item in data) {
arr.push(item + '=' + data[item])
}
return arr.join('&')
}

5、数组去重:https://segmentfault.com/a/1190000016418021

[...new Set(arr)]  // 最简单的方法

6、字符串去除两边空格:

7、获取 url上 的参数(包括 # 号后面的参数):

const getQueryString = function (name) {
let regUrl = new RegExp(name + '=')
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i') let url = location.href
let urlSerch = location.search
let urlHash = location.hash // 获取url 上的authcode参数值,因为不知道参数是在#前还是#号后。所以要对location.search和location.hash分开判断
if (!regUrl.test(url)) {
return null
}
let queryStr = urlSerch.substr(1).match(reg) || urlHash.split('?')[1].match(reg)
if (queryStr != null) {
return unescape(queryStr[2])
}
return null
}

8、判断JS对象是否拥有某属性:https://blog.csdn.net/lianjiuxiao/article/details/88819773

注意 :js中变量  不可用来调用方法(或属性)的值的值有  undefined(声明未赋值)、null、''(初始化的值)、NaN(计算后产生的值,一般判断是否有值不用判断它)。这些值,调用方法或属性,浏览器就不会报错。