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

目录

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 数组元素操作

该部分参考了：

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)

返回值

 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、最后的话

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