超实用的js处理方法

这是我参与新手入门的第3篇文章

本文适用于js方法不熟悉的前端童鞋查漏补缺，方法很多，这里只提供最简洁有效的一种

一.数组去重

function unique (arr) {
  return Array.from(new Set(arr))
}

二.tree结构与list结构互相转化

后台返回的list数据

let refs = [
 { "id": "1","name": "张三", "parentIp": "11" },
 { "id": "2", "name": "李四", "parentIp": "12"},
 { "id": "3", "name": "王五","parentIp": "13" },
]

转换为tree结构

function listToTree(list, parentIp = null) {
  return list.filter(item => item.parentIp === parentIp).map(item => ({
    ...item,
    children: listToTree(list, item.name)
  }));
}

tree结构转化为list结构

function treeToArray(list, newArr = []) {
  list.forEach((item) => {
    const { children } = item;
    if (children) {
      delete item.children;

      if (children.length) {
        newArr.push(item);
        return treeToArray(children, newArr);
      }
    }
    newArr.push(item);
  });
  return newArr;
}

三.函数珂里化

指的是将一个接受多个参数的函数变为接受一个参数返回一个函数的固定形式，这样便于再次调用，例如f(1)(2)

实现add(1)(2)(3)(4)=10; add(1)(1,2,3)(2)=9;

function add() {
  const _args = [...arguments];
  function fn() {
    _args.push(...arguments);
    return fn;
  }
  fn.toString = function() {
    return _args.reduce((sum, cur) => sum + cur);
  }
  return fn;
}

四.函数防抖（debounce）

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间

const debounce = (fn, time) => {
  let timeout = null;
  return function() {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, time);
  }
}

防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

五.函数节流（throttle）

高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率。

const throttle = (fn, time) => {
  let flag = true;
  return function() {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      flag = true;
    }, time);
  }
}

节流常应用于鼠标不断点击触发、监听滚动事件。

六.获取url中的参数

const params = new URLSearchParams(location.search)
params.get(key)

七.判断浏览器

function getOs() {
if (navigator.userAgent.indexOf("MSIE 8.0") > 0) {
   return "MSIE8";
}
else if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
   return "MSIE6";
}
else if (navigator.userAgent.indexOf("MSIE 7.0") > 0) {
   return "MSIE7";
}
else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
   return "Firefox";
}
if (navigator.userAgent.indexOf("Chrome") > 0) {
   return "Chrome";
}
else {
   return "Other";
}
}