Happy Js array de-duplication

When we write business code, we often encounter the need to remove the complex array, so how to implement the handsome array to remove the need? Please finish reading this article.

Simple array deduplication

Let’s take a look at a simple array de-duplication. Since there are many ways to de-duplication on the Internet, here are just a few of my favorites.

// A simple array containing each item of a simple type
const list = [11.11.33.2.'true'.true.undefined.null.null.false.'false'.false.NaN.NaN]

// Use the set data structure to remove weights
const duplicateRemoval = list= > Array.from(new Set(list))

// for loop deweight
const duplicateRemoval = list= > {
  const arr = []
  list.forEach(item= >! arr.includes(item) && arr.push(item))return arr
}

// The filter function is de-weighted
const duplicateRemoval = list= > {
  return list.filter((item, index, arr) = > {
    // Current element, the first index in the original array == current index value, otherwise return current element
    return arr.indexOf(item) === index;
  });
}
// Let's simplify the function above, very well, very perfectly
const duplicateRemoval = list= > list.filter((item, index, arr) = > arr.indexOf(item) === index)

// Use the reduce function to remove weight
const duplicateRemoval = list= > list.reduce((accumulator, currentValue) = > {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue)
  }
  return accumulator
}, [])
// All right, let's simplify it as usual
const duplicateRemoval = list= > list.reduce((acc, cur) = >(! acc.includes(cur) && acc.push(cur), acc),[])Copy the code

There are so many ways to write simple array deduplicating, any one search is ten kinds of eight kinds, since our topic is not simple array deduplicating, so for the time being, I will write this ~

Complex arrays are conditionally de-duplicated

// An array of objects we often encounter where we need to remove duplicates according to certain conditions
const list = [{name: 'lily1'.code: '133'}, {name: 'lily1'.code: '323'}, {name: 'lily2'.code: '333'}, {name: 'lily3'.code: '333'}, {name: 'lily4'.code: '332'}, {name: 'lily4'.code: '333'}]

// Due to the nature of complex data structures, we can no longer simply use set for de-duplication

// Use the filter function to remove the weight
const duplicateRemovalByFilter = (list, key) = > {
  const map = {}
  return list.filter(item= > {
    let value = item[key]
    // Write a map that records the number of occurrences of the filter, and then return true when the number is 1, so that the filtered item has only appeared once in the array
    if(! map[value]) { map[value] =1
    } else {
      map[value] += 1
    }
    return map[value] === 1})}// Simplify as usual
const duplicateRemovalByFilter = (list, key) = > {
  const map = {}
  // The return value of the assignment statement is equal to the assigned value
  // let a; / / returns undefined
  // a = 688; / / back to 688
  return list.filter(item= >! map[item[key]] && (map[item[key]] =true))}// Use the reduce function to remove weight
const duplicateRemovalByReduce = (list,key) = > {
  const obj = list.reduce((pre, cur) = > {
    // Check whether the corresponding value of the accumulator is undefined. If so, assign the current value, if not, leave the status quo
    pre[cur[key]] = pre[cur[key]] || cur
    return pre
  }, {})
  // Returns an iterable array of values in obj
  return Object.values(obj)
}
// Again, here comes our streamlining
const duplicateRemovalByReduce = (list,key) = > {
  // A friend saw the application of the comma operator in vue source code.
  return Object.values(list.reduce((pre, cur) = > (pre[cur[key]] = pre[cur[key]] || cur, pre), {}))
}
Copy the code

Because I’m lazy, complex arrays are conditional rewrites. There are more ways to write, welcome to exchange ~

A point worth noting

The compact writing method looks very comfortable with less code. But if you don’t comment on one of your business functions and suddenly get a paragraph like this, you can irritate your colleagues and yourself by looking at the code after a long time. So I have two suggestions:

1. A function does only one thing, and to remove the function is to remove the function, and to separate the function out and write it as a separate function, not mixed in the business logic.
2. How to write comments

Thanks for reading, MUa ~