前端数组元素的过滤、去重

野性酷女 2024-04-03 10:36 91阅读 0赞

## 数组过滤 ##

有时候前端需要对数据进行过滤，比如多个下拉框进行关联选择的时候，第一级别选择有总公司、湖北分公司、湖南分公司、北京分公司，第二级别可以选择总分公司的部门。但是有时候某些业务不需要所有的部门去执行，那么就需要过滤一些数据。

前端的下拉框数据来源是数组，所以就需要对数组进行过滤。

下面的response是通过总公司来查询下级的部门返回的数据。aaa是需要过滤的部门名称，对数组进行循环，如果不等于这些名称，就把他们重新放入一个新的数组，最后把这个新的数组赋值给下拉框的数据源。

this.select2.dept = response;
                var arr1=[];
                for(var i = 0;i < this.select2.dept.length;i++){
                              if(this.select2.dept[i].deptName!='aaa'&&this.select2.dept[i].deptName!='bbb'&&this.select2.dept[i].deptName!='ccc'&&this.select2.dept[i].deptName!='ddd'
                   ){
                    arr1.push(this.select2.dept[i]);
                  }
                }
                this.select2.dept=arr1;

## 数组去重 ##

有时候下拉框进行多选的时候，同时次级下拉框也可以进行多选，那么次级下拉框有可能会出现重复值的情况，不如每一个第一类别下面都有一个“其他”，当把所有第一级别进行多选的时候，第二级别的下拉框就会有多个“其他”，这时候需要对数据进行去重。

方法如下：

// 数组对象去重
    function arrayObjUnique(arr,uniqueAttr){
        // 去重条件
        var uniqueCondition={}
        // 开始去重
        return arr.filter(item=>{
            if(!uniqueCondition[item[uniqueAttr]]){
                uniqueCondition[item[uniqueAttr]]=true
                return true
            }
        })
    }

## 上传文件的时候去重复名字 ##

我们上传文件的时候需要把文件上传到服务器，但是服务器上面的名字不能重名，需要对上传的原始名字进行处理形成新文件名，下载的时候重新恢复原始的文件名。

但是当我们上传两个同名文件的时候，虽然服务器上面可以进行保存，下载的时候难免会冲突，对下载的文件进行重命名。所以我们需要在上传文件的时候对文件名进行限制。让其无法进行重复名字的文件上传。

在这里我们前端使用vue2.0，插件使用element-ui，使用element-ui的原生上传，给它添加一个事件，让它在上传之前进行判断已经上传的文件名和正在上传的文件名是否一样，如果一样那么就不让它上传。

handleBefore1(file) {
              console.log(file,this.sc01List1)
              // 处理异常——上传相同文件名
              if (this.sc01List.some(item => item.fileNameOrg === file.name)) {
                this.$message.error('不可以上传重复文件！')
                return false
              }
            },