JS常用数据处理方法

1、树形数据转换

在处理商品分类数据、企业列表数据等情况下，后台会返回到前台所有的数据。我们需要根据parentId,数据ID将数据转换为树形数据进行渲染。

/**
 * 树形数据转换
 * @param {*} data
 * @param {*} id
 * @param {*} pid
 */
export function treeDataTranslate(data, id = 'id', pid = 'parentId') {
  var res = []
  var temp = {}
  for (var i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i]
  }
  for (var k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]]['children']) {
        temp[data[k][pid]]['children'] = []
      }
      if (!temp[data[k][pid]]['_level']) {
        temp[data[k][pid]]['_level'] = 1
      }
      data[k]['_level'] = temp[data[k][pid]]._level + 1
      temp[data[k][pid]]['children'].push(data[k])
    } else {
      res.push(data[k])
    }
  }
  return res
}


//2种
exports.getTree = (data) => {
    if(!data){
        return [];
    }
    // 删除 所有 children,以防止多次调用
    data.forEach(function (item) {
        delete item.children;
    });
    // 将数据存储为 以 id 为 KEY 的 map 索引数据列
    var map = {};
    data.forEach(function (item) {
        map[item.id] = item;
    });
    var val = [];
    data.forEach(function (item) {
        // 以当前遍历项，的pid,去map对象中找到索引的id
        var parent = map[item.pid];
        // 如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
        if (parent) {
            (parent.children || (parent.children = [])).push(item);
        } else {
            //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
            val.push(item);
        }
    });
    return val;
}

2、获取当前年月日

/**
 * 获取当前年与日
 * 格式为 YYYY-MM-DD
 */
export function getNowFormatDate() {
  let date = new Date();
  let seperator1 = "-";
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate;
  }
  let currentdate = year + seperator1 + month + seperator1 + strDate;
  return currentdate;
}

3、对象的深拷贝

在vue项目中，常常会碰到编辑数据的问题。当用户点击了编辑，进行数据编辑。然而并没有进行保存，这样就会导致页面数据保留更改（双向数据绑定）造成很不好的体验。这时就需要对对象进行深拷贝来避免这个问题。

export function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'shallowClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  for (const keys in source) {
    if (source.hasOwnProperty(keys)) {
      if (source[keys] && typeof source[keys] === 'object') {
        targetObj[keys] = source[keys].constructor === Array ? [] : {}
        targetObj[keys] = deepClone(source[keys])
      } else {
        targetObj[keys] = source[keys]
      }
    }
  }
  return targetObj
}

 4、格式化返回的数据结构Result.js

// 参数正确， 获取成功
const {getModel} = require("../model"); // 统一格式化出口的数据

/**
 * list 数据
 * msg 提示文字
 * tableName 需要格式化的表名
 */
exports.Success = (list = [] ,msg = '操作成功', tableName) => {
    if (tableName !== undefined) { // 证明需要格式化
        list = getModel(list, tableName);
    }
    return {
        msg,
        code: 200,
        list
    }
}
// 参数正确， 但是权限不够
exports.Guest = (list = [], msg = '权限非法') => {
    return {
        msg,
        code: 403,
        list
    }
}
// 参数错误，请检查传递的参数
exports.MError = ( msg = '参数等发生错误') => {
    return {
        msg,
        code: 500
    }
}