【前端能看懂的代碼】之經典去重

古都近日陰雨多，遲早須要穿秋褲。吾卻孤注要風度，身體發抖無人助。

在寫代碼的過程當中，咱們常常會遇到須要去重對象、數組等組裝數據，這些都是ES6的一些基本功，對於特別想要代碼優雅的開發來講尤其重要。爲了方便你我還有那個她，咱們一些來看看吧！

明確需求是什麼？

去掉數組裏面不想要的對象！！！

咱們須要哪些知識點？

• Object.entries遍歷對象爲二維數組
• 利用reduce來‘累計’咱們想要呈現的數據
• includes過濾不須要要的id

開始看代碼

1. 找到value爲false的id,構形成數組；

const a = {1:false,2:true,3:false}
const result = Object.entries(a).reduce(
        (result, [key, value]) => {
          if (!value) {
            result.push(key)
          }
          return result
        },
        []
      )
 console.log(result)複製代碼

2. 過濾掉數組中指定id的對象；

const b = [{id:1,name:'zx'},{id:2,name:'cv'},{id:3,name:'yh'}]
const newSelected = b.filter(item => {
        return !result.join(',').includes(item.id)
      })
 console.log(newSelected)
 複製代碼

這樣，咱們就去掉了不想要的對象數組了；

3.數組對象如何去重

const array = [{id:1},{id:2},{id:1}]
const temp = {}
const obj = array.reduce((total,next) =>{
  temp[next.id]? '' : temp[next.id] = true && total.push(next)
  return total
},[])
console.log(obj)

複製代碼

4.地址參數解析

a: reduce使用

function qs(search) {
  if (typeof search !== 'string' || !search) return search
  return search.split('&').reduce((res, cur) => {
    const arr = cur.split('=')
    return Object.assign({ [arr[0]]: arr[1] }, res)
  }, {})
}
const b = qs('a=1&b=2')
console.log(b)
複製代碼

b:使用URLSearchParam api

const a = new URL('https://s.taobao.com/search?name=list&age=23')
const b = new URLSearchParams(a.search)
const obj={
  name: b.get('name'),
  age: b.get('age')
}
console.log(obj)

複製代碼

5.轉換成樹形數據

const a = [ { id: 1, pid: 0 }, { id: 2, pid: 0 },{ id: 3, pid: 1 },{ id: 4, pid: 1 }, { id: 5, pid: 2 }, { id: 6, pid: 2 }]

function ArrayToTree(list) {
    const map = new Map()
    list.forEach(item => {
        if (!map.has(item.pid)) {
            map.set(item.pid, [])
        }
        map.get(item.pid).push(item)
    })
    function recursive(pid) {
        return  map.get(pid).map(item => {
            if (map.has(item.id)) {
                item.children = recursive(item.id)
            }
            return item
        })
    }
    return recursive(0)
}
const a = [ { id: 1, pid: 0 }, { id: 2, pid: 0 },{ id: 3, pid: 1 },{ id: 4, pid: 1 }, { id: 5, pid: 2 }, { id: 6, pid: 2 }]
const data = ArrayToTree(a)
console.log(...data)
複製代碼

6. 判斷兩個對象是否相等

let obj1 = { id: 1, name: '張三' }
let obj2 = { id: 1, name: '張三' }

function isEqual(a, b) {
  // getOwnPropertyNames
  const aProps = Object.keys(a)
  const bProps = Object.keys(b)
  if (aProps.length !== bProps.length) {
    return false
  }
  for (let i = 0; i < aProps.length; i++) {
    let propName = aProps[i]
    let propA = a[propName]
    let propB = b[propName]
    if (propA !== propB) {
      return false
    }
  }
  return true
}

isEqual(obj1, obj2)

複製代碼

7: 拉平數組

const a = [1, 2, [3, [4]]]

function flatten(arr) {
  return arr.reduce((total, current) => {
    return total.concat(Array.isArray(current) ? flatten(current) : current)
  }, [])
}

console.log(flatten(a))

複製代碼

結束語

真正的英雄不是改變世界，而是改變本身生活的每一天~