nutils-js
是我封装的一个模块化、高性能的 JavaScript 实用工具库。前端
前端开发中常常会遇到Array
、Object
、String
、Number
等数据处理,或者是防抖节流函数等性能优化亦或是 URL 参数处理、类型判断等等操做,为了提升开发效率,我将这些常见公共方法进行抽离并封装好,发布在 npm 上,后续若有更优的写法也会作进一步的更新。另外读者朋友们若是有好的建议或者想为本项目贡献一份力的话,欢迎为本项目提交 pr,一块儿探讨和交流。git
$ npm i --save nutils-js
const nutils = require('nutils-js') nutils.multArray([1, 2, 3], 2)
multArray
二维数组转换flatten
扁平化数组flattenDeep
指定层级扁平化数组isArrayEqual
检查两个数组各项相等allEqual
检查数组各项相等diffArray
具备惟一array
值的数组haveArr
具备共同array
值的数组uniqueArray
数组去重uniqueArrayObject
数组对象去重treeData
生成树结构数据ascArr
数组升序descArr
数组降序shuffle
随机排序takeArray
截取数组开始指定的元素takeLastArray
截取数组最后指定的元素cloneArray
克隆数组maxArray
数组中最大值validArray
去除数组中的无效值randomNumber
指定范围的随机整数average
求平均值averageBy
检查数组对象各项相等aboutEqual
两个值是否约等于getLineSize
计算两点之间的距离sum
数组中值总和后续的更新,请点击
GitHub
仓库进行查看github若是对本文有啥疑问或建议,欢迎加我微信
qqlcx55
一块儿学习哈web
Github地址算法
multArray
二维数组转换将数组(array)拆分红多个子数组,并将这些子数组组成一个新数组。npm
multArray(array, count)
参数数组
array
须要处理的数组count = 8
子数组须要的长度示例浏览器
multArray([1, 2, 3, 4, 5, 6, 7], 2) => [[1, 2], [3, 4], [5, 6], [7]] multArray(['a', 'b', 'c', 'd'], 3) => [['a', 'b', 'c'], ['d']]
源码性能优化
function multArray(arr, count = 8) { let pages = [] arr.forEach((item, index) => { const page = Math.floor(index / count) if (!pages[page]) pages[page] = [] pages[page].push(item) }) return pages }
flatten
扁平化数组将多层嵌套数组(array)拆分红一个数组bash
flatten(array)
参数
array
多层嵌套数组示例
flatten([1, [2], [3], [4, 5]]) // [1, 2, 3, 4, 5]
源码
// 扁平化 Map 方法 const flatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? flatten(v) : v))) // 扁平化 reduce 方法 const flatten = arr => arr.reduce((a, c) => a.concat(Array.isArray(c) ? flatten(c) : c), [])
flattenDeep
指定层级扁平化数组将多层嵌套数组(array)拆分红指定层级数组
flattenDeep(array, depth)
参数
array
多层嵌套数组 depth =
减小的嵌套层级数示例
flattenDeep([1, [2, [3, [4]], 5]], 1) // => [1, 2, [3, [4]], 5] // ES6方法 `flat(depth)` ;[1, [2, [3, [4]], 5]].flat(1) // => [1, 2, [3, [4]], 5]
源码
const flattenDeep = (arr, depth = 1) => arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), [])
isArrayEqual
检查两个数组各项相等比较两个数组内的各项值是否相等,返回一个Boolean
值
isArrayEqual(array, array)
参数
array
要检查的数组array
要检查的数组示例
isArrayEqual([6, 5, 2, 4, 1, 3], [1, 2, 3, 4, 5, 6]) // => true isArrayEqual([6, 5, 2, 7, 1, 3], [1, 2, 3, 4, 5, 6]) // => false
源码
const isArrayEqual = (a, b, has = true) => { if (a.length !== b.length) return (has = false) const s = new Set(b) if (a.find(x => !s.has(x))) return (has = false) return has }
allEqual
检查数组各项相等allEqual(array)
参数
array
要检查的数组示例
allEqual([1, 2, 3, 4, 5, 6]) // => false allEqual([1, 1, 1, 1]) // => true
源码
const allEqual = arr => arr.every(val => val === arr[0])
diffArray
具备惟一array
值的数组建立一个具备惟一 array 值的数组,每一个值不包含在其余给定的数组中
diffArray(array, array2)
参数
array
要检查的数组array2
要排除的数组示例
diffArray([1, 2, 6, 7], [1, 2, 9, 5]) // => [ 6, 7 ]
源码
const diffArray = (a, b) => { const s = new Set(b) let arr = a.filter(x => !s.has(x)) return arr }
haveArr
具备共同array
值的数组建立一个具备共同 array 值的数组,每一个值包含在其余给定的数组中
haveArr(array, array2)
参数
array
要检查的数组array2
要包含的数组示例
haveArr([1, 2, 6, 7], [1, 2, 9, 5]) // => [ 1, 2 ]
源码
const haveArr = (a, b) => { const s = new Set(b) return a.filter(x => s.has(x)) } // ES6 includes const haveArr = (arr, values) => arr.filter(v => values.includes(v))
uniqueArray
数组去重建立一个去重后的 array 数组副本
uniqueArray(array)
参数
array
要去重的数组示例
uniqueArray([1, 2, 2, 3, 4, 4, 5]) // => [ 1, 2, 3, 4, 5 ]
源码
const uniqueArray = (...arr) => [...new Set(arr)] const uniqueArray = (...arr) => Array.from(new Set(arr))
uniqueArrayObject
数组对象去重建立一个去重后的 array 数组对象副本
uniqueArrayObject(array)
参数
array
要去重的数组key
要去重的对象属性值示例
const responseList = [ { id: 1, a: 1 }, { id: 2, a: 2 }, { id: 3, a: 3 }, { id: 1, a: 4 }, { id: 2, a: 2 }, { id: 3, a: 3 }, { id: 1, a: 4 }, { id: 2, a: 2 }, { id: 3, a: 3 }, { id: 1, a: 4 }, { id: 2, a: 2 }, { id: 3, a: 3 }, { id: 1, a: 4 }, ] uniqueArrayObject(responseList, 'id') // => [ { id: 1, a: 1 }, { id: 2, a: 2 }, { id: 3, a: 3 } ]
源码
const uniqueArrayObject = (arr, key) => { return arr.reduce((acc, cur) => { const ids = acc.map(item => item[key]) return ids.includes(cur[key]) ? acc : [...acc, cur] }, []) }
treeData
生成树结构数据该函数传入一个数组, 每项id
对应其父级数据parent_id
,返回一个树结构数组
treeData(array, id, parent_id)
参数
array
要生成树结构的数组id
自定义属性名parent_id
父级自定义属性名示例
const comments = [ { id: 1, parent_id: null }, { id: 2, parent_id: 1 }, { id: 3, parent_id: 1 }, { id: 4, parent_id: 2 }, { id: 5, parent_id: 4 }, ] treeData(comments) // => [ { id: 1, parent_id: null, children: [ [Object], [Object] ] } ]
源码
const treeData = (arr, id = null, link = 'parent_id') => arr.filter(item => item[link] === id).map(item => ({ ...item, children: treeData(arr, item.id) }))
ascArr
数组升序返回升序后的新数组
sort()方法会改变原数组,默认按 unicode 码顺序排列
ascArr(array)
参数
array
要检查的排序数组示例
ascArr([3, 2, 3, 4, 1]) // => [ 1, 2, 3, 3, 4 ]
源码
// 经过ES6 ...展开运算符浅拷贝一份新数组 const ascArr = arr => [...arr].sort((a, b) => a - b)
descArr
数组降序返回降序后的新数组
descArr(array)
参数
array
要检查的排序数组示例
descArr([3, 2, 3, 4, 1]) // => [ 1, 2, 3, 3, 4 ]
源码
const descArr = arr => [...arr].sort((a, b) => b - a)
shuffle
随机排序建立一个随机的数组,使用Fisher-Yates
算法随机排序数组的元素
shuffle(array)
参数
array
要随机的数组示例
shuffle([2, 3, 1]) // => [3, 1, 2]
源码
const shuffle = ([...arr]) => { let m = arr.length while (m) { const i = Math.floor(Math.random() * m--) ;[arr[m], arr[i]] = [arr[i], arr[m]] } return arr }
takeArray
截取数组开始指定的元素从 array 数组的最开始一个元素开始提取 n 个元素
takeArray(array, n)
参数
array
要检索的数组。n=
要提取的元素n
个数。示例
takeArray([2, 3, 1], 2) // => [2, 3]
源码
const takeArray = (arr, n = 1) => arr.slice(0, n)
takeLastArray
截取数组最后指定的元素从 array 数组的最后一个元素开始提取 n 个元素
takeLastArray(array, n)
参数
array
要检索的数组。n=
要提取的元素n
个数。示例
takeArray([2, 3, 1], 2) // => [3, 1]
源码
const takeLastArray = (arr, n = 1) => arr.slice(0, -n)
cloneArray
克隆数组浅拷贝一份数组副本
cloneArray(array)
参数
array
要复制的数组示例
cloneArray([1, 24]) // => [1, 24]
源码
// ES6 ... const cloneArray = arr => [...arr] // ES6 Array.from const cloneArray = arr => Array.from(arr) // concat() const cloneArray = arr => [].concat(arr) // map() const cloneArray = arr => arr.map(x => x) cloneArray([1, 24]) // [1, 24]
maxArray
数组中最大值过滤原数组中全部的非假值元素,返回数组中的最大值
maxArray(array)
参数
array
待处理的数组示例
maxArray([0, -1, -2, -3, false]) // => 0
源码
const maxArray = arr => Math.max(...arr.filter(v => Boolean(v) || v === 0))
minArray
数组中最小值过滤原数组中全部的非假值元素,返回数组中的最小值
minArray(array)
参数
array
待处理的数组示例
minArray([0, -1, -2, -3, false]) // => -3
源码
const minArray = arr => Math.min(...arr.filter(v => Boolean(v) || v === 0))
validArray
去除数组中的无效值建立一个新数组,包含原数组中全部的非假值元素。例如false
, null
,0
, ""
, undefined
, 和 NaN
都是被认为是“假值”。
validArray(array)
参数
array
待处理的数组示例
minArray([0, 1, false, 2, '', 3]) // => [1, 2, 3]
源码
const validArray = arr => arr.filter(Boolean)
isObjectEqual
检查两个对象各项值相等isObjectEqual(object, object2)
参数
object
待检索的对象object2
待检索的对象示例
isObjectEqual({ a: 2, b: 4 }, { b: 4, a: 2 }) // => true isObjectEqual({ a: 2, b: 4, c: 6 }, { b: 4, a: 2 }) // => false
源码
function isObjectEqual(obj1, obj2, has = true) { // 判断类型 const o1 = obj1 instanceof Object const o2 = obj2 instanceof Object if (!o1 || !o2) return obj1 === obj2 // 判断长度 const keys1 = Object.getOwnPropertyNames(obj1) const keys2 = Object.getOwnPropertyNames(obj2) if (keys1.length !== keys2.length) return false // 各项对比 for (let o in obj1) { let t1 = obj1[o] instanceof Object let t2 = obj2[o] instanceof Object if (t1 && t2) { has = diffByObj(obj1[o], obj2[o]) } else if (obj1[o] !== obj2[o]) { has = false break } } return has }
cloneObject
克隆对象浅拷贝一份对象副本
cloneObject(object)
参数
object
要复制的对象示例
const a = { x: 1, y: 1 } const b = cloneObject(a) // => a !== b
源码
// ES6 ... const cloneObject = (obj, temp = {}) => (temp = { ...obj }) // Object.assign() const cloneObject = obj => Object.assign({}, obj)
debounce
函数防抖在事件被触发 n 秒后再执行回调,若是在这 n 秒内又被触发,则从新计时。
debounce(fn, wait)
参数
fn
要防抖动的函数wait=500
须要延迟的毫秒数示例
debounce(()=> { console.log('debounce') }, 1000) // => 1秒后打印'debounce'
源码
/** * * 防抖 * @parmas fn 回调函数 * @parmas time 规定时间 */ const debounce = (function () { let timer = {} return function (func, wait = 500) { let context = this // 注意 this 指向 let args = arguments // arguments中存着e let name = arguments[0].name || 'arrow' //箭头函数 if (timer[name]) clearTimeout(timer[name]) timer[name] = setTimeout(() => { func.apply(this, args) }, wait) } })()
throttle
函数节流规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,若是在同一个单位时间内某事件被触发屡次,只有一次能生效。
throttle(fn, wait)
参数
fn
要节流的函数wait=500
须要延迟的毫秒数示例
throttle(() => { console.log('throttle') }, 1000) // 1秒屡次触发打印一次`throttle`
源码
/** * * 节流(规定的时间才触发) * @parmas fn 结束完运行的回调 * @parmas delay 规定时间 */ export const throttle = (function () { let timeout = null return function (func, wait) { let context = this let args = arguments if (!timeout) { timeout = setTimeout(() => { timeout = null func.apply(context, args) }, wait) } } })() throttle(fn, 300)
typeFn
类型判断判断是不是 Array
Object
String
Number
类型
typeFn.type(value)
参数
type
数据类型value
要检验的值示例
typeFn.String('1') typeFn.Number(1) typeFn.Boolean(false) typeFn.Null(null) typeFn.Array([1, 2]) typeFn.Object({ a: 1 }) typeFn.Function(() => {}) // => true
源码
let typeFn = {} const curring = (fn, arr = []) => { let len = fn.length return (...args) => { arr = arr.concat(args) if (arr.length < len) { return curring(fn, arr) } return fn(...arr) } } function isType(type, content) { return Object.prototype.toString.call(content) === `[object ${type}]` } ;['String', 'Number', 'Boolean', 'Null', 'Array', 'Object', 'Function'].forEach(type => { typeFn[type] = curring(isType)(type) })
calcFn
加减乘除运算由于 JavaScript 遵循 IEEE 754 数学标准,使用 64 位浮点数进行运算。在进行十进制运算时会致使精度丢失。
calcFn.add(value1, value2, value3)
参数
add
、sub
、mul
、div
运算符value
要计算的值示例
解决 0.1+0.2 !== 0.3 问题 //加法 calcFn.add(0.1, 0.2) // 0.3 //减法 calcFn.sub(0.1, 0.2) // 0.1 //乘法 calcFn.mul(0.2, 0.3) // 0.06 // 乘法 calcFn.add(0.1, 0.2) // 0.5
源码
const calcFn = { add() { let arg = Array.from(arguments); return arg.reduce((total, num) => { return accAdd(total, num); }); }, sub() { let arg = Array.from(arguments); return arg.reduce((total, num) => { return accAdd(total, -num); }); }, mul() { let arg = Array.from(arguments); return arg.reduce((total, num) => { return accMul(total, num); }); }, div() { let arg = Array.from(arguments); return arg.reduce((total, num) => { return accDiv(total, num); }); } } function accAdd(arg1, arg2) { let r1, r2, m; try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split(".")[1].length; } catch (e) { r2 = 0; } m = Math.pow(10, Math.max(r1, r2)); return (arg1 * m + arg2 * m) / m; } function accMul(arg1, arg2) { let m = 0, s1 = arg1.toString(), s2 = arg2.toString(); try { m += s1.split(".")[1].length; } catch (e) {} try { m += s2.split(".")[1].length; } catch (e) {} return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); } function accDiv(arg1, arg2) { let t1 = 0, t2 = 0, r1, r2; try { t1 = arg1.toString().split(".")[1].length; } catch (e) {} try { t2 = arg2.toString().split(".")[1].length; } catch (e) {} r1 = Number(arg1.toString().replace(".", "")); r2 = Number(arg2.toString().replace(".", "")); return (r1 / r2) * Math.pow(10, t2 - t1); }
isNil
值是不是null
或undefined
isNil(value)
参数
value
要检验的值示例
isNil(null) isNil(undefined) // => true
源码
const isNil = val => val === undefined || val === null
padStart
遮住字符串padStart(value, n, maskChar)
参数
value
要遮住字符串n = 4
填充的长度maskChar
填充字符示例
padStart('18659808664') // => 1865*******
源码
const padStart = (str, n = 4, maskChar = '*') => str.slice(0, n).padStart(str.length, maskChar)
thousands
数字每隔三位数加分号thousands(number)
参数
number
数字或者浮点数示例
thousands(12255552323) // => 12,255,552323
源码
const thousands = num => num.toString().replace(num.toString().indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(\d{3})+$)/g, '$1,')
randomNumber
指定范围的随机整数randomNumber(min, max)
参数
min
指定范围最小值max
指定范围最大值示例
randomNumber(0, 10) // => 7 // => 2
源码
const randomNumber = (min = 0, max = 10) => Math.floor(Math.random() * (max - min + 1)) + min
average
求平均值average(value1, value2, value3)
参数
value
数字示例
average(...[1, 2, 3]) average(1, 2, 3) // => 2
源码
const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length
averageBy
检查数组对象各项相等averageBy(array, fn)
参数
array
要迭代的数组fn
迭代函数示例
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n) averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n') // => 5
源码
const averageBy = (arr, fn) => arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) / arr.length
aboutEqual
两个值是否约等于传入两个数字是否大体相等,偏差在可接受范围内
aboutEqual(n1, n2, epsilon)
参数
n1 n2
要比较的数字epsilon
偏差可接受范围内示例
aboutEqual(25, 2, 0.06) // => true
源码
const aboutEqual = (n1, n2, epsilon = 0.001) => Math.abs(n1 - n2) < epsilon
getLineSize
计算两点之间的距离勾股定理计算两点之间的距离
getLineSize = (x1, y1, x2, y2)
参数
x1 y1 x2 y2
坐标点示例
getLineSize(0, 0, 3, 4) // => 5
源码
const getLineSize = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1)
sum
数组中值总和sum(value1, value2, value3)
参数
value1 value2 value3
要迭代的数字示例
sum(1, 2, 3, 4) sum(...[1, 2, 3, 4]) // => 10
源码
const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0)
copyText
H5复制文本copyText(content, callback)
参数
content
要复制文字callback
回调用户提示示例
copyText(content, text => { this.$toast(text) })
源码
function copyText(content, callback) { if (!document.queryCommandSupported('copy')) { //为了兼容有些浏览器 queryCommandSupported 的判断 console.log('浏览器不支持') return } let textarea = document.createElement('textarea') textarea.value = content textarea.readOnly = 'readOnly' document.body.appendChild(textarea) textarea.select() // 选择对象 textarea.setSelectionRange(0, content.length) //核心 let result = document.execCommand('copy') // 执行浏览器复制命令 callback && callback(result ? '复制成功~~' : '复制失败~~') textarea.remove() }
getCurrentURL
获取当前的 URL 地址该函数返回当前页面的 URL 地址。
示例
getCurrentURL() // =>
源码
const getCurrentURL = () => window.location.href
scrollToTop
返回顶部平滑地滚动到当前页面的顶部。
示例
scrollToTop() // => 当前页面的顶部
源码
const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop if (c > 0) { window.requestAnimationFrame(scrollToTop) window.scrollTo(0, c - c / 8) } }
smoothScroll
平滑滚动页面平滑滚动到浏览器窗口的可见区域
示例
smoothScroll('#fooBar'); // => 平滑滚动到ID为fooBar的元素 smoothScroll ('.fooBar' ); // => 使用fooBar类平滑滚动到第一个元素
源码
const smoothScroll = element => document.querySelector(element).scrollIntoView({ behavior: 'smooth', })
isCurrentPage
是不是当前页面浏览器的选项卡是不是用户在浏览
示例
isCurrentPage() // => true
源码
isCurrentPage = () => !document.hidden
isBrowser
是不是浏览器返回当前运行时环境是否为浏览器
示例
isBrowser() // => true (browser) // => false (Node)
源码
const isBrowser = () => ![typeof window, typeof document].includes('undefined')
isWechatBrowser
判断微信浏览器仍是普通h5示例
isWechatBrowser() // => true
源码
const isWechatBrowser = (() => { let ua = navigator.userAgent.toLowerCase() return /micromessenger/.test(ua) })()
isMobile
判断是不是移动端示例
isMobile() // => true
源码
const isMobile = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)