根据参数缓存函数执行的结果, 同样的参数只会执行一次缓存函数

const cachedToUpperCase = cache(function (str) {
 return console.error(str.toUpperCase())
})

const cachedFunctionWithParam = cache(function (str, fn) {
 return fn(str)
})

cachedToUpperCase('a')
// => 'A'

cachedToUpperCase('a')
// => 'A'

cachedFunctionWithParam('figure', str => str.big())
// => '<big>figure</big>'

cachedFunctionWithParam('figure', str => str.small())
// => '<big>figure</big>'

深度克隆一个对象, 即使是包含了日期、正则、函数. 对于函数即使 clone 过, 也能拿到正确的 this.

clone({ name: 'tom', range: [60, 80, 75] })
// => { name: 'tom', range: [60, 80, 75] }

clone({ date: new Date(), regexp: new RegExp('d+', 'g'), call: function () { console.log('sewing') } })
// => { date: new Date(), regexp: new RegExp('d+', 'g'), call: function () { console.log('sewing') } }

const obj = {
  range: 10,
  setRange () {
    return ++this.range && this
  }
}
clone(obj).setRange().range
// => 11

obj.range
// => 10

通过标签名称来创建 src 元素并绑定 load 事件, 非 HTMLMediaElement | HTMLImageElement 元素 会被直接插入到页面的 head 标签下.

createSrcElement('script', 'https://unpkg.com/vue')
  .then(script => {
    console.log(script) // => <script src="https://unpkg.com/vue"></script>
  })

const setImageCrossOrigin = img => {
  img.crossOrigin = 'Anonymous'
  return img
}
createSrcElement('img', 'https://example.com/example.png', setImageCrossOrigin)
 .then(images => {
   console.log(image)
 })

创建一个 link[rel="stylesheet"] 并且直接插入到页面的 head 标签下

function prefetch (url, type = 'image') {
  createStyleElement(url, element => {
    element.rel = 'prefetch'
    element.as = type
    return element
  })
}

prefetch('https://bit.ly/2HqROmb')
// => <link rel="prefetch" href="https://bit.ly/2HqROmb" as="image"/>

createStyleElement('https://unpkg.com/minireset.css/minireset.css')
// => <link rel="stylesheet" href="https://unpkg.com/minireset.css/minireset.css"/>

防抖动函数, 规定时间内的多次调用归为一次函数调用. 适用于 input、scroll 等事件. 查看 debounce 和 throttle 区别: https://css-tricks.com/debouncing-throttling-explained-examples/

window.addEventListener('resize', debounce(function () { console.log(this) }, 100))

通过对象的路径获取对象上的值

get({ person: { tom: { age: 10 } } }, 'person.tom.age', '18')
// => 10

get({ person: { tom: { age: 10 } } }, 'person.tom.sex', 'male')
// => male

get({ person: null }, 'person.tom.sex', 'female')
// => female

get({ person: { tom: { sex: undefined } } }, 'person.tom.sex', 'female')
// => female

get({ person: { tom: { sex: undefined } } }, null)
// => { person: { tom: { sex: undefined } } }

判断一个数是否在一段区间内, 与 lodash/inRange 不同的是: lodash 认为 7 不在 [3, 7] 这个区间内

inRange(7, 3, 7)
// => true

inRange(1, 3, 5)
// => false

inRange(10, 9)
// => true

inRange(0)
// => true

对数组和字符串进行插入操作, 如果插入对象类型不是为数组对象直接返回插入对象

insert(['a', 'b', 'c'], 0, 'TEST')
// => ["TEST", "a", "b", "c"]

insert(['a', 'b', 'c'], 0, { foo: true })
// => [{ foo: true }, "a", "b", "c"]

insert('123456', 4, 'TEST')
// => 1234TEST56

insert('object in string', 4, { foo: true })
// => obje{"foo":true}ct in string

insert(undefined, 0, 'foo')
// => undefined

insert(null, 0, 'foo')
// => null

通过给定的标签名创建一个元素

baseCreateElement('div')
// => <div></div>

baseCreateElement('script')
// => <script></script>

baseCreateElement('examples')
// => <examples></examples>

转换 json 格式的 string 为 json 对象, 如果不是则直接返回 string 本身

formatJSONString({ name: 'tom', age: 18 })
// => { name: 'tom', age: 18 }

formatJSONString('{"name":"tom","age":18}')
// => { name: "tom", age: 18 }

formatJSONString("{\"author\":\"\",\"datetime\":\"\",\"description\":\"default version\",\"modelName\":\"delta\",\"version\":\"eta_agent3.9\"}")
// => { author: "", datetime: "", description: "default version", modelName: "delta", version: "eta_agent3.9" }

判断是否是日期

isDate(Date.now())
// => true

isDate(new Date())
// => true

isDate(Date.now() + '')
// => false

判断一个对象是否是 Empty

isEmpty(null)
// => true

isEmpty(undefined)
// => true

isEmpty('')
// => true

isEmpty(0)
// => false

isEmpty({})
// => true

isEmpty([1, 2, 3])
//=> false

判断对象是否是一个空对象

isEmptyObject()
// => true

isEmptyObject('')
// => true

isEmptyObject(null)
// => true

isEmptyObject(undefined)
// => true

isEmptyObject([])
// => true

isEmptyObject({})
// => true

isEmptyObject(['a', 'b', 'c'])
// => false

isEmptyObject({ name: 'tom' })
// => false

