JS problem summary

1.js How to call functions through variables , The function name is in the variable .

//  Assignment function name 
//  Sometimes function names are dynamically defined , At this time, we need to use this method .
var a    =    "b";
//  Defined function 
function b(){
    alert(123);
}
//  Call functions through variables 
//  In fact, the main thing is eval()  function , This is to call the variable content as the function name .
eval(a+'()');

2.js Data filling

//  Method 1
let res = [];
res.push([result[i].regionName, result[i].nums]); 
//  Method 2
let res1 = [];
res1.push({ name: result[i].className, value: result[i].nums });
//  Method 3
let res2 = [];
res2["name"] = ' Haha, strange ';
res2["nums"] = 1000;

3. How to divide an array equally num Group modify num

let len = result.length;
let legendData = [];
let legendData2 = [];
let num = 2;
for (let i = 0, size = len; i < size; i++) {
    if(i%num == 0){
        legendData.push(result[i].ruleName);
    } else {
        legendData2.push(result[i].ruleName);
    }
}

4.js Divide an array into multiple arrays

function group(array, subGroupLength) {
        let newArray = [];
        newArray.push(array.slice(0, subGroupLength));
        newArray.push(array.slice(subGroupLength, array.length));
        return newArray;
      }
function group1(array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while(index < array.length) {
          newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
  }

5.js Deletes the specified element

function removeByValue(arr, val) {
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == val) {
            arr.splice(i, 1);
            break;
          }
        }
      };

6. Front end time format

format(time, format) {
        var t = new Date(time);
        var tf = function(i) {
          return (i < 10 ? '0' : '') + i
        };
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {
          switch (a) {
            case 'yyyy':
              return tf(t.getFullYear());
              break;
            case 'MM':
              return tf(t.getMonth() + 1);
              break;
            case 'mm':
              return tf(t.getMinutes());
              break;
            case 'dd':
              return tf(t.getDate());
              break;
            case 'HH':
              return tf(t.getHours());
              break;
            case 'ss':
              return tf(t.getSeconds());
              break;
          }
        })
      },

7. Add front 0( Zero compensation )

('000000000'+num).slice(-10);

8.js Classify the object data into multiple arrays according to attributes

js Code

// Data classification method 
funtion classify(arr, key) {
  let kind = []; // Storage attribute identification 
  let newArr = []; // Returned data 
  arr.map((item) => {
    //  Judge key Whether there is , Add if not 
    if (!kind.includes(item[key])) {
      kind.push(item[key]); //kind Add a new logo 
      newArr.push([]); // Add an array 
    }
    let index = kind.indexOf(item[key]); // Return with identification on kind Subscript inside , Determine which array to add 
    newArr[index].push(item); // Store objects in an array 
  });
  return newArr;
}

call

// Test data 
let testArr = [
    {name:" Zhang San ",age:"18",gender:" male "},
    {name:" Li Si ",age:"22",gender:" male "},
    {name:" Wang Wu ",age:"17",gender:" Woman "},
    {name:" Liu Li ",age:"18",gender:" Woman "},
    {name:" Li Lei ",age:"22",gender:" male "},
    {name:" Arbutus ",age:"18",gender:" Woman "}
];
 
// Calling method , The object is judged to have the same attribute value , In the same array 
let sameType = [];
// Single call , Output two-dimensional array 
sameType.push(classify(testArr,"age"));
console.log(sameType);
// Cycle call , Multiple attributes can be judged , Output multidimensional array 
classify(testArr,"age").map((item) = {
    sameType.push(classify(item,"gender"))
});  
console.log(sameType);

9.js Generate HTML Document labels Very important

<template>
    <div id="executeScript" style="display: none;" class="graph-tooltip">
</template>
<script>
// js Code 
let tooltipEl = document.getElementById('executeScript')
//  Clearance sub label 
tooltipEl.innerHTML = ''
const delLi = document.createElement("li");
    delLi.innerText = " Delete ";
    delLi.style.display = 'block'
    delLi.style.cursor = 'pointer'
    delLi.addEventListener("click", function (ev) {
    tooltipEl.style.display = "none";
    //  perform vue Code for 
    _this.$message(" Delete successful ")
})
//  Set up css
// const cssText = 'display: block;cursor: pointer;'
// delLi.style.cssText = cssText

tooltipEl.style.width = '180px'
tooltipEl.style.left = event.canvasX + 295 + "px";
tooltipEl.style.top = event.canvasY  + "px";
tooltipEl.style.display = "block";
</script>
<style>
  .graph-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    position: absolute
  }
</style>