【适合收藏】为了多点时间陪女朋友,我向BAT大佬跪求了这15条JS技巧
时间:2022-07-22
本文章向大家介绍【适合收藏】为了多点时间陪女朋友,我向BAT大佬跪求了这15条JS技巧,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
- 作者:陈大鱼头
- github:KRISACHAN
为了减少加班,从而挤出更多的时间来陪女朋友,我就厚着脸皮向一些BAT大佬求来了这15条JS技巧,现在分享给大家,千万别错过。
正文
返回日期数列里与目标数列最近的日期下标
const getNearestDateIndex = (targetDate, dates) => {
if (!targetDate || !dates) {
throw new Error('Argument(s) is illegal !')
}
if (!dates.length) {
return -1
}
const distances = dates.map(date => Math.abs(date - targetDate))
return distances.indexOf(Math.min(...distances))
}
// e.g.
const targetDate = new Date(2019, 7, 20)
const dates = [
new Date(2018, 0, 1),
new Date(2019, 0, 1),
new Date(2020, 0, 1),
]
getNearestDateIndex(targetDate, dates) // 2
返回日期数列里最小的日期
const getMinDate = dates => {
if (!dates) {
throw new Error('Argument(s) is illegal !')
}
if (!dates.length) {
return dates
}
return new Date(Math.min.apply(null, dates)).toISOString()
}
// e.g.
const dates = [
new Date(2018, 3, 10),
new Date(2019, 3, 10),
new Date(2020, 3, 10),
]
getMinDate(dates) // 2018-04-09T16:00:00.000Z
打乱数组
const arrayShuffle = array => {
if (!Array.isArray(array)) {
throw new Error('Argument must be an array')
}
let end = array.length
if (!end) {
return array
}
while (end) {
let start = Math.floor(Math.random() * end--)
;[array[start], array[end]] = [array[end], array[start]]
}
return array
}
// e.g.
arrayShuffle([1, 2, 3])
判断是否支持webp图片格式
const canUseWebp = () => (document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0)
// e.g.
canUseWebp() // 新版的chrome里为true,火狐里为false
判断是否是url
const isUrl = str => /^(((ht|f)tps?)://)?[w-]+(.[w-]+)+([w.,@?^=%&:/~+#-]*[w@?^=%&/~+#-])?$/.test(str)
// e.g.
isUrl('https://www.baidu.com') // true
isUrl('https://www') // false
判断是否是emoji
const isEmoji = str => /(ud83c[udf00-udfff])|(ud83d[udc00-ude4fude80-udeff])|[u2600-u2B55]/g.test(str)
// e.g.
isEmoji('?') // true
isEmoji('earth') // false
连字符转驼峰
const toCamelCase = (str = '', separator = '-') => {
if (typeof str !== 'string') {
throw new Error('Argument must be a string')
}
if (str === '') {
return str
}
const newExp = new RegExp('\-(\w)', 'g')
return str.replace(newExp, (matched, $1) => {
return $1.toUpperCase()
})
}
// e.g.
toCamelCase('hello-world') // helloWorld
驼峰转连字符
const fromCamelCase = (str = '', separator = '-') => {
if (typeof str !== 'string') {
throw new Error('Argument must be a string')
}
if (str === '') {
return str
}
return str.replace(/([A-Z])/g, `${separator}$1`).toLowerCase()
}
// e.g.
fromCamelCase('helloWorld') // hello-world
等级判断
const getLevel = (value = 0, ratio = 50, levels = '一二三四五') => {
if (typeof value !== 'number') {
throw new Error('Argument must be a number')
}
const levelHash = '一二三四五'.split('')
const max = levelHash[levelHash.length - 1]
return levelHash[Math.floor(value / ratio)] || max
}
// e.g.
getLevel1(0) // 一
getLevel1(40) // 一
getLevel(77) // 二
事件模拟触发
const event = new Event('click')
const body = document.querySelector('body')
body.addEventListener('click', ev => {
console.log('biu')
}, false)
body.addEventListener('touchmove', ev => {
body.dispatchEvent(event)
}, false)
// 这时候在移动端下滑动手指的时候就会触发click事件
判断dom是否相等
const isEqualNode = (dom1, dom2) => dom1.isEqualNode(dom2)
/*
<div>这是第一个div</div>
<div>这是第二个div</div>
<div>这是第一个div</div>
*/
const [一, 二, 三,] = document.getElementsByTagName('div')
// e.g.
isEqualNode(一, 二) // false
isEqualNode(一, 三) // true
isEqualNode(二, 三) // false
多属性双向绑定
/*
<div id="box" class="box" style="border: 1px solid; width: 100px; height: 100px;"></div>
<output id="ouput" name="output"></output>
*/
const keys = Object
.values(box.attributes)
.map(({name, value}) => ({name, value}))
const cacheData = {}
const properties = keys.reduce((acc, cur) => {
const obj = {}
cacheData[cur.name] = box.attributes[cur.name]
obj[cur.name] = {
get() {
return cacheData[cur.name]
},
set(data) {
output.value = `${cur.name}: ${data}`
cacheData[cur.name] = data
}
}
return {
...acc,
...obj
}
}, {})
Object.defineProperties(box, properties)
// 当我们修改input相应的属性时,output文字就会变成修改的内容
获取指定范围内的随机数
const getRandom = (min = 0, max = 100) => {
if (typeof min !== 'number' || typeof max !== 'number') {
throw new Error('Argument(s) is illegal !')
}
if (min > max) {
[min, max] = [max, min]
}
return Math.floor(Math.random() * (max - min + 1) + min)
}
// e.g.
getRandom(1, 100) // 89
getRandom(1, 100) // 5
文件尺寸格式化
const formatSize = size => {
if (typeof +size !== 'number') {
throw new Error('Argument(s) is illegal !')
}
const unitsHash = 'B,KB,MB,GB'.split(',')
let index = 0
while (size > 1024 && index < unitsHash.length) {
size /= 1024
index++
}
return Math.round(size * 100) / 100 + unitsHash[index]
}
formatSize('10240') // 10KB
formatSize('10240000') // 9.77MB
获取数组前/后指定数量元素
const arrayRange = (array, index, distance = '+') => {
if (!Array.isArray(array) || typeof index !== 'number' || index < 0) {
throw new TypeError('Argument(s) is illegal');
}
return arr.slice(0, `${distance}${index}`)
}
arrayRange(['a', 'b', 'c'], 2) // ["a", "b"]
arrayRange(['a', 'b', 'c'], 2, '-') // ["a"]
后记
以上15个JS技巧是鱼头辛苦从几位大厂大佬里跪求出来的,希望各位可以好好运用在业务中,减少加班次数。
如果你喜欢探讨技术,或者对本文有任何的意见或建议,非常欢迎加鱼头微信好友一起探讨,当然,鱼头也非常希望能跟你一起聊生活,聊爱好,谈天说地。鱼头的微信号是:krisChans95 也可以扫码关注公众号,订阅更多精彩内容。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法