判断对象是否为空, 或者判断对象不同层级上是否有为空的值

isEmptyValueObj({ name: 'tom', age: 0 })
// => false

isEmptyValueObj({ name: '', age: 0 })
// => true

isEmptyValueObj({
  name: 'lee',
  age: 18,
  empty_object: [{ name: undefined }]
})
// => false

isEmptyValueObj({
  name: 'lee',
  age: 18,
  empty_object: [{ name: undefined }]
}, 2)
// => true

判断字符串是否是经过 encode

isEncodedString('name=tom&age=29')
// => false

isEncodedString('name%3Dtom%26age%3D29')
// => 'name=tom&age=29'

根据 ua 来判断是否是移动端平台

判断一个对象是否是 primitive 值 (Number、String、Boolean、Undefined、Null、Symbol)

isPrimitive(null)
// => true

isPrimitive('tom')
// => true

isPrimitive(Symbol(12345))
// => true

isPrimitive({})
// => false

isPrimitive([])
// => false

isPrimitive(function () {})
// => false

判断对象的类型

isType(null, 'null')
// => true

isType({}, 'object')
// => true

isType([], 'ARRAY')
// => true

isType(undefined, 'undefined')
// => true

isType([], ['string', 'array', 'BOOLEAN'])
// => true

map 结构对象转化为 url search string. 支持 Array、Object、Function. 应该注意的是 url 的长度最好应该在 2048 之内, 否则可能有部分浏览器不支持.

map2SearchString({ foo: undefined, bar: null })
// => '?foo=undefined&bar=null'

map2SearchString({ regexp: /\\d+/g, blank: 'foo bar' })
// => '?regexp=%2F%5Cd%2B%2Fg&blank=foo%20bar'

map2SearchString({ name: 'tom', age: 20 })
// => '?name=tom&age=20'

map2SearchString({ func () { return 'hello world' } })
// => "?func=func()%20%7B%20return%20'hello%20world'%20%7D"

map2SearchString({ array: [1, 2, 3, 4], map: { foo: true, bar: -1 } })
// => '?array=%5B1%2C2%2C3%2C4%5D&map=%7B%22foo%22%3Atrue%2C%22bar%22%3A-1%7D'

递归格式化 json 对象或者字符串, 为保证超大数值的精准性, 不会将超大数值的字符串转为数字.

// will convert `age` to numeric type
parseJSONString({ name: 'tom', age: 18 })
// => { name: 'tom', age: 18 }

// will not convert `orderID` to numeric type
parseJSONString({ orderID: '1200020707947551541', riderName: 'bush' })
// => { orderID: '1200020707947551541' }

parseJSONString({ person: "{ \"name\": \"tom\", \"age\": 18 }" })
// => { person: { name: 'tom', age: 18 } }

parseJSONString({ person: "{ \"name\": \"tom\", \"age\": 20, \"other\": \"{ \\\"female\\\": true }\", \"birth\": \"beijin\", \"parent\": \"{ \\\"father\\\": \\\"bush\\\" }\" }" })
// => { person: { name: 'tom', age: 20, other: { female: true }, birth: 'beijin', parent: { father: 'bush' } } }

将字符串作为 JavaScript 并执行

parseString('true')
// => true

parseString("{ name: 'tom', age: 20, parent: { name: 'jack' } }")
// => { name: 'tom', age: 20, parent: { name: 'jack' } }

parseString('1 + 10 * 3')
// => 31

从数组中根据 value 值移除特定的 item

removeOne(['a', 'b', 'c', 'd', 'e'], 'd')
// => d

removeOne(['a', 'b', 'c', 'd', 'e'], 'f')
// => undefined

removeOne(undefined, 'f')
// => undefined

替换一个对象的一级 key 名称, 再不修改原始对象的情况下返回一个新的对象.

renameObjectKeys({ name: 'male' }, { name: 'sex' })
// => { sex: 'male' }

renameObjectKeys({ name: 'male', education: '18' }, { name: 'sex', education: 'age' })
// => { sex: 'male', age: '18' }

将 url search string 格式转化为 map 形式, 键值对中的值将被转化为原始类型. 可从 string 中直接解析出 JSON.

searchString2Map('?name=tom&age=18&sex=male')
// => { name: 'tom', age: 18, sex: 'male' }

searchString2Map('?obj=%7Bname%3A%20'tom'%2C%20age%3A%2018%2C%20sex%3A%20'male'%7D&app=true')
=> { obj: { name: 'tom', age: 18, sex: 'male' }, app: true }

节流函数, 规定时间内函数只会被调用一次. 查看 throttle 和 debounce 区别: https://css-tricks.com/debouncing-throttling-explained-examples/

window.addEventListener('resize', throttle(function () { console.log(this) }, 100))

根据每次传递节流函数参数的不同, 来决定当前函数是否被节流. 例如: 根据接口返回的 http code 进行前端的交互性提示, http code 的不同来保证相同的 http code 在错误提醒时, 只会触发一次. 查看 throttle 和 debounce 区别: https://css-tricks.com/debouncing-throttling-explained-examples/

const shouldWarnHttpError = ([prev = {}], [next]) => prev.status === next.status

const error = throttleWith(err => {
  alert(err.status)
}, 50, shouldWarnHttpError)

fetch('www.examples/404')
 .then(noop, error)

fetch('www.examples/404')
 .then(noop, error)

fetch('www.examples/502')
 .then(noop, error)

// => will only alert 404、502 once