如何在 React Native 中从两个数组中提取不相同的元素?

Question

让我们，我有两个带字符串的数组。

let a = ["ABC", "DEF"]
let b = ["ABC", "DEF", "GHI"]

我想比较上面的两个数组，并制作一个名为 c 的新数组，其中包含以下内容。

c = ["GHI"]

所以，我想比较 a 和 b 数组，并将不相同的元素推送到一个新数组中。

如何在 React Native 中执行此操作？

Answer 1

您可以通过以下步骤执行此操作：

• 首先获取那些不在b中的a元素
• 然后获取那些不在a中的b元素
• 然后concat()两个数组。

let a = ["ABC", "DEF"]
let b = ["ABC", "DEF", "GHI"]
const res = a.filter(x => !b.includes(x)).concat(b.filter(x=> !a.includes(x)))
console.log(res)

代码的工作原理

考虑这条线

a.filter(x => !b.includes(x))

filter()是接受回调的数组方法。如果回调返回true则元素将被添加到结果数组中，否则不会。

所以现在在上面的代码中x是数组b的元素，我们正在迭代它。 如果数组中存在xb.includes(x)b否则false将返回true。

!运算符将true转换为假和反转

因此，如果x在b里面，它将返回true.因此，通过!它将变得false并且false将从回调返回。因此，元素x不会包含在结果/过滤数组中。

上一行的句子是"它只得到那些b中不存在的数组a项">

第二行

b.filter(x=> !a.includes(x))

获取不在a中的b元素。

最后concat()用于连接两个阵列。

Answer 2

你也可以像这样使用 Array.reduce 和 Array.filter：

const findUniques = (a,b) => [...a,...b].reduce((r,c,i,a) => {
a.filter(x => x===c).length === 1 ? r.push(c) : null
return r
}, [])
console.log(findUniques(["ABC", "DEF"], ["ABC", "DEF", "GHI"]))
console.log(findUniques(["ABC", "DEF"], ["ABC"]))
console.log(findUniques(["ABC", "DEF", "AAA"], ["AAA", "DEF", "GHI"]))

如果您正在使用lodash这对于xor来说变得非常微不足道：

console.log(_.xor(["ABC", "DEF"], ["ABC", "DEF", "GHI"]))
console.log(_.xor(["ABC", "DEF"], ["DEF"]))
console.log(_.xor(["ABC", "DEF", "AAA"], ["AAA", "DEF", "GHI"]))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Answer 3

如果你想防止遍历数组O(n²)次，因为必须在每个数组中搜索重复值，你可以利用JavaScriptObjects的性能。

const a = ["ABC", "DEF", "JKL"]
const b = ["ABC", "DEF", "GHI"]
const getUniqueValues = (a, b) => {
const uniqueValuesObject = [...a, ...b].reduce((uniqueValuesObject, value) => {
// if the value already exists, then it is not unique
if (uniqueValuesObject[value]) {
uniqueValuesObject[value] = false
} else {
uniqueValuesObject[value] = true
}
return uniqueValuesObject
}, {})
return Object.entries(uniqueValuesObject).reduce((uniqueValues, [value, isUnique]) => {
if (isUnique) {
uniqueValues.push(value)
}
return uniqueValues
}, [])
}
const c = getUniqueValues(a, b)
console.log(c)

这可以通过使用delete来缩短，但是与上面的解决方案相比，我不确定这是否会导致性能下降。

const a = ["ABC", "DEF", "JKL"]
const b = ["ABC", "DEF", "GHI"]
const getUniqueValues = (a, b) => {
const uniqueValuesObject = [...a, ...b].reduce((uniqueValuesObject, value) => {
// delete if the value already exists
if (uniqueValuesObject[value]) {
delete uniqueValuesObject[value]
} else {
uniqueValuesObject[value] = true
}
return uniqueValuesObject
}, {})
return Object.keys(uniqueValuesObject)
}
const c = getUniqueValues(a, b)
console.log(c)