首页 前端知识 JS 数组或数组对象去重的9种方法

JS 数组或数组对象去重的9种方法

2024-05-06 09:05:27 前端知识 前端哥 879 280 我要收藏

// 数组去重

const arr = ["1", "1", "2", "3", "5", "3", "1", "5", "4"]

console.log(this.deduplicate(arr)) // ['1', '2', '3', '5', '4']

// 数组对象去重

const arr = [
  { id: 1, name: "数据1" },
  { id: 1, name: "数据2" },
  { id: 2, name: "数据3" },
  { id: 3, name: "数据4" },
  { id: 4, name: "数据5" },
  { id: 3, name: "数据6" },
  { id: 5, name: "数据7" }
]

console.log(this.deduplicate(arr, "id")) // [{ id: 1, name: "数据2" }, { id: 2, name: "数据3" }, { id: 3, name: "数据4" }, { id: 4, name: "数据5" }, { id: 5, name: "数据7" }]

方法一

/** 数组去重
 * 思路:定义一个新数组,存放原数组的第一个元素,然后将原数组和新数组的元素对比,若不同则存放在新数组中
 * @param arr 需要去重的数组
 * @param t 根据 t 字段(指定)进行去重
 * @returns {*[]} 已去重后的数据
 */
deduplicate(arr, t = "") {
  const newArr = [arr[0]]
  // 有指定字段
  if (t) {
    for (let i = 1; i < arr.length; i++) {
      let repeat = false
      for (let j = 0; j < newArr.length; j++) {
        if (t && arr[i][t] === newArr[j][t]) {
          repeat = true
          break
        }
      }
      if (!repeat) newArr.push(arr[i])
    }
  }
  // 无指定字段
  else {
    for (let i = 1; i < arr.length; i++) {
      let repeat = false
      for (let j = 0; j < newArr.length; j++) {
        if (arr[i] === newArr[j]) {
          repeat = true
          break
        }
      }
      if (!repeat) newArr.push(arr[i])
    }
  }
  return newArr
}

方法二

/** 数组去重
 * 思路:先将原数组进行排序,再与相邻的角标进行对比,如果不同则存入新数组
 * @param arr 需要去重的数组
 * @param t 根据 t 字段(指定)进行去重
 * @returns {*[]} 已去重后的数据
 */
deduplicate(arr, t = "") {
  const sortArr = arr.sort(function (a, b) {
      if (t) return a[t] - b[t]
      return a - b
    }), // 升序排列
    newArr = [sortArr[0]]
  // 有指定字段
  if (t) {
    for (let i = 1; i < sortArr.length; i++) {
      if (sortArr[i][t] !== sortArr[i - 1][t]) newArr.push(sortArr[i])
    }
  }
  // 无指定字段
  else {
    for (let i = 1; i < sortArr.length; i++) {
      if (sortArr[i] !== sortArr[i - 1]) newArr.push(sortArr[i])
    }
  }
  return newArr
}

方法三

/** 数组去重
 * 思路:利用对象属性存在的特性,如果没有该属性则存入新数组
 * @param arr 需要去重的数组
 * @param t 根据 t 字段(指定)进行去重
 * @returns {*[]} 已去重后的数据
 */
deduplicate(arr, t = "") {
  const obj = {},
    newArr = []
  // 有指定字段
  if (t) {
    for (let i = 0; i < arr.length; i++) {
      if (!obj[arr[i][t]]) {
        obj[arr[i][t]] = 1
        newArr.push(arr[i])
      }
    }
  }
  // 无指定字段
  else {
    for (let i = 0; i < arr.length; i++) {
      if (!obj[arr[i]]) {
        obj[arr[i]] = 1
        newArr.push(arr[i])
      }
    }
  }
  return newArr
}

方法四

/** 数组去重
 * 思路:利用数组的 indexOf 下标属性来查询
 * @param arr 需要去重的数组
 * @param t 根据 t 字段(指定)进行去重
 * @returns {*[]} 已去重后的数据
 */
