多种数组处理场景

夏目-Moon

已于 2023-09-01 14:55:40 修改

阅读量155

点赞数

分类专栏： JS 文章标签： javascript 前端 json

于 2023-03-07 18:31:05 首次发布

本文链接：https://blog.csdn.net/qq_40692642/article/details/109156051

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

数组

一、将有length属性的对象转为数组

Array.prototype.slice.call(_allLi)

将数组中的元素按照条件重组结构

// An highlighted block
e.layers = e.layers.map(ele => {
          return {
            name: ele.name,
            id: ele.layerguid
          };
        });

过滤数组中掉满足条件的值

// An highlighted block
_this.gpInputParamList = this.gpInputParamsList.filter(array => {
        if (array.source != "地图导入") return true;
      });

二、深拷贝数组对象

// _this.datastore.PhysicalTableData（原数组）_this.PhysicalTableData（新数组）
 _this.datastore.PhysicalTableData.map(item => {
      _this.PhysicalTableData.push(Object.assign({}, item));
    });

三、数组对象去重

//去除相同的对象
this.GisModelData.GisModelInfo = JSON.parse(res.data.GisModel);
          var arr = [];
          arr = Object.assign(me.GisModelData.GisModelInfo.baselayer);
          if (arr.length > 0) {
            for (let i = 0; i < arr.length; i++) {
              for (let j = i + 1; j < arr.length; j++) {
                if (arr[i]["BaseLayerGuid"] === arr[j]["BaseLayerGuid"]) {
                  arr.splice(j, 1);
                }
              }
            }
          }
  //数组对象中的某个属性（数组）取交集
 _selectedLabelArr = _selectedLabelArr.map((item, index) => {
              this.disablePermissionList[index] =  item.DISABLEMOUDLES.split(",");
            })
 this.disablePermissionList = this.disablePermissionList.reduce((a, b) => a.filter(c => b.includes(c)));

四、将一个数组对象里面的每个具有相同的字段筛选出来组成一个新数组

arrayToMap(data) {
      var map = {};
      for (var i = 0; i < data.length; i++) {
        let projectType = data[i].PROJECTTYPE;
        if (projectType) {//筛选条件
          if (!map[projectType]) {
            map[projectType] = [];
          }
          map[projectType].push(data[i]);
        }
      }
      return map;
    },
    //把map转成数组
    mapToArray(data) {
      if (data == undefined) {
        return [];
      }
      let array = [];
      for (let p in data) {
        array.push(data[p]);
      }
      return array;
    },

五、线性数据与树形数据的转换；

//树形转换为线性1.创建一个新数组，像数组中添加树形数据。2.while循环数组,获取数组中的第一个元素，如果当前元素有子数组并且不为空那么相信数组中添加当前元素的子数组，同时删除当前元素的子数组。并向最终返回的数组中添加当前元素。
treeConvertList(root) {
      const list = [];
      if (root) {
        const Root = JSON.parse(JSON.stringify(root));
        let queue = [];
        queue.push(Root);
        while (queue.length) {
          const node = queue.shift();
          if (node.childAdmins && node.childAdmins.length) {
            queue.push(...node.childAdmins);
          }
          delete node.childAdmins;
          if (node.name) {
            list.push(node);
          }
        }
      }
      return list;
    }

