前端开发得到的一些小技巧和方法

(1)数组去重

考虑用set数据结构进行去重的处理，尤其在处理对象数组时，考虑去重的时候，可以直接取其中对象的主键id进行判断

首先创建一个空数组A，然后遍历想要去重的数组B，然后遍历取出B中的主键id放入到A中，然后最后进行判断，下面是demo

const A = [];
const B = [{id:'1',context:'哈哈1'},{id:'2',context:'哈哈2'},{id:'1',context:'哈哈1'}];
// 这里定义的B中有重复的对象值

for(let i=0;i<B.length;i++){
   A[i] = B[i].id; // 遍历将对象B的id存入到A
}

// 最后将A转换为Set判断长度即可
if(new Set(A).size!==B.length){
  console.log('B中含有重复值');
}

(2)vue中组件绑定优先考虑使用.$refs进行绑定

比如elementUI中table取消多选的操作逻辑

  <el-table
          ref="dialogBadCodetable"   //这里绑定ref
          border
          :data="dialogBadCodetable.data"
          height="300"
          style="width:100%;"
          @selection-change="DialogBadCodeTableChange"
   >
   ...  //中间内容省略
  </el-table>

  // 在后续的操作中 可以使用，下面是假设点击清空按钮时的操作逻辑（这里是vue中的写法）
  clearTable(){
      this.$refs.dialogBadCodetable.clearSelection(); // 将dialogBadCodetable置空
  }
 

(3)前端开发如果不是vue系页面(即传统html,jsp,thymeleaf等)如果想实现select多选，回显等等，可以考虑使用xm-select

vue系： https://element.eleme.cn/#/zh-CN/component/select

 

非vue系：https://gitee.com/maplemei/xm-select   api：https://maplemei.gitee.io/xm-select/#/component/install

（4）页面回退并刷新，可以防止用户是直接点进来的，找不到reffer页面，可能是分享进来的，下面的代码实现回退并刷新

window.location.href = document.referrer;  

 (5) 前端页面调试(移动端和桌面端都可用)

 第一款：VConsole

    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>

第二款：Eruda

<script type="text/javascript" src="https://cdn.bootcss.com/eruda/1.2.6/eruda.min.js"></script>

<script>
eruda.init();
</script>