【適合收藏】爲了多點時間陪女友，我向BAT大佬跪求了這15條JS技巧

時間 2020-07-21

原文原文鏈接

做者：陳大魚頭

github： KRISACHAN

爲了減小加班，從而擠出更多的時間來陪女友，我就厚着臉皮向一些BAT大佬求來了這15條JS技巧，如今分享給你們，千萬別錯過。javascript

正文

返回日期數列裏與目標數列最近的日期下標

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-\ude4f\ude80-\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"]
複製代碼