js 复杂数组的元素操作，实现数据按搜索条件在前端显示

Posted 2021-11-02 nanke_yh

目录

0、背景

 1、坑一

 2、坑二

3、实现

3.1、js 数组元素操作

3.2 思路与代码

3.3、注意

4、最后的话

---

0、背景

       在工程项目中需要实现的一个需求，自己设计通过修改前端js代码来实现数据按搜索条件来对应显示的功能（实际可以根据key通过服务请求来实现的つ﹏⊂同事帮助下实现的）。在这个方向上，踏了很多坑，每次都觉得快实现了，可还是一直有问题。最后即使在同事另辟蹊径下解决的问题，但在不甘心下自己还是决定按自己思路将之实现掉。

请求后台上传的数据：

想要实现的功能效果：

  ===>>> 

 1、坑一

想用each遍历数据在其中根据条件过滤数据并返回

return _.each(datas,(function(index，item) {
  alert(index);
  alert(item);
  //过滤
  if(item[index].ID === condition)
  {
        view；
  }
}(this)));//错误的

 然后发现其中打印项index一直为[Object，object]而item就一直是underfunded，这个问题就很坑。没法获取索引值，就没法去用key来筛查数据。

然后发现代码写法上有所区别，

return _.each(datas,function(index，item) {
  alert(index);
  alert(item);
  //过滤
  if(item[index].ID === condition)
  {
        view；
  }
});//错误的

 这样虽然正确了，index为遍历的索引值，item为[Object，object]但是返回显示依旧无数据。然后这里面this的具体意义和用法也没有弄清楚。

 2、坑二

考虑对数据先过滤后遍历显示，遇到问题：1、复杂的对象数组怎么重新定义一个新的变量；2、如何向复杂的对象数组中添加对象元素；

网上查找了许久没能找到自己想要的答案（自己钻牛角尖了），以为需要创建object类型的数组，实际上复杂的对象型数组就是当作数组来操作即可。

3、实现

3.1、js 数组元素操作

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(star,end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val,...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素
.map()	返回一个数组元素调用函数处理后的值的新数组

该部分参考了：js 数组添加对象_Js -- 数组对象_weixin_39885803的博客-CSDN博客https://blog.csdn.net/weixin_39885803/article/details/110747939

3.2 思路与代码

首先for循环，删除不满足条件的元素，形成新的数组；

再对新数组遍历显示。

if (datas.length !== 0) {
   // var newdatas = new Array();
   // for(i = 0;i < datas.length;i++)//顺序的删除会改变内部元素位置还是会漏掉一些元素
   // {
   //   if(datas[i].userId === name) {
   //     newdatas.push(datas.splice(i,1));//获取datas删除的object并加入newdatas
   //   }//获取了对象，并没有获取属性信息
   // }
   for(i = datas.length-1;i >= 0;i--)
   {
      if(datas[i].userId !== name) {
        datas.splice(i,1);//逆序delete this object
      }
   }
   console.log(datas.length); //datas变成了新的数组         
   return _.each(datas,(function(_this) {
      return function(dataModel) {
         var dataTabView;
         dataTabView = new Views.MapDataTabView({
            model: dataModel
         });
         return _this.$el.find(".data-manage-bottom #data-list").append(dataTabView.render());
      };
  }(this)));
} 

3.3、注意

1、使用splice删除数组内元素，会实时传递到数组内部的，从而改变内部各个元素的索引值，从而导致for循环删选漏洞，因此这里使用逆序删除，这样可避免此种问题。

定义和用法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

返回值

类型	描述
Array	包含被删除项目的新数组，如果有的话。

 2、数组的定义，直接new即可，但是向数组中添加元素使用push方法，发现加入的元素没有继承原始元素内的属性信息。为此需要避免这个坑，我自己发现这个问题后就没有使用这种方式了。具体深究可以参考：

for循环对数组push一个对象时遇到的坑_许洪源的博客-CSDN博客https://blog.csdn.net/weixin_40648700/article/details/111961160?spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-3.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-3.nonecase

4、最后的话

     以上只是针对功能实现，并没考虑工程维护和项目建设。对于这类似的功能需求，最好最优的实现方式还是通过后台服务请求来实现吧。