JS数组去重及表格操作行数据方法总结

港控/mmm° 2021-09-25 02:36 290阅读 0赞

# 数组去重 #

## 一、利用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", {}, {}]

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

## 二、利用for嵌套for，然后splice去重（ES5中最常用） ##

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

## 三、利用indexOf去重 ##

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

## 四、利用sort() ##

利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。

## 五、利用对象的属性不能相同的特点进行去重（这种数组去重的方法有问题，不建议用，有待改进） ##

## 六、利用includes ##

## 七、利用hasOwnProperty ##

function unique(arr) {
        var obj = {};
        return arr.filter(function(item, index, arr){
            return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
        })
    }
        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", {…}]   //所有的都去重了

利用hasOwnProperty 判断是否存在对象属性

## 八、利用filter ##

## 九、利用递归去重 ##

## 十、利用Map数据结构去重 ##

创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。

## 十一、利用reduce+includes ##

## 十二、\[...new Set(arr)\] ##

[...new Set(arr)]

# 根据数组对象单一属性去重 #

/** 根据数组对象属性去重
     * @param {操作的数组} arr
     * @param {字段名} name
     *
     */
    export function arrUniqueByProperty(arr, name) {
      if (!arr || arr.length <= 0 || !name) {
        console.error('arrUniqueByProperty 参数问题', 'arr', arr, 'name', name)
        return []
      }
      let hash = {}
      return arr.reduce(function(item, next) {
        hash[next[name]] ? '' : (hash[next[name]] = true && item.push(next))
        return item
      }, [])
    }
    
    /** 根据数组对象属性去重
     * @param {操作的数组} array
     * @param {字段名} fieldName
     */
    // 根据数组对象属性去重
    export function removeDuplicates(array, fieldName) {
      if (!array || array.length <= 0 || !fieldName) {
        console.error('removeDuplicates 参数问题', 'array', array, 'fieldName', fieldName)
        return []
      }
      let List = JSON.parse(JSON.stringify(array))
      for (let i = 0; i < List.length; i++) {
        for (let j = i + 1; j < List.length;) {
          if (List[i][fieldName] && List[i][fieldName] === List[j][fieldName]) {
            // 通过属性进行匹配；
            List.splice(j, 1) // 去除重复的对象；
          } else {
            j++
          }
        }
      }
      return List
    }

# 操作表格行数据 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70][]

/*  删除行 明细行操作[选中多行删除]
     * orgList[Array] 原数组
     * rows [Array]选中行数据
     */
    export function delRows(orgList, rows) {
      let List = JSON.parse(JSON.stringify(orgList))
      let delList = JSON.parse(JSON.stringify(rows))
      if (orgList && orgList.length > 0 && rows && rows.length > 0) {
        // 比对删除
        delList.map(item => {
          List = List.filter(i => i !== item)
        })
      } else {
        console.error('删除行传参不完整', 'orgList', orgList, 'del', rows)
      }
      return List
    }
    
    /*  复制行 明细行操作
     * orgList[Array] 原数组
     * rows [Array]选中行数据
     */
    export function copyRows(orgList, rows) {
      if (!orgList || orgList.length <= 0 || !rows || rows.length <= 0) {
        console.error('copyRows参数问题', 'orgList', orgList, 'copyList', rows)
        return []
      }
      let List = JSON.parse(JSON.stringify(orgList))
      const operateList = JSON.parse(JSON.stringify(rows))
      for (let index in operateList) {
        for (let j in List) {
          if (operateList[index] === List[j]) {
            const obj = JSON.parse(JSON.stringify(operateList[index]))
            List.splice(j + 1, 0, obj) // splice 修改原数组
            break
          }
        }
      }
      return List
    }
    
    /*  批量填充 明细行操作 [默认向下填充]
        单属性批量填充
        rows[Array]  操作的行数据
        fieldName[String] 操作的对象字段名
        fieldValue[String] 操作的对象字段值
        currentIndex[Number] 当前选中行下标
     */
    export function batchSingleFieldFill(rows, fieldName, fieldValue, currentIndex) {
      // 批量填充单行
      if (!rows || !fieldName || !fieldValue || !currentIndex >= 0) {
        console.error(
          '批量填充api传参不完整,util.js',
          'rows',
          rows,
          'fieldName',
          fieldName,
          'fieldValue',
          fieldValue,
          'currentIndex',
          currentIndex
        )
        return []
      }
      let List = JSON.parse(JSON.stringify(rows))
      currentIndex = Number(currentIndex)
      List.forEach((item, index) => {
        if (index > currentIndex) {
          item[fieldName] = fieldValue
        }
      })
      return List
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70]: /images/20210923/8ede33380324449896667a566861d64c.png