Appearance
一、reduce使用
js
// 1.参数介绍
array.reduce((pre, cur, index, array) => {
// pre: 必须,初值值,活上一次的计算结果
// cur: 必须,当前值
// index: 当前索引, 可选
// array: 当前数组。可选,当前元素对象
// init: 可选。传递给数组的初始值,相当于pre的初始值。
return 结果
}, init)
// 2.数组对象去重
let list = [
{
id: '1',
name: '张三',
},
{
id: '1',
name: '张三',
},
{
id: '2',
name: '李四',
},
{
id: '3',
name: '王五',
}
]
let obj = {}
let newList = list.reduce((pre, cur) => {
obj[cur.id] ? '' : obj[cur.id] = true && pre.push(cur)
return pre
}, [])
console.log(newList)
// 3.求和
// 3.1 基本类型求和
let list = [1, 2, 3, 4, 5]
let sum = list.reduce((pre, cur) => {
return pre + cur
}, 0)
console.log(sum)
// 3.2 引用类型求和
let list = [{id: 1, value: 1}, {id: 2, value: 2}, {id: 3, value: 3}]
let sum = list.reduce((pre, cur) => {
return pre + cur.value
}, 0)
console.log(sum)
// 4.最大值和最小值
let list = [1, 2, 3, 4, 5,5,7,9,0,23,56]
let max = list.reduce((pre, cur) => {
return Math.max(pre, cur)
})
let min = list.reduce((pre, cur) => {
return Math.min(pre, cur)
})
// 5.扁平化数组
// 二维转化一维
let list = [[1,2], [3, 4]]
let newList = list.reduce((pre, cur) => {
return pre.concat(cur)
}, [])
// 多维数组转一维
let list = [1,[2,3,[4,5], [2,3,4,[2,3,4,[4,7,8,9]]]]
function dealList(list) {
return list.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? dealList(cur) : cur)
}, [])
}
// 6.求字符串各个字符出现的次数
const str = 'jordanuuhuussadasdkfiiekdsdfsdfewfk'
const number = str.split('').reduce((pre,cur) => {
pre[cur] ? pre[cur]++ : pre[cur] = 1
return pre
},{})
let arr = []
let num = Math.max(...new Set(Object.values(number))
let value
for(let keys in number) {
if(number[keys] === num) {
value = keys
break
}
}二、js控制单签元素平滑滚动
js
// 元素显示在页面中间,使用scrollIntoView()方法,
// 获取想要滚动的dom元素
const rollDom = document.getElementById('domId')
// 通过scrollIntoView方法滚动到可视窗口中间 block的值:start、center、end、nearest
rollDom.scrollIntoView({ block: 'center' })
// vue中通过ref获取元素,在进行调用scrollIntoView方法三、根据身份证获取出生日期
js
export function getBirthFromIdCard(idCard) {
let birthday = ''
if(idCard != null && idCard != '') {
if (idCard.length == 18) {
birthday = idCard.substr(6,8)
}
birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-")
}
return birthday
}四、时间戳转yyyy-MM-DD HH:mm:ss
js
export function formatDate(date) {
var time = new Date(date);
var YY = time.getFullYear() + '-';
var MM = (time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1) + '-';
var DD = (time.getDate() < 10 ? '0' + (time.getDate()) : time.getDate());
var hh = (time.getHours() < 10 ? '0' + time.getHours() : time.getHours()) + ':';
var mm = (time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()) + ':';
var ss = (time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds());
console.log(YY, MM, DD, hh, mm, ss);
return YY + MM + DD +" "+hh + mm + ss;
}五、计算时间差
js
export function timeDifference(time1, time2) {
let dateBegin = new Date(time1.replace(/-/g, "/")) // /将-转化为
let dateEnd = new Date(time2.replace(/-/g, "/")) // /将-转化为
//时间差的毫秒数
let dateDiff = dateEnd.getTime() - dateBegin.getTime();
//计算出相差天数
let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));
//计算天数后剩余的毫秒数
let leave1 = dateDiff%(24*3600*1000)
//计算出小时数
let hours = Math.floor(leave1/(3600*1000))
//计算相差分钟数
let leave2 = leave1%(3600*1000) //计算小时数后剩余的毫秒数
let minutes = Math.floor(leave2/(60*1000))//计算相差分钟数
//计算相差秒数
let leave3 = leave2%(60*1000) //计算分钟数后剩余的毫秒数
let seconds = Math.round(leave3/1000)
let dateTime = dayDiff+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒"
return dateTime
// console.log(" 相差 "+dayDiff+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒")
// console.log(dateDiff+"时间差的毫秒数",dayDiff+"计算出相差天数",leave1+"计算天数后剩余的毫秒数"
// ,hours+"计算出小时数",minutes+"计算相差分钟数",seconds+"计算相差秒数");
}六、时间秒数差计算
js
export function secondTime(time1, time2) {
console.log(time1,time2);
let dateBegin = new Date(time1.replace(/-/g, "/")) // /将-转化为
let dateEnd = new Date(time2.replace(/-/g, "/")) // /将-转化为
// let dateBegin = new Date(time1).getTime()
// let dateEnd = new Date(time2).getTime()
//时间差的毫秒数
let dateDiff = dateBegin.getTime() - dateEnd.getTime();
return dateDiff / 1000
}七、倒计时
js
export function countDown(value) {
let secondTime = parseInt(value) // 秒
let minuteTime = 0 // 分
let hourTime = 0 // 小时
let dayTime = 0 // 天
let result = ''
if(value < 60) {
result = secondTime + '秒'
} else {
if(secondTime >= 60) {
// 获取分钟,除以60取整数,得到整数分钟
minuteTime = parseInt(secondTime / 60)
// 获取秒数,秒数取佘,得到整数秒数
secondTime = parseInt(secondTime % 60)
// 如果分钟大于60,将分钟转换成小时
if (minuteTime >= 60) {
// 获取小时,获取分钟除以60,得到整数小时
hourTime = parseInt(minuteTime / 60)
// 获取小时后取佘的分,获取分钟除以60取佘的分
minuteTime = parseInt(minuteTime % 60)
if (hourTime >= 24) {
// 获取天数, 获取小时除以24,得到整数天
dayTime = parseInt(hourTime / 24)
// 获取小时后取余小时,获取分钟除以24取余的分;
hourTime = parseInt(hourTime % 24)
}
}
}
if (secondTime >= 0) {
secondTime = parseInt(secondTime) >= 10 ? secondTime : '0' + secondTime
result = '' + secondTime + '秒'
}
if (minuteTime >= 0) {
minuteTime = parseInt(minuteTime) >= 10 ? minuteTime : '0' + minuteTime
result = '' + minuteTime + '分' + result
}
if (hourTime >= 0) {
result = '' + parseInt(hourTime) + '小时' + result
}
if (dayTime >= 0) {
result = '' + parseInt(dayTime) + '天' + result
}
}
return result
}在vue中使用
js
this.finishTimer = setInterval(() => {
this.conFinishTime = this.$common.countDown(time)
time--
}, 1000)八、非空判断
js
if((value??'') !== '') {
console.log(123123213)
}九、数组排序
js
let list = [{id:2,name: 'haha'},{id:1,name:'ni'}, {id:6,name:'ta'},{id:4,name:'oo'}]
list.sort((a,b) => a.id - b.id)
// 排序后的数组
0: {id: 1, name: 'ni'}
1: {id: 2, name: 'haha'}
2: {id: 4, name: 'oo'}
3: {id: 6, name: 'ta'}十、map简化if判断
js
const actions = new Map([
[1, ['processing', 'IndexPage']],
[2, ['fail', 'FailPage']],
[3, ['fail', 'FailPage']],
[4, ['success', 'SuccessPage']],
[5, ['cancel', 'CancelPage']],
['default', ['other', 'Index']]
])
actions.get(1) // ['processing', 'IndexPage']
const actions = new Map([
['video','视频上传'],
['file','附件上传'],
])
actions.get('video') // 视频上传