美文网首页
JS数组去重

JS数组去重

作者: 闲人追风落水 | 来源:发表于2022-04-08 15:06 被阅读0次
需要处理的数组
const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN];

数组去重的方法

1.Set() + Array.from()

2.双层循环 + splice

3.空数组添加 + 数据存在判定

``

1.Set() + Array.from()

Set对象:是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即Set中的元素是唯一的。
Array.from() 方法:对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

2.双层循环 + splice

function removeDuplicate(arr) {
  let len = arr.length
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        len-- // 减少循环次数提高性能
        j-- // 保证j的值自加后不变
      }
    }
  }
  return arr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

3.空数组添加 + 数据存在判定

1.利用indexOf判断新元素是否存在新数组中

function removeDuplicate(arr) {
  const newArr = []
  arr.forEach(item => {
    if (newArr.indexOf(item) === -1) {
      newArr.push(item)
    }
  })
  return newArr // 返回一个新数组
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

2.利用includes判断新元素是否存在新数组中

function removeDuplicate(arr) {
  const newArr = []
  arr.forEach(item => {
    if (!newArr.includes(item)) {
      newArr.push(item)
    }
  })
  return newArr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

为什么includes能够检测到数组中包含NaN,其涉及到includes底层的实现。如下图为includes实现的部分代码,在进行判断是否包含某元素时会调用sameValueZero方法进行比较,如果为NaN,则会使用isNaN()进行转化。

3.filter()代替空数组+indexOf()

function removeDuplicate(arr) {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index
  })
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined ]

4.利用map判断是否重复

function removeDuplicate(arr) {
  const map = new Map()
  const newArr = []

  arr.forEach(item => {
    if (!map.has(item)) { // has()用于判断map是否包为item的属性值
      map.set(item, true) // 使用set()将item设置到map中,并设置其属性值为true
      newArr.push(item)
    }
  })

  return newArr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

相关文章

  • 数组的去重和数组中对象的去重

    数组中对象去重 方式1 jq方式 方式2 原生js方式 普通数组的去重 方式1 普通的数组去重js 方式2 Se...

  • js数组去重、对象数组去重

    普通数组去重 一、普通数组去重 方法一:遍历数组法 方法二:排序法 方法三:对象法 对象数组去重 方法一:将对象数...

  • js数组去重

    Set结构去重 ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 向 Se...

  • JS数组去重

    方法1:两层for循环,外层循环原数组,内层循环时进行比较。 方法2:利用对象的属性不能相同的特点去重 方法3:利...

  • js数组去重

  • js数组去重

    1.利用对象的属性唯一性去重 2.利用es6的Set

  • js数组去重

  • js 数组去重

  • JS数组去重

    方法一:遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组 ...

  • js数组去重

    方法一 (es6 set方法,简单粗暴) 方法二 创建空数组,用indexOf方法检索,没有的话插入新数组中 方...

网友评论

      本文标题:JS数组去重

      本文链接:https://www.haomeiwen.com/subject/wftbjrtx.html