var root = { "childAdmins": [{ "ename": "People\u2019s Republic of China", "childAdmins": [{ "ename": "BeiJing Shi", "name": "北京市", "count": "4", "adminCode": 156110000, "lon": "116.412616", "lat": "40.185590999999995" }, { "ename": "Sichuan Province", "childAdmins": [{ "ename": "Chengdu Shi", "name": "成都市", "count": "1", "adminCode": "156510100", "lon": "103.821047", "lat": "30.701446999999998" }], "name": "四川省", "count": "1", "adminCode": 156510000, "lon": "102.692954", "lat": "30.629248999999998" }, { "ename": "Jiangshu Province", "childAdmins": [{ "ename": "Changzhou City", "name": "常州市", "count": "1", "adminCode": "156320400", "lon": "119.40172899999999", "lat": "31.507346" }], "name": "江苏省", "count": "1", "adminCode": 156320000, "lon": "120.542165", "lat": "32.185323" }, { "ename": "Hong Kong", "childAdmins": [{ "ename": "Wan Chai District", "name": "湾仔区", "count": "1", "adminCode": "156810107", "lon": "114.18392", "lat": "22.26951" }], "name": "香港", "count": "1", "adminCode": 156810000, "lon": "114.02744799999999", "lat": "22.424341" }], "name": "中华人民共和国", "count": 7, "adminCode": 156000000, "lon": "104.293174", "lat": "32.285796999999995" }, { "ename": "Canada", "name": "加拿大", "count": 1, "adminCode": 124000000, "lon": "-101.65880999999999", "lat": "57.784616" }, { "ename": "Commonwealth of Australia", "name": "澳大利亚联邦", "count": 1, "adminCode": 36000000, "lon": "134.349508", "lat": "-25.577054999999998" }, { "ename": "Malaysia", "name": "马来西亚", "count": 1, "adminCode": 458000000, "lon": "116.834633", "lat": "5.452424" }, { "ename": "Slovakia Republic", "name": "斯洛伐克共和国", "count": 1, "adminCode": 703000000, "lon": "19.487011", "lat": "48.706565" }, { "ename": "Republic of Zimbabwe", "name": "津巴布韦共和国", "count": 1, "adminCode": 716000000, "lon": "29.868761", "lat": "-19.000279" }, { "ename": "Republic of Botswana", "name": "博茨瓦纳共和国", "count": 1, "adminCode": 72000000, "lon": "23.814331", "lat": "-22.188948" }, { "ename": "United States Of America", "name": "美利坚合众国", "count": 1, "adminCode": 840000000, "lon": "-99.432653", "lat": "39.400419" }, { "ename": "Republic of Venezuela", "name": "委内瑞拉共和国", "count": 1, "adminCode": 862000000, "lon": "-66.160356", "lat": "7.124124999999999" }] };
    var resultList = this.treeConvertList(root);
    //通过树结构返回普通线性数组 1.
  treeConvertList(tree) {
      var queen = [];
      var out = [];
      queen = queen.concat(tree);
      while (queen.length) {
        var first = queen.shift();
        if (first.childAdmins) {
          queen = first.childAdmins.concat(queen);
          delete first["childAdmins"];
        }
        out.push(first);
      }
      return out;
    }
//线性转换为树形1.传入四个参数分别是 当前数组，关联字段一级，子数组字段。2.定义新的参数分别表示新数组、子节点字段、父节点字段、以及子数组字段。3.遍历数组得到一个包含数组内所有元素的对象4.遍历原数组判断每一元素的是否有父节点id若果有就把当前节点push到父节点元素的children数组中，如果没有则把当前节点push到新数组中。
util.toTreeData = function (listData, idStr, pidStr, chindrenStr) {
  var r = [],
    hash = {},
    id = idStr,
    pid = pidStr,
    children = chindrenStr,
    i = 0,
    j = 0,
    len = listData.length;
  for (; i < len; i++) {
    hash[listData[i][id]] = listData[i];
  }
  for (; j < len; j++) {
    var aVal = listData[j],
      hashVP = hash[aVal[pid]];
    if (hashVP) {
      !hashVP[children] && (hashVP[children] = []);
      hashVP[children].push(aVal);
    } else {
      r.push(aVal);
    }
  }
  return r;
};

