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