useArrayDifference

分类

数组

导出大小

301 B

上次更改

3 个月前

响应式地获取两个数组的差异。

默认情况下，它返回第一个数组与第二个数组的差异，即 A \ B，A 中 B 的相对补集。

你可以传递 symmetric 选项来获取两个数组 A △ B 的对称差。

用法

与响应式数组一起使用

import { useArrayDifference
 } from '@vueuse/core'

const list1
 = ref
([0, 1, 2, 3, 4, 5])
const list2
 = ref
([4, 5, 6])
const result
 = useArrayDifference
(list1
, list2
)
// result.value: [0, 1, 2, 3]
list2
.value
 = [0, 1, 2]
// result.value: [3, 4, 5]

与响应式数组一起使用，并使用函数进行比较

import { useArrayDifference
 } from '@vueuse/core'

const list1
 = ref
([{ id
: 1 }, { id
: 2 }, { id
: 3 }, { id
: 4 }, { id
: 5 }])
const list2
 = ref
([{ id
: 4 }, { id
: 5 }, { id
: 6 }])

const result
 = useArrayDifference
(list1
, list2
, (value
, othVal
) => value
.id
 === othVal
.id
)
// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }]

对称差

这个可组合函数还支持通过传递 symmetric 选项来获取对称差。

import { useArrayDifference
 } from '@vueuse/core'

const list1
 = ref
([{ id
: 1 }, { id
: 2 }, { id
: 3 }, { id
: 4 }, { id
: 5 }])
const list2
 = ref
([{ id
: 4 }, { id
: 5 }, { id
: 6 }])

const result
 = useArrayDifference
(
  list1
,
  list2
,
  (value
, othVal
) => value
.id
 === othVal
.id
,
  { symmetric
: true }
)
// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 6 }]

类型声明

export interface UseArrayDifferenceOptions {
  /**
   * Returns asymmetric difference
   *
   * @see https://en.wikipedia.org/wiki/Symmetric_difference
   * @default false
   */
  symmetric
?: boolean
}
export type UseArrayDifferenceReturn
<T
 = any> = ComputedRef
<T
[]>
export declare function useArrayDifference
<T
>(
  list
: MaybeRefOrGetter
<T
[]>,
  values
: MaybeRefOrGetter
<T
[]>,
  key
?: keyof T
,
  options
?: UseArrayDifferenceOptions,
): UseArrayDifferenceReturn
<T
>
export declare function useArrayDifference
<T
>(
  list
: MaybeRefOrGetter
<T
[]>,
  values
: MaybeRefOrGetter
<T
[]>,
  compareFn
?: (value
: T
, othVal
: T
) => boolean,
  options
?: UseArrayDifferenceOptions,
): UseArrayDifferenceReturn
<T
>