deduplicate(arr, t = "") {
  const newArr = [],
    assignList = []
  // 有指定字段
  if (t) {
    for (let i = 0; i < arr.length; i++) {
      if (assignList.indexOf(arr[i][t]) === -1) {
        assignList.push(arr[i][t])
        newArr.push(arr[i])
      }
    }
  }
  // 无指定字段
  else {
    for (let i = 0; i < arr.length; i++) {
      if (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i])
    }
  }
  return newArr
}

方法五

/** 数组去重
 * 思路:利用数组原型对象上的 includes 方法
 * @param arr 需要去重的数组
 * @param t 根据 t 字段(指定)进行去重
 * @returns {*[]} 已去重后的数据
 */
deduplicate(arr, t = "") {
  const newArr = [],
    assignList = []
  // 有指定字段
  if (t) {
    for (let i = 0; i < arr.length; i++) {
      if (!assignList.includes(arr[i][t])) {
        assignList.push(arr[i][t])
        newArr.push(arr[i])
      }
    }
  }
  // 无指定字段
  else {
    for (let i = 0; i < arr.length; i++) {
      if (!newArr.includes(arr[i])) newArr.push(arr[i])
    }
  }
  return newArr
}

方法六

/** 数组去重
 * 思路:利用数组原型对象上的 filter 和 includes 方法
 * @param arr 需要去重的数组
 * @param t 根据 t 字段(指定)进行去重
 * @returns {*[]} 已去重后的数据
 */
deduplicate(arr, t = "") {
  let newArr = []
  // 有指定字段
  if (t) {
    newArr = arr.filter(function (item) {
      return newArr.includes(item[t]) ? "" : newArr.push(item[t])
    })
  }
  // 无指定字段
  else {
    newArr = arr.filter(function (item) {
      return newArr.includes(item) ? "" : newArr.push(item)
    })
  }
  return newArr
}

方法七

/** 数组去重
 * 思路:利用数组原型对象上的 forEach 和 includes 方法
 * @param arr 需要去重的数组
 * @param t 根据 t 字段(指定)进行去重
 * @returns {*[]} 已去重后的数据
 */
deduplicate(arr, t = "") {
  const newArr = [],
    assignList = []
  // 有指定字段
  if (t) {
    arr.forEach(item => {
      if (!assignList.includes(item[t])) {
        assignList.push(item[t])
        newArr.push(item)
      }
    })
  }
  // 无指定字段
  else {
    arr.forEach(item => {
      return newArr.includes(item) ? "" : newArr.push(item)
    })
  }
  return newArr
}

方法八

/** 数组去重
 * 思路:利用数组原型对象上的 splice 方法
 * @param arr 需要去重的数组
 * @param t 根据 t 字段(指定)进行去重
 * @returns {*[]} 已去重后的数据
 */
deduplicate(arr, t = "") {
  let i,
    j,
    len = arr.length
  // 有指定字段
  if (t) {
    for (i = 0; i < len; i++) {
      for (j = i + 1; j < len; j++) {
        if (arr[i][t] === arr[j][t]) {
          arr.splice(j, 1)
          len--
          j--
        }
      }
    }
  }
  // 无指定字段
  else {
    for (i = 0; i < len; i++) {
      for (j = i + 1; j < len; j++) {
        if (arr[i] === arr[j]) {
          arr.splice(j, 1)
          len--
          j--
        }
      }
    }
  }
  return arr
}

方法九

/** 数组去重
 * 思路:利用数组原型对象上的 lastIndexOf 方法
 * @param arr 需要去重的数组
 * @param t 根据 t 字段(指定)进行去重
 * @returns {*[]} 已去重后的数据
 */
deduplicate(arr, t = "") {
  const newArr = [],
    assignList = []
  // 有指定字段
  if (t) {
    for (let i = 0; i < arr.length; i++) {
      if (assignList.lastIndexOf(arr[i][t]) === -1) {
        assignList.push(arr[i][t])
        newArr.push(arr[i])
      }
    }
  }
  // 无指定字段
  else {
    for (let i = 0; i < arr.length; i++) {
      newArr.lastIndexOf(arr[i]) !== -1 ? "" : newArr.push(arr[i])
    }
  }
  return newArr
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7122.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!