1.获取URL的query参数
- 作用：根据传入的属性名输出对应的值，没有则输出null
- 注意：url传参中包含中文时，默认的获取结果会乱码，需要进行解码
//解析query传参 url参数中含有中文时将decode设为true
getQueryVal(key,decode = false) {
var searchObj = {}
//截取参数字符串
var searchStr = window.location.search.substring(1)
//转换成数组
var arr = searchStr.split('&')
//转换成对象
arr.forEach(str = >{
var mark_index = str.indexOf('=')
var key = str.substring(0,mark_index)
var val = str.substring(mark_index + 1)
searchObj[key] = val
})
//根据属性名输出对应的值
if (searchObj.hasOwnProperty(key)) {
//如果传入true 则进行解码
if(decode){
return decodeURI(searchObj[key])
}else{
return searchObj[key]
}
} else {
return null
}
},
2.生成最近N天的日期数组
- 由来：在做图表的时候经常需要生成最近日期列表（最近7天/15天/30天），在此封装一个，免得重复造轮子
- 语法：getDateList(天数,结束时间)
- 依赖：函数依赖moment.js，使用前请先引入
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
getDateList(length = 15, end_time = new Date()) {
//日期数组
var date_list = []
//结束时间 日期对象
var temp_date = end_time
for (var i = 0; i < length; i++) {
//加入到数组中
date_list.unshift(`${moment(temp_date).format('MM-DD')}`)
//日期减一
temp_date.setDate(temp_date.getDate() - 1)
}
return date_list
},
3.生成最近的月份列表
- 由来：在做图表的时候经常需要生成最近月份列表（最近6个月/12个月），在此封装一个，免得重复造轮子。
- 语法：getMonthList(天月数,结束时间)
- 依赖：函数依赖moment.js，使用前请先引入函数依赖moment.js，使用前请先引入
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
getMonthList(length = 6, end_time = new Date()) {
//日期数组
var month_list = []
//结束时间 日期对象
var temp_date = end_time
for (var i = 0; i < length; i++) {
//加入到数组中
date_list.unshift(`${moment(temp_date).format('YYYY-MM')}`)
//月份减一
temp_date.setMonth(temp_date.getMonth() - 1)
}
return month_list
},
4.根据年月输出每月天数
- 由来：制作月报表时，需要渲染当月每天的数据，就需要知道当前月有多少天
- 思路：除了2月，每个月天数都是固定的，只要判断是否是闰年还是平年即可确定2月份的天数（判断是否是闰年:年份如果是整百 则除以400取余 否则除以4取余）
//根据年月输出当月天数
getDaysByMonth(year,month){
var year = Number(year)
var month = Number(month) - 1
//平年每月天数
var days_arr = [31,28,31,30,31,30,31,31,30,31,30,31]
//判断是否是闰年 如果是整百 则除以400取余 否则除以4取余
if ( (year%100 == 0 && year%400 == 0) || (year%100 != 0 && year%4 == 0)) {
console.log('闰年')
days_arr[1] = 29
}
return days_arr[month]
}
5.节流和防抖
- 节流含义：当一个事件被频繁触发时（滚动条滚动，鼠标移动事件），为了节省性能，降低其触发频率
- 实现方式：设定一个时间周期，一个周期内只能触发一次，以此降低其触发频率
<script>
//记录上次回调执行的时间，再对比本次触发的时间，超过周期则执行回调，并记录最新的回调执行时间
function throttle(cb,delay){
//记录上次回调执行时的时间戳
var prev = 0
//定义内部函数并返回，形成闭包，缓存prev
return function(){
//事件触发时上下文
var context = this
//事件触发时的参数
var args = arguments
//对比时间差 超过时间间隔则执行回调
if(Date.now() - prev >= delay){
//执行回调（绑定this，传递参数）
cb && cb.apply(context,args)
//更新prev
prev = Date.now()
}
}
}
//事件回调
function handle(e){
console.log(e)
}
//事件监听并设置节流
window.addEventListener('scroll', throttle(handle,200))
</script>
- 防抖含义：当事件频繁触发时，不执行回调，直到事件触发告一段落才执行回调，通俗的说，就是只在最后一次触发时才执行，一般用于实时输入搜索
- 实现方式：每次触发都将回调放入延时定时器中，如果定时器范围内接着触发，则清除这个定时器，并开启新的，保证永远只有一个最新的定时器执行，如果后续不再触发，则执行这个延时定时器的回调，在执行回调时，需要绑定事件发生时的context和参数
<script>
//当事件频繁触发时，只在最后一次触发时执行回调
function debounce(fn, delay){
// 声明计时器
var timer = null
// 定义内部函数并返回，形成闭包,缓存 timer
return function() {
//事件触发时上下文
var context = this
//事件触发时的参数
var args = arguments
//清除定时器
clearTimeout(timer)
//开启新定时器
timer = setTimeout(function () {
//给回调绑定this,传入事件参数并执行
fn.apply(context, args)
}, delay)
}
}
//事件回调
function handle(e){
console.log('handle',e)
}
//监听事件并设置防抖
window.addEventListener('resize', debounce(handle,200))
</script>
6.数组的最大值与最小值
- 实现思路：先进行数组排序，然后数组的第一个和最后一个元素就是最大值与最小值
- 注意：排序使用sort()方法进行，如果数组元素是对象，可以将p1-p2替换成p1[key]-p2[key],这样排序时可以根据数组元素的某个属性值进行比较
<script>
function getMaxMin(arr){
var max = null
var min = null
if(arr.length > 0){
//先对数组进行排序
var tem_arr = arr.sort((p1,p2)=>{
//p1-p2就是升序
//p2-p1就是降序
return p2-p1
})
max = tem_arr[0]
min = tem_arr[tem_arr.length-1]
}
return {
max,min
}
}
</script>
7.文件大小转换
- 作用：根据文件大小，为其适配一个合适的单位输出
- 实现方式：循环取商，依次提升单位（"B"->"K"->"M"->"G"），直到找到最后的单位为止
<script>
//根据文件大小，为其适配一个合适的单位输出
//传入的文件大小单位字节B
function formatterSize(cellValue){
//当前尺寸
var size = cellValue
//当前单位（B代表字节）
var unit = "B"
//单位列表(B代表字节，1024进位)
var units = ["B","K","M","G"]
//循环取商(如果除以进位后，仍然大于1024，则接着除，并提升单位，一直到最后的单位为止)
while(units.length > 0 && size >= 1024){
//单位进位(移除过小的单位)
units.shift()
//单位更新
unit = units[0]
//取商
size = size / 1024
}
//保留小数点后2位
size = Math.floor(size*100) / 100
return size + " " + unit
}
//500B
console.log(formatterSize(500)) //500 B
//1KB
console.log(formatterSize(1024)) //1 K
//1k + 100B
console.log(formatterSize(1024 + 100)) //1.09 K
//2M
console.log(formatterSize(1024 * 1024 * 2)) //2 M
</script>
