JavaScript 工具函数大全

JavaScript 工具函数大全

目录:

  • 第一部分:数组
  • 第二部分:函数
  • 第三部分:字符串
  • 第四部分:对象
  • 第五部分:数字
  • 第六部分:浏览器操作及其它

1. 第一部分:数组

1. `all`:布尔全等判断

2. `allEqual`:检查数组各项相等

3.`approximatelyEqual`:约等于

4.`arrayToCSV`:数组转`CSV`格式(带空格的字符串)

5.`arrayToHtmlList`:数组转`li`列表

此代码段将数组的元素转换为<li>标签,并将其附加到给定ID的列表中。

6. `average`:平均数

7. `averageBy`:数组对象属性平均数

此代码段将获取数组对象属性的平均值

8.`bifurcate`:拆分断言后的数组

可以根据每个元素返回的值,使用reduce()和push() 将元素添加到第二次参数fn中 。

9. `castArray`:其它类型转数组

10. `compact`:去除数组中的无效/无用值

11. `countOccurrences`:检测数值出现次数

12. `deepFlatten`:递归扁平化数组

13. `difference`:寻找差异

此代码段查找两个数组之间的差异。

14. `differenceBy`:先执行再寻找差异

在将给定函数应用于两个列表的每个元素之后,此方法返回两个数组之间的差异。

15. `dropWhile`:删除不符合条件的值

此代码段从数组顶部开始删除元素,直到传递的函数返回为true。

16. `flatten`:指定深度扁平化数组

此代码段第二参数可指定深度。

17. `indexOfAll`:返回数组中某值的所有索引

此代码段可用于获取数组中某个值的所有索引,如果此值中未包含该值,则返回一个空数组。

18. `intersection`:两数组的交集

19. `intersectionWith`:两数组都符合条件的交集

此片段可用于在对两个数组的每个元素执行了函数之后,返回两个数组中存在的元素列表。

20. `intersectionWith`:先比较后返回交集

21. `minN`:返回指定长度的升序数组

22. `negate`:根据条件反向筛选

23. `randomIntArrayInRange`:生成两数之间指定长度的随机数组

24. `sample`:在指定数组中获取随机数

25. `sampleSize`:在指定数组中获取指定长度的随机数

此代码段可用于从数组中获取指定长度的随机数,直至穷尽数组。
使用Fisher-Yates算法对数组中的元素进行随机选择。

26. `shuffle`:“洗牌” 数组

此代码段使用Fisher-Yates算法随机排序数组的元素。

27. `nest`:根据`parent_id`生成树结构(阿里一面真题)

根据每项的parent_id,生成具体树形结构的对象。

用法:

JavaScript 工具函数大全

强烈建议去理解这个的实现,因为这是我亲身遇到的阿里一面真题:

JavaScript 工具函数大全

2. 第二部分:函数

1.`attempt`:捕获函数运行异常

该代码段执行一个函数,返回结果或捕获的错误对象。

2. `defer`:推迟执行

此代码段延迟了函数的执行,直到清除了当前调用堆栈。

3. `runPromisesInSeries`:运行多个`Promises`

4. `timeTaken`:计算函数执行时间

5. `createEventHub`:简单的发布/订阅模式

创建一个发布/订阅(发布-订阅)事件集线,有emit,on和off方法。

  1. 使用Object.create(null)创建一个空的hub对象。
  2. emit,根据event参数解析处理程序数组,然后.forEach()通过传入数据作为参数来运行每个处理程序。
  3. on,为事件创建一个数组(若不存在则为空数组),然后.push()将处理程序添加到该数组。
  4. off,用.findIndex()在事件数组中查找处理程序的索引,并使用.splice()删除。

用法:

6.`memoize`:缓存函数

通过实例化一个Map对象来创建一个空的缓存。

通过检查输入值的函数输出是否已缓存,返回存储一个参数的函数,该参数将被提供给已记忆的函数;如果没有,则存储并返回它。

Ps: 这个版本可能不是很清晰,还有Vue源码版的:

7. `once`:只调用一次的函数

8.`flattenObject`:以键的路径扁平化对象

使用递归。

  1. 利用Object.keys(obj)联合Array.prototype.reduce(),以每片叶子节点转换为扁平的路径节点。
  2. 如果键的值是一个对象,则函数使用调用适当的自身prefix以创建路径Object.assign()。
  3. 否则,它将适当的前缀键值对添加到累加器对象。
  4. prefix除非您希望每个键都有一个前缀,否则应始终省略第二个参数。

9. `unflattenObject`:以键的路径展开对象

与上面的相反,展开对象。

这个的用途,在做Tree组件或复杂表单时取值非常舒服。

3. 第三部分:字符串

1.`byteSize`:返回字符串的字节长度

