JS处理一些数据

22个超详细的 JS 数组方法

mp.weixin.qq.com/s?__biz=MjM…

# 10种常见的JavaScript 字符串操作方法汇总

mp.weixin.qq.com/s?__biz=MjM…

# 8个最常用的Javascript对象方法

mp.weixin.qq.com/s?__biz=MjM…

查找角色

 const handlerUser = (arr) => {
    let roleList = this.$store.state.rolesList;
    let newArr = arr.map((item) => {
      let roleItem = roleList.find((mItem) => mItem.id == item);
      if (roleItem) {
        return roleItem.name;
      } else {
        return "角色已不存在";
      }
    });
    return newArr;
  };

level相同合并role_id

初始值：
let a = [
    {
      level: 1,
      role_id: 20,
    },
    {
      level: 1,
      role_id: 21,
    },
    {
      level: 1,
      role_id: 22,
    },
    {
      level: 2,
      role_id: 47,
    },
    {
      level: 2,
      role_id: 48,
    },
  ];
结果值：
 let b = [
    {
      level: 1,
      role_id: [20, 21, 22],
    },
    {
      level: 2,
      role_id: [47, 48],
    },
  ];

处理结果值

concatRole(a);
onst concatRole = (arr) => {
    const obj = {};
    arr.forEach((item) => {
      obj[item.level]
        ? obj[item.level].push(item.role_id)
        : (obj[item.level] = [item.role_id]);
    });
    return Object.keys(obj).map((key) => {
      return {
        level: key,
        role_id: obj[key],
      };
    });
  };

处理树形结构

初始值：
  let data = [
    {
      id: 1,
      parent_id: 0,
      name: "188厂",
      level: 1,
      lft: 1,
      rgt: 46,
      user_id: 1,
      sort: 1,
      org_code: "188",
    },
    {
      id: 2,
      parent_id: 1,
      name: "自闭合开关",
      level: 2,
      lft: 2,
      rgt: 41,
      user_id: 1,
      sort: 1,
      org_code: "188",
    },
    {
      id: 3,
      parent_id: 2,
      name: "火控自闭和开关",
      level: 3,
      lft: 27,
      rgt: 40,
      user_id: 1,
      sort: 1,
    },
    {
      id: 4,
      parent_id: 3,
      name: "火控自闭和开关-100",
      level: 4,
      lft: 28,
      rgt: 29,
      user_id: 1,
      sort: 1,
    },
    {
      id: 7,
      parent_id: 0,
      name: "控火厂",
      level: 1,
      lft: 1,
      rgt: 26,
      user_id: 60,
      sort: 10,
      org_code: "23",
    },
  ];

结果值

处理结果值： 方法一

  // 循环列表 以parent_id组成树状结构
  function foreachList(_list, parent_id) {
    parent_id = parent_id || 0;
    let arr = [];
    _list.forEach((item) => {
      if (item.parent_id == parent_id) {
        // 如果这个节点的parent_id等于传入的节点id
        let new_item = Object.assign({}, item);
        let children = this.foreachList(_list, item.id);
        if (children.length) new_item.children = children;
        // 如果children长度不为0则将产生一个有children的对象
        arr.push(new_item);
      }
    });
    return arr;
  }
  let test3 = foreachList(data);

方法二

toTree(data)
  function toTree(data) {
    let [result,map,parent] = [[],{},'']
    data.forEach((item) => map[item.id] = item);
    data.forEach((item) => {
      parent = map[item.pid];
      parent ? (parent.children || (parent.children = [])).push(item) : result.push(item);
    });
    return result;
  }

