筛选出数组中不同的部分

问题导入

  const oldArr = [
    { title: '周一' },
    { title: '周二' },
    { title: '周三' },
    { title: '周四' },
    { title: '周五' },
    { title: '周六' },
    { title: '周日' }
  ]

  const newArr = [{ title: '周一' }, { title: '周二' }, { title: '周三' }]

  // 得到: 
  // filterArr:[ { title: '周四' }, { title: '周五' }, { title: '周六' }, { title: '周日' }]

解决

import React from 'react'
import ReactDOM from 'react-dom'
export default function Lodash () {
  const oldArr = [
    { title: '周一' },
    { title: '周二' },
    { title: '周三' },
    { title: '周四' },
    { title: '周五' },
    { title: '周六' },
    { title: '周日' }
  ]

  const newArr = [{ title: '周一' }, { title: '周二' }, { title: '周三' }]
  // 筛选出两组数组中不同的地方,返回一个新的数组
  const filterArr = oldArr.filter((it) => {
  // 得到相同的部分
    const arr = newArr.find((item) => item.title === it.title)
    // 不返回相同的部分, 取反
    return !arr
  })
  console.log(filterArr)
  return <div />
}

ReactDOM.render(<Lodash />, document.getElementById('root'))

使用lodash中的方法 解决

import React from 'react'
import ReactDOM from 'react-dom'
import { differenceBy } from 'lodash' // 导入方法
export default function Lodash () {
  const oldArr = [
    { title: '周一' },
    { title: '周二' },
    { title: '周三' },
    { title: '周四' },
    { title: '周五' },
    { title: '周六' },
    { title: '周日' }
  ]

  const newArr = [{ title: '周一' }, { title: '周二' }, { title: '周三' }]
  const filterArr = differenceBy(oldArr, newArr, 'title') // 以什么进行筛选
  console.log(filterArr)
  return <div />
}

ReactDOM.render(<Lodash />, document.getElementById('root'))