wslong20_utils

2020-10-08王菜鸟训练打包第一次提交

Usage no npm install needed!

<script type="module">
  import wslong20Utils from 'https://cdn.skypack.dev/wslong20_utils';
</script>

README

1. 函数的call() / apply() / bind()

1. 区别call()/apply()/bind()
    call(obj)/apply(obj): 调用函数, 指定函数中的this为第一个参数的值
    bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值
    注意: 如果obj是null/undefined, this为window
2. 应用
    call()/bind()应用: 根据伪数组生成真数组
    bind(): react中组件的自定义方法 / vue中的事件回调函数内部
3. 自定义call()/apply()
    1). 给obj添加一个临时方法, 方法名任意, 值为当前函数
    2). 通过obj调用这个临时方法, 并将接收的参数传入
    3). 删除obj上的这个临时方法属性
4. 自定义实现bind()
    1). 返回一个新函数
    2). 在新函数内部通过原函数对象的call方法来执行原函数
        指定原函数的this为obj
        指定参数为bind调用的参数和后面新函数调用的参数

2. 函数的节流(throttle)与防抖(debounce)

1. 事件频繁触发可能造成的问题?
    1). 一些浏览器事件:window.onresize、window.mousemove等,触发的频率非常高,会造成浏览器性能问题
    2). 如果向后台发送请求,频繁触发,对服务器造成不必要的压力
2. 如何限制事件处理函数频繁调用
    1). 函数节流
    2). 函数防抖
3. 函数节流(throttle)
    1). 理解: 
        在函数需要频繁触发时: 函数执行一次后,只有大于设定的执行周期后才会执行第二次
        适合多次事件按时间做平均分配触发
    2). 场景:
        窗口调整(resize)
        页面滚动(scroll)
        DOM 元素的拖拽功能实现(mousemove)
        抢购疯狂点击(click)
4. 函数防抖(debounce)
    1). 理解:
        在函数需要频繁触发时: 在规定时间内,只让最后一次生效,前面的不生效。
        适合多次事件一次响应的情况
    2). 场景:
        输入框实时搜索联想(keyup/input)

3. 数组声明式系列方法

1. 区别命令式与声明式
2. 使用数组声明式系列方法
    1). map()
    2). reduce()
    3). filter()
    4). find()
    5). findIndex()
    6). every()
    7). some()
3. 自定义数组声明式系列方法