找到父级合并name

 let datas = [
    {
      appliance_lvliben: 1,
      created_at: "2022-04-18 15:20:56",
      demand_content: "",
      et_id: 73,
      id: 133,
      judgment_info: "",
      judgment_type: 5,
      level: 1,
      name: "父",
      parent_id: 0,
      sort: 1,
      updated_at: "2022-04-18 15:20:56",
    },
    {
      appliance_lvliben: 1,
      created_at: "2022-04-18 15:20:56",
      demand_content: "测试值",
      et_id: 73,
      id: 134,
      judgment_info: { main: "2", sub: "20" },
      judgment_type: 1,
      level: 2,
      name: "子01",
      parent_id: 133,
      sort: 1,
      updated_at: "2022-04-18 15:20:56",
    },
    {
      appliance_lvliben: 1,
      created_at: "2022-04-18 15:20:56",
      demand_content: "测试子2",
      et_id: 73,
      id: 135,
      judgment_info: {},
      judgment_type: 1,
      level: 2,
      name: "子02",
      parent_id: 133,
      sort: 2,
      updated_at: "2022-04-18 15:20:56",
    },
  ];
  // 结果值：
  let result = [
    {
      demand_content: "测试值",
      et_id: 73,
      exam_0: "2",
      id: 134,
      judgment_info: {},
      judgment_type: 1,
      product_0: "父",
      product_0_id: 133,
      product_0_rowSpan: 2,
      product_1: "子01",
      product_1_id: 134,
      product_1_rowSpan: 1,
      result: 1,
      value: "",
    },
    {
      demand_content: "测试子2",
      et_id: 73,
      exam_0: "3",
      id: 135,
      judgment_info: {},
      judgment_type: 1,
      product_0: "父",
      product_0_id: 133,
      product_0_rowSpan: 0,
      product_1: "子02",
      product_1_id: 135,
      product_1_rowSpan: 1,
      result: 1,
      value: "",
    }
  ];

处理结果值：

   this.foreachData( items,"", "",  "", info.header_test_value,info.header_project.length);
    foreachData(list, level, pid, current_item, header_result, project_len) {
      level = level || 0;
      pid = pid || 0;
      list.forEach((item, index) => {
        if (item.parent_id == pid) {
          let new_item = Object.assign({}, current_item || {});
          new_item["product_" + level] = item.name;
          new_item["product_" + level + "_id"] = item.id;
          new_item["et_id"] = item.et_id;
          new_item["value"] = item.value || "";
          new_item["result"] = item.result || "";
          new_item["judgment_info"] = item.judgment_info;
          let children = list.filter((elem) => {
            return item.id == elem.parent_id;
          });
          if (level + 1 < project_len && children.length) {
            this.foreachData(
              list,
              level + 1,
              item.id,
              new_item,
              header_result,
              project_len
            );
          } else if (level + 1 == project_len || !children.length) {
            let item_result = this.taskList[this.taskIndex].item_result; //// 任务列表
            let et_id = this.serialList[this.serialIndex].id; // 编号列表id
            header_result.map((r, num) => {
              let resItem = item_result.find((res) => {
                return (res.et_id =
                  et_id &&
                  num == res.result_serial &&
                  item.id == res.experiment_analysis_item_id);
              });
              new_item["exam_" + num] = resItem ? resItem.measuring : "";
              new_item.result = resItem ? resItem.result : 0;
            });
            new_item.id = item.id;
            new_item.demand_content = item.demand_content.toString();
            new_item.judgment_type = Number(item.judgment_type);
            this.tableList.push(new_item);
          }
        }
      });
    },
   

搜索id

var searchs // 搜索字
var temp = {}
 window["$http"]
    .get(CONFIGURL["FILECATEGORY"], query, (gather = { isToken: true }))
    .then((res) => {
      let folderData = res.data.data;
      let { data } = res.data;
      data.forEach((item) => {
        temp[item.id] = Object.assign({}, item);
      });
      let tree = utlis.handlerTree(data);
      copyData = data
  })
  //input 输入事件
  $(".find-searchs").bind("input propertychange", function () {
        searchs = $(".find-searchs").val();
        let trees = utlis.handlerTree(copyData, "", searchs);
        if (searchs) {
          let e = foreachExpand(trees, []);
          console.log(e,'这里就拿到结果值')
        }else{
          $(".action-li").css("color", "#fff");
        }
   });
   
 // 查找搜索展开项
function foreachExpand(arr, expand) {
  arr.forEach((item) => {
    if (item.searchSplit.length > 1) {
      // 如果某个item存在子菜单，则push到新的数组中去
      item.children ? expand.push(item.id) : null;
      // 如果父菜单存在，并且
      if (item.parent_id && expand.indexOf(item.id) < 0) {
        let e = foreachParent(item.id, []);
        e.forEach((item) => {
          if (expand.indexOf(item) < 0) expand.push(item);
        });
      }
    }
    if (item.children) {
      let e = foreachExpand(item.children, expand);
      e.forEach((item) => {
        if (expand.indexOf(item) < 0) expand.push(item);
      });
    }
  });
  return expand;
}