递归实现线性数据转为树形数据
const arr=[
          {
              name:"内容1",
              pid:-1,
              id:1
          },
          {
              name:"内容1",
              pid:1,
              id:2
          },{
              name:"内容1",
              pid:1,
              id:3
          }
      ]
      function toTree(nodes,parentId=null,id,pid,name){
        const tree=[];
        nodes.filter(item=>item[pid]===parentId).forEach(ele => {
            console.log(ele)
            tree.push({
                id:ele[id],
                name:ele[name],
                children:toTree(nodes,ele[id],id,pid,name)
            })
        });
        return tree
      }
      const treeData=toTree(arr,-1,'id','pid','name')
      console.log(treeData)

结果：

在这里插入图片描述

六、将数据转换为按字母排序

 async GetAllStaffData() {
      var me = this;
      me.treeData1 = [];
      await this.$http.GetAllStaffData().then((res) => {
        var data = {};
        data[" "] = [];
        if (res.data.Data) {         
          res.data.Data.map((item) => {
            item["label"] = item.ST_NAME + '(' + item.ST_LOGINNAME + ')';            
            if (item.ISRETIREMENT != '1') {
              if (!item.ST_INITIAL) {
                item.ISECAUSER != 1 && data[" "].push(item);
              } else {
                if (!data[item.ST_INITIAL]) {
                  data[item.ST_INITIAL] = [];
                }
                item.ISECAUSER != 1 && data[item.ST_INITIAL].push(item);
              }
            }
          });
         
          Object.keys(data)
            .sort()
            .map((item) => {
              if (item != " ") {
                let _isNull = data[item].some(item => { if (!item.ST_INITIALALLNAME) return true });
                if (!_isNull) {
                  data[item].sort((a, b) => a.ST_INITIALALLNAME.localeCompare(b.ST_INITIALALLNAME));
                }
              }
              var obj = {};
              obj.label = "拼音首字母" + item;
              obj.ST_ID = Eca.DataService.NewGuid();
              obj.children = data[item].sort((a, b) => { if (a.ST_NAME && b.ST_NAME) { return a.ST_NAME.localeCompare(b.ST_NAME) } else { return false } })
              obj.children.length > 0 && me.treeData1.push(obj);
            });
        }
      });
      return me.treeData1;
    },

七、循环树形数据对每一个子节点执行相同操作

recursionFun(data) {
      let _this = this;
      for (var i = 0; i < data.length; i++) {
        if (data[i].name != "更多城市") {
          data[i]["label"] = data[i].name + "(" + data[i].count + ")";
        } else {
          data[i]["label"] = data[i].name;
        }
        if (data[i].childAdmins) {
          _this.recursionFun(data[i].childAdmins);
        }
      }
      return data;
    },

八、数组删除的index，再添加
在这里插入图片描述

getPageId(){
      for (var i = 1; i < 1000; i++) {
        console.log(this.JudgeHeavy(i));        
        if (this.JudgeHeavy(i)) {
          return  i;
        }
      }
     },
JudgeHeavy(id) {
      let _this=this;
      for (let index = 0; index < _this.pages.length; index++) {
        var _index=_this.pages[index].name.slice(4)
        if (_index&&_index== id) {
          return false;
        }
      }
      return id;
},

九、获取数组中某个属性的集合（Array.from）
_ignoreIds=Array.from(this.structureTableData,({ id }) => id);;
十、将数组中每个元素的children 合并到新数组
this.secondOptions=this.firstOptions.reduce(function(acc, cur) {
return acc.concat(cur.children);
}, []);
十一、根据属性名找出数组对象中所有此属性的值组成数组

let array = [  
  { name: 'Tom', age: 20 },  
  { name: 'Jerry', age: 22 },  
  { name: 'Spike', age: 25 }  
];  
  
let propertyName = 'age';  
  
let values = array.map(item => item[propertyName]);  
  
console.log(values); // 输出: [20, 22, 25]

夏目-Moon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多种数组处理场景

数组将有length属性的对象转为数组Array.prototype.slice.call(_allLi)将数组中的元素按照条件重组结构// An highlighted blocke.layers = e.layers.map(ele => { return { name: ele.name, id: ele.layerguid }; });过滤数组中掉满足条件的值// An h
复制链接

扫一扫