npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wk_utils

v1.0.1

Published

一个轻便、快捷、实用的成长型自定义工具函数库

Downloads

2

Readme

函数防抖与节流

函数节流( throttle ): 函数在执行一次后,只有大于设定的执行周期才会执行第二次
适合多次事件按时间平均分配触发
应用场景有:窗口变化( resize )、页面滚动( scroll ) 和 抢购疯狂点击等

使用方法:
document.getElementById('throttle').onclick = wkUtils.throttle(function(e){
    console.log(e)
}, 1000)

函数防抖( debounce ): 在规定时间内,只让最后一次生效,前面的都不生效
适合多次事件一次响应的情况
主要场景有:输入框实时搜索联想

使用方法:
document.getElementById('debounce').onclick = wkUtils.debounce(function(e){
    console.log(e)
}, 1000)

数组排序

1.冒泡排序 ( bubbleSort )
    重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来。
    走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。
    这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
2. 选择排序 ( selectionSort )
    工作原理:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,
    再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。以此类推,直到所有元素均排序完毕。
3. 快速排序 ( quickSort )
    基本思想:通过一趟排序将待排记录分隔成独立的两部分,其中一部分记录的关键字均比另一部分的关键字小,
    则可分别对这两部分记录继续进行排序,以达到整个序列有序。
4. 插入排序 ( insterSort / insterSort_for)
    重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来。
    走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。
    这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
5. 希尔排序 ( shellSort )
    第一个突破O(n2)的排序算法,是简单插入排序的改进版。它与插入排序的不同之处在于,它会优先比较距离较远的元素。
    希尔排序又叫缩小增量排序。
6. 归并排序 ( mergeSort )
    建立在归并操作上的一种有效的排序算法。该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。
    将已有序的子序列合并,得到完全有序的序列;即先使每个子序列有序,再使子序列段间有序。
    若将两个有序表合并成一个有序表,称为2-路归并。

使用方法: wkUtils.bubbleSort(arr)/selectionSort(arr)/quickSort(arr)/insterSort(arr)/shellSort(arr)/mergeSort(arr)

数组去重

1. forEach 实现 数组去重

使用方法:
console.log(wkUtils.unique_for([1,1,2,3,88,99,45,3,4,5,88,6,3,20,6]))

2. ES6 语法 Set 实现 数组去重

使用方法:
console.log(wkUtils.unique_for([1,1,2,3,88,99,45,3,4,5,88,6,3,20,6]))

求数组差异

difference:得到当前数组中 不在 arrays 中的元素组成新数组
例如:[1,3,5,7] [5,8] [7,9] ==> [1,3]

使用方法: 
console.log(wkUtils.difference([1,3,5,7],[5,8],[7,9]))

多个数组合并

mergeArray:得到当前数组中 不在 arrays 中的元素组成新数组
例如:[1,3,5,7] [5,8] [7,9] ==> [1,3,5,7,8,9]

使用方法: 
console.log(wkUtils.mergeArray([1,3,5,7],[5,8],[7,9]))

合并多个对象

mergeObject: 合并多个对象, 得到一个新对象
例如:{ a:[{x:1}, {y:2}], b: 1}, { a: {z: 3}, b: [2, 3] }, {c: '123'}
      ==> { a: [{x:1}, {y:2}, {z:3}], b: [1, 2, 3], c: '123' }

使用方法: 
console.log(wkUtils.mergeObject({a:[{x:1}, {y:2}], b: 1}, {a: {z: 3}, b: [2, 3]}, {c: '123'}))

浅拷贝/克隆

这里就不再写工具函数了,比较简单,就在此简单列举一下:
数组浅克隆:[...array]、slice、filter、concat、map 等等
对象浅克隆:{...object}、这写一层 for 循环
数组和对象通用方法:for in 

深拷贝/克隆

深拷贝注意几个问题:
1. 属性丢失的问题
    使用 JSON.stringify 深拷贝,属性值为函数时属性会丢失,为正则时会转为空对象,为 new Date() 时会转为字符串
2. 循环引用问题
    一般会想到递归去处理深拷贝,但切记需特殊处理,否则会引起循环引用,导致栈溢出。

使用方法:
let obj = {
    a: 1,
    b: ['x','y','z'],
    c: { h:{i: 2} },
    d: function(){}
}
// 模拟循环引用
obj.b.push(obj.c)
obj.c.j = obj.b;

let obj2 = wkUtils.deepClone(obj)
console.log(obj2, obj.c == obj2.c)

自定义栈类型: Stack ( 使用数组模拟实现 )

特点: 先进后出,后进先出
主要功能方法包括: 压栈(push())、出栈(pop())、查看栈项(peek())、栈中元素个数(size())、是否是空栈(isEmpty())

使用方法:
const stack = new wkUtils.Stack();
stack.push(5)
stack.push(7)
stack.push(9)
console.log(stack.peek(), stack.size(), stack.isEmpty())
stack.pop()
console.log(stack.peek(), stack.size(), stack.isEmpty())

栈应用: 封装一个功能函数 dec2bin(): 十进制( decimal )转二进制( binary )
使用方法: console.log( wkUtils.dec2bin(10) ); ==> 23 1100100

自定义普通队列类型: Queue

特点: 先进先出,后进后出
主要功能方法包括: 入队列(enQueue)、出队列(deQueue)、查看对头(front())、
                查看元素个数(size())、判断队列是否为空( isEmpty())

使用方法:
const queue = new wkUtils.Queue();
queue.enQueue('A')
queue.enQueue('B')
queue.enQueue('C')
queue.enQueue('D')
queue.enQueue('E')

console.log(queue.front(), queue.size(), queue.isEmpty())
console.log(queue.deQueue())
console.log(queue.deQueue())
console.log(queue.deQueue())

队列应用: 实现一个 击鼓传花 的游戏函数