自己没事时看看

1.设计一个方法提取对象中所有value大于2的键值对并返回最新的对象

var obj = {a: 1, b: 3, c:4};
foo(obj); // {b: 3, c: 4}

foo(obj) {
    return Object.fromEntries(
      Object.entries(obj).filter(([key, value]) => value > 2)
    )
}

2.用正则写一个根据name获取cookie中的值的方法

function getCookie(name) {
  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)'));
  if (match) return unescape(match[2]);
}

• 每个cookie都是由name=value这样的形式存储的
• 每一项的开头可能是一个空串' ',
• 每一项都是用";"来区分
• =([^;]*) 这里匹配的就是=后面的值,^要是放在[]里就表示"除了^后面的内容都能匹配", 也就是非的意思,所以这里([^;]*)表示除了";"这个字符串别的都匹配 0或多次
• 最后match是一个长度为4的数据如[usrername=xxxx, '', 'xxxx', ';']
• 为了防止获取到的值是%xx 这样的字符序列,需要用unescape()解法解码

3. 实现一个拖拽写法

1. event的兼容性
   • 其它浏览器window.event
   • 火狐下没有window.event,所以用传入的参数ev代替
   • 最终写法: var Oevent = ev || window.event
2. 实现拖拽的gkwre哪些(box为需要拖拽的元素)
   • box.onmousefown
   • document.onmousemove
   • document.onmouseup
3. 实现的事件顺序
   • 首先监听box.onmousedown, 即鼠标按下box时触发的事件,记录下鼠标按下时距离屏幕上边和左边的距离,以及box距离屏幕上边和左边的距离.再用前者减去后者得到的差值distanceX和distanceY
   • 然后在此事件中监听document.onmousemove事件,记录下每美次鼠标移动时距离屏幕上边和左边的距离,然后用它们减去distanceX,distanceY,再将其赋值给box的left和top.使其能跟着鼠标移动
   • 不过需要考虑box距离屏幕最上面/下面/左边/右边的边界情况
   • 当document.onmouseuo的时候需要将document.onmousemove事件设置为null
   • 如下图

style{
    html, body {
    margin: 0;
    height: 100%;
  }
  #box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 100px;
  }
}

html

<div id="box"></div>

js:

window.onload = function () {
  var box = document.getElementById('box');
  box.onmousedown = function (ev) {
    var oEvent = ev || window.event; // 兼容火狐,火狐下没有window.event
    var distanceX = oEvent.clientX - box.offsetLeft; // 鼠标到可视区左边的距离 - box到页面左边的距离
    var distanceY = oEvent.clientY - box.offsetTop;
    document.onmousemove = function (ev) {
      var oEvent = ev || window.event;
      var left = oEvent.clientX - distanceX;
      var top = oEvent.clientY - distanceY;
      if (left <= 0) {
        left = 0;
      } else if (left >= document.documentElement.clientWidth - box.offsetWidth) {
        left = document.documentElement.clientWidth - box.offsetWidth;
      }
      if (top <= 0) {
        top = 0;
      } else if (top >= document.documentElement.clientHeight - box.offsetHeight) {
        top = document.documentElement.clientHeight - box.offsetHeight;
      }
      box.style.left = left + 'px';
      box.style.top = top + 'px';
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
}

4.多维数组转一维数组

deepFlatten = arr => [].concat(...arr.map((v: any) => (Array.isArray(v) ? deepFlatten(v) : v)));

5.两个数组交集

similarity = (arr, values) => arr.filter(v => values.include(v));

6.JS对象转为url查询字符串

objectToQueryUrl = (obj) => Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');