2. `capitalize`:首字母大写

3. `capitalizeEveryWord`:每个单词首字母大写

4. `decapitalize`:首字母小写

5. `luhnCheck`:银行卡号码校验(`luhn`算法)

Luhn算法的实现,用于验证各种标识号,例如信用卡号,IMEI号,国家提供商标识号等。

与String.prototype.split(”)结合使用,以获取数字数组。获得最后一个数字。实施luhn算法。如果被整除,则返回,否则返回。

用例:

补充:银行卡号码的校验规则:

关于luhn算法,可以参考以下文章:

银行卡号码校验算法(Luhn算法,又叫模10算法)

银行卡号码的校验采用Luhn算法,校验过程大致如下:

  1. 从右到左给卡号字符串编号,最右边第一位是1,最右边第二位是2,最右边第三位是3….
  2. 从右向左遍历,对每一位字符t执行第三个步骤,并将每一位的计算结果相加得到一个数s。
  3. 对每一位的计算规则:如果这一位是奇数位,则返回t本身,如果是偶数位,则先将t乘以2得到一个数n,如果n是一位数(小于10),直接返回n,否则将n的个位数和十位数相加返回。
  4. 如果s能够整除10,则此号码有效,否则号码无效。

因为最终的结果会对10取余来判断是否能够整除10,所以又叫做模10算法。

当然,还是库比较香: bankcardinfo

JavaScript 工具函数大全

6. `splitLines`:将多行字符串拆分为行数组。

使用String.prototype.split()和正则表达式匹配换行符并创建一个数组。

7. `stripHTMLTags`:删除字符串中的`HTMl`标签

从字符串中删除HTML / XML标签。

使用正则表达式从字符串中删除HTML / XML 标记。

4. 第四部分:对象

1. `dayOfYear`:当前日期天数

2. `forOwn`:迭代属性并执行回调

3. `Get Time From Date`:返回当前24小时制时间的字符串

4. `Get Days Between Dates`:返回日期间的天数

5. `is`:检查值是否为特定类型。

6. `isAfterDate`:检查是否在某日期后

7. `isBeforeDate`:检查是否在某日期前

8 `tomorrow`:获取明天的字符串格式时间

9. `equals`:全等判断

在两个变量之间进行深度比较以确定它们是否全等。

此代码段精简的核心在于Array.prototype.every()的使用。

用法:

5. 第五部分:数字

1. `randomIntegerInRange`:生成指定范围的随机整数

2. `randomNumberInRange`:生成指定范围的随机小数

3. `round`:四舍五入到指定位数

4. `sum`:计算数组或多个数字的总和

5. `toCurrency`:简单的货币单位转换

6. 第六部分:浏览器操作及其它

1. `bottomVisible`:检查页面底部是否可见

2. `Create Directory`:检查创建目录

此代码段调用fs模块的existsSync()检查目录是否存在,如果不存在,则mkdirSync()创建该目录。

3. `currentURL`:返回当前链接`url`

4. `distance`:返回两点间的距离

该代码段通过计算欧几里得距离来返回两点之间的距离。

5. `elementContains`:检查是否包含子元素

此代码段检查父元素是否包含子元素。

6. `getStyle`:返回指定元素的生效样式

7. `getType`:返回值或变量的类型名

8. `hasClass`:校验指定元素的类名

9. `hide`:隐藏所有的指定标签

10. `httpsRedirect`:`HTTP` 跳转 `HTTPS`

11.`insertAfter`:在指定元素之后插入新元素

12.`insertBefore`:在指定元素之前插入新元素

13. `isBrowser`:检查是否为浏览器环境

此代码段可用于确定当前运行时环境是否为浏览器。这有助于避免在服务器(节点)上运行前端模块时出错。

14. ` isBrowserTab`:检查当前标签页是否活动

15. `nodeListToArray`:转换`nodeList`为数组

16. `Random Hexadecimal Color Code`:随机十六进制颜色

17. `scrollToTop`:平滑滚动至顶部

该代码段可用于平滑滚动到当前页面的顶部。

18. `smoothScroll`:滚动到指定元素区域

该代码段可将指定元素平滑滚动到浏览器窗口的可见区域。

19. `detectDeviceType`:检测移动/PC设备

20. `getScrollPosition`:返回当前的滚动位置

默认参数为window ,pageXOffset(pageYOffset)为第一选择,没有则用scrollLeft(scrollTop)

21. `size`:获取不同类型变量的长度

这个的实现非常巧妙,利用Blob类文件对象的特性,获取对象的长度。

另外,多重三元运算符,是真香。

22. `escapeHTML`:转义`HTML`

当然是用来防XSS攻击啦。

未经允许不得转载:一点博客-青梅煮码-共享博客 » JavaScript 工具函数大全
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