vue从获取到的对象数组中去掉重复数据，重复数据只保留一个

下拉框中的数据是从后台获取到的数据，将后台传来的重复数据只保留一个

<el-select
                  filterable
                  placeholder="请选择品规"
                  v-model="queryObj.production"
                  style="width:150px"
                >
                  <el-option
                    v-for="item in productionObj"
                    :key="item.productId"
                    :label="item.productDesc"
                    :value="item.productId"
                  >
                  </el-option>
                </el-select>

export default {
  data () {
    return {
      queryObj: {
        company: '', //工业公司
      }
    }
  },
  methods: {
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.supplierCode) && res.set(arr.supplierCode, 1));
    },
    // 获取工业公司
    handleQuaryCompany() {
      const _this = this
      findSupplierInfo().then(req => {
        _this.companyObjAll = req.data
        this.companyObj = this.unique(_this.companyObjAll)
      })
    }
  }
}

jQuery遍历-has()方法将匹配元素集合缩减为拥有匹配指定选择器或DOM元素的后代的子集。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

今天偶然看到数组去重：

1. 利用ES6 Set去重（ES6中最常用）

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。

简化代码：

[...new Set(arr)] 

2.利用for嵌套for，然后splice去重（ES5中最常用）

function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重，两个null直接消失了

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

3.利用indexOf去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
   // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。

 4. 利用filter

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]