1.0.1 • Published 3 years ago

wk_utils v1.0.1

Weekly downloads
46
License
MIT
Repository
-
Last release
3 years ago

函数防抖与节流

函数节流( 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())

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