二维数组使用set校验并去重

 最近遇到一个需求，一个form表单有多个区域，每个区域的字段都会单独的保存为一个数组，需要校验重复其中是否有重复的字段，如果有就校验，如果没有就正常提交。
   

 

如图所示，需求是这样的表单。
拿到需求之后仔细分析了一下，需要解决解决2个问题：
  1.一个是当前区域内的字段不能重复
  2.另外一个就是第二个区域的字段和第一个区域的字段也不能重复。
出现这个需求的原因是是因为表单是动态拖拽的，之后可以编辑字段名和显示名称。
总结了几种解决方法：
 1.首先想到的是2层遍历，然后取到每个区域中的相邻2条字段对比值，相同就校验并`return false`结束当前提交方法；这个比较简单，还要处理第2种情况，就是在还要在2层for循环中再嵌入2层for循环，取出 第一个区域的每一个字段和第二个区域的每个字段进行对比值，相同就校验并`return false`结束当前提交方法。不过写法太冗余，pass掉了，这里就不贴代码了。推荐的是第二种、第三种写法。

 2.第2种就是用`se`t,因为set中不允许有重复值,使用`set`的`has`属性

   let nameSet = new Set();
      let codeSet = new Set();
      for (let i = 0; i < params.nodeTabLists.length; i++) {
        const element = params.nodeTabLists[i].nodeTableLists;
        for (let j = 0; j < element.length; j++) {
          let item = element[j];
          if (nameSet.has(item.fieldShowName)) {//如果存在这个值就重复
            this.$message.error('表单中"' + item.fieldShowName + '"这个显示名称不能重复')
            this.load = false
            return false
          } else {//否则就加进set
            nameSet.add(item.fieldShowName);
          }
          if (codeSet.has(item.fieldName)) {
            this.$message.error('表单中"' + item.fieldName + '"这个字段名不能重复')
            this.load = false
            return false
          } else {
            codeSet.add(item.fieldName)
          }
        }
      }

新实例2个`set`数组`nameSet、codeSet`，用来接收显示名称和对应的字段名，然后在2层for循环中取每一条数据add到set的数组中，做过判断，如果nameSet中存在重复的值就校验并 `return false`  结束当前方法，如果不存在就继续add进去。

3.第3种也是用set,因为`set`中不允许有重复值，这次换`set`的`size`属性

 let nameSet = new Set();
      let codeSet = new Set();
      for (let i = 0; i < params.nodeTabLists.length; i++) {
        const element = params.nodeTabLists[i].nodeTableLists;
        for (let j = 0; j < element.length; j++) {
          let item = element[j];
          var nameSetSize = nameSet.size;//加进set之前先取长度
          nameSet.add(item.fieldShowName);
          if (nameSet.size == nameSetSize) {//塞值过程中，set的长度没有变化，说明有重复的
            this.$message.error('表单中"' + item.fieldShowName + '"这个显示名称不能重复')
            this.load = false
            return false
          }
          var codeSetSize = codeSet.size
          codeSet.add(item.fieldName)
          if (codeSet.size == codeSetSize) {
            this.$message.error('表单中"' + item.fieldName + '"这个字段名不能重复')
            this.load = false
            return false
          }
        }
      }

新实例2个`set`数组`nameSet、codeSet`，用来接收显示名称和对应的字段名，然后在2层for循环中取每一条数据add到set的数组中，在add之前先取nameSet.size的值，然后再塞值的过程中，set的的长度没有变化，说明有重复的值，此时就校验并 `return false`  结束当前方法，如果长度变了在就继续add进去。

这个需求虽然是个小需求，实现的方法有很多，不过在实现的过程中，我一直再想怎么写，能最优，或者看着比较简洁，最后总结出上面2个方法，记录一下，希望能帮助需要帮助的小伙伴。。。。。。。