总结js使用工具函数

夏天爱劳动

已于 2024-05-30 21:02:13 修改

阅读量258

点赞数 1

文章标签：前端

于 2022-04-27 11:41:11 首次发布

本文链接：https://blog.csdn.net/weixin_53504747/article/details/124447186

版权

1.两个数组删除，（删除一个数组中，包含的内一个数组的值）

    //删除
    //arr数组集合[{}]   delArr要删除的数组[]
    deleteRow(arr) {
      const delArr = this.$refs.xGrid.getCheckboxRecords();
      return delArr
        .map(n => n.__ob__.dep.id)
        .forEach(n => {
          arr.some((item, index) => {
            if (item.__ob__.dep.id == n) {
              arr.splice(index, 1);
            }
          });
        });
    },

2.数组对象通过某个字段去重

    //筛选发货批次   修改发货日期
    unique(arr, attrName) {
      const res = new Map();
      return arr.filter(
        a =>
          !res.has(a[attrName]) && res.set(a[attrName], 1)
      );
    },
//调用
 this.unique(this.ruleForm.tableData3, "batchNO");

3.el-table分页是使用复选框，存储分页选中的值

   // 记忆选择核心方法
    changePageCoreRecordData() {
      // 标识当前行的唯一键的名称
      let idKey = "mainLineid";
      let that = this;
      // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
      if (this.multipleSelectionAll.length <= 0) {
        this.multipleSelectionAll = this.multipleSelection5;
        return this.multipleSelectionAll;
      }
      // 总选择里面的key集合
      let selectAllIds = [];
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
let selectIds = [];
      // 获取当前页选中的id
      this.multipleSelection5.forEach(row => {
        selectIds.push(row[idKey]);
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.multipleSelectionAll.push(row);
        }
      });
      let noSelectIds = [];
      // 得到当前页没有选中的id
      this.tableData.forEach(row => {
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey]);
        }
      });
 noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.multipleSelectionAll.length; i++) {
            if (that.multipleSelectionAll[i][idKey] == id) {
              // 如果总选择中有未被选中的，那么就删除这条
              that.multipleSelectionAll.splice(i, 1);
              break;
            }
          }
        }
      });

      return that.multipleSelectionAll;
    },

4.转化默认日期

    //转换默认日期
    formatDateTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      return y + "-" + m + "-" + d;
    },

5.计算对象数组中某个属性合计

 //计算对象数组中某个属性合计
    countTotal(arr, keyName) {
      let $total = 0;
      $total = arr.reduce(function(total, currentValue, currentIndex, arr) {
        return currentValue[keyName]
          ? total + Number(currentValue[keyName])
          : total;
      }, 0);
      return $total;
    },

6.数组对象去重

 //数组对象去重
      let nArr = table3.filter((element, index, self) => {
        return self.findIndex(x => x.name === element.name) === index;
      });

7.适用于将任何时间转化成想要的日期格式

// 处理时间 格式化
const timeFormat = function (dateTime = null, fmt = 'yyyy-mm-dd') {
    // 如果为null,则格式化当前时间
    if (!dateTime) return '';
    // 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
    if (dateTime.toString().length == 10) dateTime *= 1000;
    let date = new Date(dateTime);
    let ret;
  let opt = {
        "y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "h+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "s+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}
export default {
    timeFormat
}


//main.js
import CommonFunction from '@/utils/publicFun.js';   //引入文件
Vue.prototype.$CommonFunction = CommonFunction;   // 绑定到vue上面

//使用
this.$CommonFunction.timeFormat(
          redata.dealTime,
            "yyyy-mm-dd hh:MM"
          )}

8.将数组中只出现过一次的值去掉

     //调用l去重
      let list = this.unique(this.getItemList, "code");//见上面数组去重的方法
      // 剔除只出现一次的子
      let List = JSON.parse(JSON.stringify(list));
      for (let x = 0; x < list.length; x++) {
        let num = 0; // 表示出现的次数 只出现1次的可以剔除了
        for (let y = 0; y < this.getItemList.length; y++) {
          if (this.getItemList[y].code === list[x].code) {
            num += 1;
          }
        }
    if (num === 1) {
          // 只重复1次 获取下标 然后移除
          let ind = List.findIndex(item => {
            return item.code === list[x].code;
          });
          List.splice(ind, 1);
        }
      }

9.随机取出数组中的值，并满足不重复

    //处理颜色
    getExtract(array) {
      const random = (min, max) =>
        Math.floor(Math.random() * (max - min) + min); //随机数方法
      let index = random(0, array.length); //生成一个从最小值为0 最大值为数组长度的随机数
      return array.splice(index, 1);
    },

10.一个echarts.js demo网址

EChartsDemo集

11.一个excel插件 lucky excel

Hello World!

12.将数组对象每一个key取出来并生成一个二维数组

      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          visible: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          visible: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },]