// 查找父级展开，根据某个搜索中的子菜单选中它上面的全部父菜单
function foreachParent(id, expand) {
  expand.push(objs[id], objs[id].id);
  let pid = objs[id] ? objs[id].parent_id : null;
  // 父id存在并且不存在于expand中
  if (pid && expand.indexOf(pid) < 0) {
    this.foreachParent(pid, expand);
  }
  return expand;
}
  
  const utlis = {
    handlerTree(data, parent_id, searchs) {
        parent_id = parent_id || 0;
        let _arr = [];
        data.forEach((item) => {
          if (item.parent_id == parent_id) {
            let new_item = Object.assign({}, item);
            new_item.searchSplit = [];
            if (searchs) {
              let searchSplit = item.name.split(searchs);
              let leng = searchSplit.length;
              for (let i = 1; i < leng; i++) {
                let j = i * 2 - 1;
                searchSplit.splice(j, 0, searchs);
              }
              new_item.searchSplit = searchSplit;
            }
            let children = utlis.handlerTree(data, item.id, searchs);
            if (children.length) new_item.children = children;
            _arr.push(new_item);
          }
        });
        return _arr;
      },
  }
  

6.数组通过key值相同合并value

如果value值出现相同去重否则push

处理方法

  // 数组扁平
        const flatten = arr => {
          return arr.reduce((result, item) => {
            return result.concat(Array.isArray(item) ? flatten(item) : item);
          }, []);
        };
        const dealData = (arr = []) => {
          if (!Array.isArray(arr)) return [];
          const res = [];
          arr.map(item => {
            const index = res.findIndex(jtem => {
              return jtem.name === item.key;
            });
            if (index > -1) {
              const pre = JSON.parse(JSON.stringify(res[index].item));
              const has = pre.includes(item.value);
              if (!has) {
                const cur = [...res[index].item, item.value];
                res[index] = {
                  name: item.key,
                  item: cur
                };
              }
            } else {
              res.push({
                name: item.key,
                item: [item.value]
              });
            }
          });
          return res;
        };
        this.attribute = dealData(flatten(spdataT));
      }
    },

7.复杂数据处理成ant table 组件所需要的格式

初始值： 结果值：

source() {
    return (val) => {
    let { info, items } = val;
    tableId = 0;
    let list = this.foreachData([], items, info);
    let count = [];
    for (let i = list.length - 1; i >= 0; i--) {
        let item = list[i];
        let last = i == 0 ? {} : list[i - 1];
        for (let j = 0; j < info.header_project.length; j++) {
                let name = "product_" + j;
                count[j] = (count[j] || 0) + 1;
                if (item[name + "_id"] != last[name + "_id"]) {
                        list[i][name + "_rowSpan"] = count[j];
                        count[j] = 0;
                } else {
                        list[i][name + "_rowSpan"] = 0;
                }
        }
    }
    return list;
    };
},

foreachData(arr, list, info, level, pid, current_item) {
level = level || 0;
pid = pid || 0;
list.forEach((item) => {
    if (item.parent_id == pid) {
    let new_item = Object.assign({}, current_item || {});
    new_item["product_" + level] = item.name;
    new_item["product_" + level + "_id"] = item.id;
    let children = list.filter((elem) => {
        return item.id == elem.parent_id;
    });
    if (level + 1 < info.header_project.length && children.length) {
        arr = this.foreachData(arr, list, info, level + 1, item.id, new_item);
    } else if (level + 1 == info.header_project.length || !children.length) {
        new_item.id = item.id;
        new_item["range-0"] = item.demand_content.toString();
        new_item.judgment_info = Object.assign({}, item.judgment_info);
        new_item.judgment_type = Number(item.judgment_type);
        arr.push(new_item);
        tableId++;
        }
    }
});
return arr;
},

数组去重 代码简洁，好用，4行代码搞定，平均耗费时间最短，五星推荐 new Map

// 第一种值得推荐
function uniqueFunc(arr, uniId){
  const res = new Map();
  return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
}

// 第二种
let temp = {}
arr.reduce((newArr,next)=>{
 temp[next.id] ? '' : (temp[next.id] = true && newArr.push(next))
 return newArr
},[])

// 第三种
let obj = {}
let newArr = []
for(var i = 0; i < arr.length;i++){
     obj[arr[i].id] ? '' : (obj[arr[i].id] = true && newArr.push(arr[i]))
}
console.log(newArr)

为true就往后的字符串添加反之不断当前字符串替换

        // 统一处理消息
        function handleMsg(data) {
            const { finalResult, result } = data;
            if (!result) return;
            msgBox[msgBox.length ? msgBox.length - 1 : 0] = result
            if (finalResult) { msgBox.push('') }
            $('.voice-content').html(msgBox.join(''))
        }

