Super practical JS processing method

This is my third article about getting started

This article is applicable to the JS method is not familiar with the front of the children’s shoes to check the gap, there are many methods, here only to provide the most concise and effective one

Array deduplication

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

The tree structure and the list structure are transformed into each other

The list data returned in the background

Let refs = [{" id ":" 1 ", "name" : "zhang", "parentIp" : "11"}, {" id ":" 2 ", "name" : "bill", "parentIp" : "12"}, {" id ": "3", "parentIp": "13"},]Copy the code

Convert to a tree structure

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

The tree structure is converted to the list structure

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;
}
Copy the code

The function is callified

Refers to changing a function that takes multiple arguments into a fixed form that takes one argument and returns one function, so that it can be called again, e.g. F (1)(2)

Add (1) (2) (3) (4) = 10; Add (1) (1, 2, 3) and (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; }Copy the code

Iv. Function debounce

The function is executed only once within n seconds after the high frequency time is triggered. If the high frequency time is triggered again within n seconds, the time is recalculated

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

The anti – shake function is usually used to save resources when the user enters a search request. The anti – shake function is triggered only once when the Window triggers the REsize event.

5. Function throttle

High frequency time triggers, but only executes once in n seconds, so throttling dilutes the execution frequency of the function.

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

Throttling is often used to listen for scrolling events triggered by repeated mouse clicks.

Get parameters in the URL

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

Judge the browser

The function getOs () {if (the navigator. UserAgent. IndexOf (" MSIE 8.0) > 0) {return "MSIE8"; } else if (the navigator userAgent. IndexOf (" MSIE 6.0) > 0) {return "MSIE6"; } else if (the 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"; }}Copy the code