let arr = [];
    //  let keyArr = Object.keys(this.gridData[0]);
    let keyArr = ["date", "address"]; //拿到返回的对象，确认有需要生成多少条数据
    for (const item1 of keyArr) {
      //循环这个对象的每一个key，方便map将每一个key的值return出来
      let arr2 = this.gridData.map(item => {
        return item[item1];
      }); //每次接束会返回当前的数组key的value集合
      arr.push(arr2);
    }
    console.log(arr);//[

[2016-05-02,2016-05-04]

[上海市普陀区金沙江路 1518 弄,上海市普陀区金沙江路 1518 弄]

]

13。前端导出xlsx

main。js

//导出表格
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
Vue.prototype.$exportExcel = function (dom, name) {
    let tabDOM = XLSX.utils.table_to_book(document.querySelector(dom));
    let wbout = XLSX.write(tabDOM, { bookType: 'xlsx', bookSST: true, type: 'array' });
    try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), name);
    } catch (e) {
        if (typeof console !== 'undefined') {
        }
    }
    return wbout
}

// 使用
  this.$exportExcel("#table", "U8销售订单.xlsx");

14.按加载

const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

15,将表格指定数据放在最前面

  let userIdList = this.checkArr.map(item => item.id);
          // 将目标id排列在最前面
          setTimeout(() => {
            this.tableData.sort((a, b) => {
              return userIdList.includes(a.id) && !userIdList.includes(b.id)
                ? -1
                : 1;
            });
          }, 10);

16.根据id回显tree

const arr = res.data.data.menuidList;

        arr.forEach((item, index) => {
          const node = this.$refs.tree.getNode(item);
          if (node.isLeaf) {
            this.$refs.tree.setChecked(node, true);
          }
        });

17.将数组对象转换成tree

const flatArray = [
  { id: 1, parentId: null, name: 'root1' },
  { id: 2, parentId: 1, name: 'child1' },
  { id: 3, parentId: 1, name: 'child2' },
  { id: 4, parentId: 2, name: 'grandchild1' },
  { id: 5, parentId: 3, name: 'grandchild2' },
];

function flatArrayToTree(flatArray) {
  // 创建一个映射，方便通过id查找节点
  const map = new Map();
  flatArray.forEach(item => {
    map.set(item.id, { ...item, children: [] });
  });

  // 定义一个递归函数，用于构建每个节点的子树
  function buildTree(node) {
    flatArray.forEach(item => {
      if (item.parentId === node.id) {
        const childNode = map.get(item.id);
        // 递归构建子树，并添加到当前节点的children中
        node.children.push(buildTree(childNode)); 
      }
    });
    return node;
  }

  // 过滤出根节点并递归构建整棵树
  return flatArray
    .filter(item => item.parentId === null)
    .map(rootNode => buildTree(map.get(rootNode.id)));
}

const tree = flatArrayToTree(flatArray);

夏天爱劳动

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
总结js使用工具函数

1.两个数组删除，（删除一个数组中，包含的内一个数组的值） //删除 //arr数组集合[{}] delArr要删除的数组[] deleteRow(arr) { const delArr = this.$refs.xGrid.getCheckboxRecords(); return delArr .map(n => n.__ob__.dep.id) .forEach(n => { arr.
复制链接

扫一扫