JS问题总结

1.js如何通过变量调用函数，函数名在变量里面。

// 赋值函数名称
// 有时候函数名是动态定义的，这时候我们就需要用到这个方法了。
var a    =    "b";
// 定义函数
function b(){
    alert(123);
}
// 通过变量调用函数
// 其实主要就是eval() 函数，这个就是调用变量内容作为函数名。
eval(a+'()');

2.js的数据填充

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

3.如何将数组平均分成num组 修改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将一个数组分成多个数组

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删除指定元素

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

6.前端时间格式

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.添加前置0(补零)

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

8.js将对象数据根据属性归类分成多个数组

js代码

//数据归类方法
funtion classify(arr, key) {
  let kind = []; //存放属性标识
  let newArr = []; //返回的数据
  arr.map((item) => {
    // 判断key是否存在，不存在则添加
    if (!kind.includes(item[key])) {
      kind.push(item[key]); //kind添加新标识
      newArr.push([]); //添加数组
    }
    let index = kind.indexOf(item[key]); //返回带有标识在kind内的下标，判断加入哪个数组
    newArr[index].push(item); //将对象存入数组
  });
  return newArr;
}

调用

//测试数据
let testArr = [
    {name:"张三",age:"18",gender:"男"},
    {name:"李四",age:"22",gender:"男"},
    {name:"王五",age:"17",gender:"女"},
    {name:"刘丽",age:"18",gender:"女"},
    {name:"李磊",age:"22",gender:"男"},
    {name:"杨梅",age:"18",gender:"女"}
];
 
//调用方法，对象被判断的属性值相同，则在同个数组内
let sameType = [];
//单次调用，输出二维数组
sameType.push(classify(testArr,"age"));
console.log(sameType);
//循环调用，可判断多个属性，输出多维数组
classify(testArr,"age").map((item) = {
    sameType.push(classify(item,"gender"))
});  
console.log(sameType);

9.js生成HTML文档标签 很重要

<template>
    <div id="executeScript" style="display: none;" class="graph-tooltip">
</template>
<script>
// js代码
let tooltipEl = document.getElementById('executeScript')
// 清空子标签
tooltipEl.innerHTML = ''
const delLi = document.createElement("li");
    delLi.innerText = "删除";
    delLi.style.display = 'block'
    delLi.style.cursor = 'pointer'
    delLi.addEventListener("click", function (ev) {
    tooltipEl.style.display = "none";
    // 执行vue的代码
    _this.$message("删除成功")
})
// 设置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>

 Js 字符串方法

filter() 过滤方法

返回值为真则保留这个值

// 过滤大于0
jsString = jsString.filter(item => {
    return item > 0
});
// 找到城市为山东的
jsString = jsString.filter(item => {
    return item.city === '山东'
});

unshift(param) 

将把它的参数插入 arrayObject 的头部

var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)

sort() 

排序

// 如果升序排序则
Array.sort(function(a, b) {
  return a - b
})
// 如果降序排序则
Array.sort(function(a, b) {
  return b - a
})

// 按照key值排序
Array.sort(function(obj1, obj2) {
  let val1 = obj1.key
  let val2 = obj2.key
  return val1 - val2
})

字符转化成数字数组

a="1,2,3,4,5" //  ''.split(',')会返回[""],此时再.map[Number]会返回[0]
if (a == '') {
    b=[]
} else {
    b=a.split(",") // ["1", "2", "3", "4", "5"]
    b.map(Number) // [1, 2, 3, 4, 5]
}

JavaScript Array includes() 方法

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob'); 
// true 
 
site.includes('baidu'); 
// false

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

一个数组中的对象的key值相等的对象合成一个对象,循环Map

// 将id相同的进行合并
let chartDatas = this.groupBy(results, item => item.id);

groupBy(array, f) {
        //初始化 Map, 用来存储键值对
        let map = new Map();
        array.forEach(function(obj) {
          //根据传入的函数，对数组中的每一个对象产生一个 key值，并将key值相等的对象分为一组
          let key = f(obj);
          map.set(key, (map.get(key) || []));
          map.get(key).push(obj);
        });
        return map;
      },

for (var [key, value] of chartDatas) {
    let k = key;
    let v = value;
    console.log('key: ' + k + ' value: ' + v);
}