组合手机型号 SKU算法

let colorArray= ['白色','红色','黑色'] //选择的颜色
let sizeArray= ['X','XL','XXL','xxxl'] //选择的尺寸
let data=[colorArray,sizeArray]
let dataSku=data.reduce((a,b)=>{
var ret=[]
a.forEach(function(a) {
b.forEach(function(b) {
ret.push(a.concat([b]));
});
});
console.log(ret) //组合成功 
return ret;
},[[]])
console.log("最后sku",dataSku)

常用合并单元格代码

// list是数组
function mergeJobActivity(list){
  return list.reduce((result, item) => {
      if (result.indexOf(item.riskPointId) < 0)  result.push(item.riskPointId)
      return result
    }, []).reduce((result, riskPointId) => {
        const children = list.filter(item => item.riskPointId === riskPointId);
        result = result.concat(
          children.map((item, index) => ({
            ...item,
            rowSpan: index === 0 ? children.length : 0,
          }))
        )
      return result;
    }, [])
}

    let { list, count, pageNo, pageSize } = res
    let newList: any = []
    let acindex = 0
    let allCount = 0;
    list.forEach(item => {
      item.controlJobActivityList.forEach((actitem, index) => {
        actitem.jobId = actitem.id
        delete actitem.id
        let newItem = Object.assign({}, item, actitem)
        if (index == 0) {
          acindex++
          newItem.index = acindex
          newItem.rowSpan = item.controlJobActivityList.length
        } else {
          newItem.rowSpan = 0
        }
        allCount++
        newList.push(newItem)
      })
    })
    methods.setTableData(newList)

删除合并单元格

const handleOrglDelete = (record: Recordable) => {
	let total = record.rowSpan
	let list: Recordable[] = [];
	for (const item of orgSetTable.getDataSource()) {
		if (item.timeStr == record.timeStr) {
			list.push(item)
			let data = Object.assign(item, { status: '1' })
			delete data.rowSpan
			recordDelList.push(data)
			total--
		}
		if (total == 0) {
			break
		}
	}
	orgSetTable.deleteTableDataRecord(list) //删除原数据项的值
}

按照obj分类

var person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 17
    }
];
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
var groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);

菜单勾选组装树形结构

async function getData(parentCode: number, level: number) {
  try {
    // 获取所有
    let res = await hpMenuSetListData({ isAll: 1, parentCode })
    if (res.length) {
      for (let i = 0; i < res.length; i++) {
        let item: any = res[i]
        item.level = level;
        if (level == 0) {
          item.childList = await getData(item.id, level + 1)
        }
        if (level == 1) {
          let list = await getData(item.id, level + 1)
          item.page = list?.filter(item => item.menuType == 2)
          item.ctrl = list?.filter(item => item.menuType == 3)
        }
      }
      return res
    } else {
      return []
    }
  } catch (e) { }
}

根据不同仓库store(A1，B2，C3)，不同的出入库计算applyTyep

 let houseType = {}
      list.forEach(item=>{ houseType[item.store] = list.filter(t=>t.store == item.store) })
      for(let i=0 ;list.length > i; i++){
        let item = list[i]
        if(houseType[item.store]){
           houseType[item.store][0].currentNum =houseType[item.store][0].operateNum
           houseType[item.store].forEach((t,index)=>{
            if(item.id == t.id) item.applyType == 1 ? item.currentNum = houseType[item.store][index - 1]?.currentNum + item.operateNum : 
            item.currentNum = houseType[item.store][index - 1]?.currentNum - item.operateNum
           })
        }
      }

数组里面出现了几次一样的数据 向*

var _arr = ['旅行箱', '旅行箱', '小米', '大米'];  
var _res = []; //   
_arr.sort();  
for (var i = 0; i < _arr.length;) {  
    var count = 0;  
    for (var j = i; j < _arr.length; j++) {  
        if (_arr[i] == _arr[j]) {  
            count++;  
        }  
    }  
    _res.push([_arr[i], count]);  
    i += count;  
}  
//_res 二维数维中保存了 值和值的重复数  
var _newArr = [];  
for (var i = 0; i < _res.length; i++) {  
    // console.log(_res[i][0] + "重复次数:" + _res[i][1]);  
    _newArr.push(_res[i][0] + 'x' + _res[i][1]);  
}  
console.log(_newArr);