前端小姐姐五万字面试宝典：高级技巧

菜小编

2020-4-13

WEB前端开发

1.防抖节流

(1).节流

在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

(2). 防抖

按最后一次算。比如说“停止输入5s后才发送请求”

3.数组展开

1.递归

微信公众号：世界上有意思的事

function flat1 (arr) {
    let result = []
    arr.forEach(element => {
        if (Array.isArray(element)) {
            result = result.concat(flat1(element))
        } else {
            result.push(element)
        }
    });
    return result
}
复制代码

2.toString

function flat2 (arr) {
    // 有缺陷，toString 后无法保持之前的类型
    return arr.toString().split(',')
}
复制代码

3.reduce

微信公众号：世界上有意思的事

function flat3 (arr) {
    // 本质和 flat1 一样的，都是递归
    return arr.reduce((pre, next) => {
        return pre.concat(Array.isArray(next) ? flat3(next) : next)
    }, [])
}
复制代码

4.rest运算符

微信公众号：世界上有意思的事

function flat4 (arr) {
    while (arr.some(item => Array.isArray(item))) {
        // 相当于 [].concat('1', 2, [3, 4])
        // concat 方法本身就会把参数中的数组展开
        arr = [].concat(...arr);
    }
    return arr;
}
复制代码

5.ES6 flat

微信公众号：世界上有意思的事

function flat5 (arr: any[]) {
    // flat() 方法会移除数组中的空项
    return arr.flat(Infinity)
}
复制代码

4.拖放

微信公众号：世界上有意思的事

var DragDrop = function(){
  var dragging = null; 
  function handleEvent(event){
    
    //获取事件和目标
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    
    //确定事件类型 
    switch(event.type){
      case "mousedown":
        if (target.className.indexOf("draggable") > -1){
          dragging = target; 
        }
        break;
      case "mousemove":
        if (dragging !== null){ 
          //指定位置
          dragging.style.left = event.clientX + "px";
          dragging.style.top = event.clientY + "px";
        }
        break;
      case "mouseup": 
        dragging = null;
        break; 
    }
  };
  //公共接口 
  return {
    enable: function(){
      EventUtil.addHandler(document, "mousedown", handleEvent);
      EventUtil.addHandler(document, "mousemove", handleEvent);
      EventUtil.addHandler(document, "mouseup", handleEvent);
    },
    disable: function(){
      EventUtil.removeHandler(document, "mousedown", handleEvent);
      EventUtil.removeHandler(document, "mousemove", handleEvent);
      EventUtil.removeHandler(document, "mouseup", handleEvent);
    }
  }
}();
复制代码

1.DragDrop 对象封装了拖放的所有基本功能。这是一个单例对象，并使用了模块模式来隐藏某些实现细节。dragging 变量起初是 null，将会存放被拖动的元素，所以当该变量不为 null 时，就知道正在拖动某个东西。handleEvent()函数处理拖放功能中的所有的三个鼠标事件。它首先获取 event 对象和事件目标的引用。之后，用一个 switch 语句确定要触发哪个事件样式。当 mousedown 事件发生时，会检查 target 的 class 是否包含"draggable"类，如果是，那么将 target 存放到 dragging 中。这个技巧可以很方便地通过标记语言而非 JavaScript 脚本来确定可拖动的元素。
2.handleEvent()的 mousemove 情况和前面的代码一样，不过要检查 dragging 是否为 null。当它不是 null，就知道 dragging 就是要拖动的元素，这样就会把它放到恰当的位置上。mouseup 情况就仅仅是将 dragging 重置为 null，让 mousemove 事件中的判断失效。
3.DragDrop 还有两个公共方法:enable()和 disable()，它们只是相应添加和删除所有的事件处理程序。这两个函数提供了额外的对拖放功能的控制手段。
4.要使用 DragDrop 对象，只要在页面上包含这些代码并调用 enable()。拖放会自动针对所有包含 "draggable"类的元素启用，如下例所示:
```
<div class="draggable" style="position:absolute; background:red"> </div>
复制代码
```
注意为了元素能被拖放，它必须是绝对定位的。

5.once

微信公众号：世界上有意思的事

function once (func) {
  var done;
  return function () {
    if (!done) {
      func.apply(null, arguments)
      done = true
    }
  }
}
复制代码

微信公众号：世界上有意思的事

function onlyDoOne = once(function() {
  console.log('1')
})
复制代码

6.promise

Promise 是一个对象，保存着未来将要结束的事件，她有两个特征:

1.对象的状态不受外部影响，Promise 对象代表一个异步操作，有三种状态，pending进行中，fulfilled已成功，rejected已失败，只有异步操作的结果，才可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也就是promise名字的由来
2.一旦状态改变，就不会再变，Promise对象状态改变只有两种可能，从pending改到fulfilled或者从pending改到rejected，只要这两种情况发生，状态就凝固了，不会再改变，这个时候就称为定型resolved

7.sleep

用 Promise

function sleep (ms) {
  return new Promise((resolve) => {
    window.setTimeout(resolve, ms)
  })
}

sleep(1000).then(()=>{
  console.log('已经 sleep 1000ms')
})
复制代码

function sleep (ms) {
  return new Promise((resolve) => {
    window.setTimeout(resolve, ms)
  })
}

// 使用async/await调用
async function test () {
  var example = await sleep(1000)
  console.log('已经 sleep 1000ms')
}
复制代码

// 使用 generator 定义 sleep 函数
function *sleep (ms) {
  yield new Promise((resolve) => {
    window.setTimeout(resolve, ms)
  })
}
sleep(1000).next().value.then(()=>{
  console.log('已经 sleep 1000ms')
})

作者：何时夕
链接：https://juejin.im/post/5e91b01651882573716a9b23
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

THE END