合并对象数组并获得唯一值

Question

我有两个包含嵌套对象的数组。我想合并这些，得到一个独特的阵列

我有这两个阵列

// ARRAY 1
let variants = [
{color: "Red", sizes: "Small", material: "Cotton", price: "$100", ...},
{color: "Red", sizes: "Large", material: "Cotton", price: "$120", ...},
{color: "Blue", sizes: "Small", material: "Cotton", price: "$150", ...},
{color: "Blue", sizes: "Large", material: "Cotton", price: "$180", ...},
]
// ARRAY 2
let newVariants = [
{color: "Red", sizes: "Small", material: "Cotton"}, // this one is already exist in ARRAY 1
{color: "Red", sizes: "Large", material: "Cotton"}, // this one is already exist in ARRAY 1
{color: "Blue", sizes: "Small", material: "Cotton"}, // this one is already exist in ARRAY 1
{color: "Blue", sizes: "Large", material: "Wool"}, // this one is new object
{color: "Green", sizes: "Large", material: "Cotton"}, // this one is new object
]

我想要这个

[
{color: "Red", sizes: "Small", material: "Cotton", price: "$100"},
{color: "Red", sizes: "Large", material: "Cotton", price: "$120"},
{color: "Blue", sizes: "Small", material: "Cotton", price: "$150"},
{color: "Blue", sizes: "Large", material: "Cotton", price: "$180"},
{color: "Blue", sizes: "Large", material: "Wool", price: null, ...},
{color: "Green", sizes: "Large", material: "Cotton", price: null, ...}
]

注意：ARRAY 1的值将始终取代ARRAY 2

谢谢！

Answer 1

我将合并这两个数组，array2位于array1之前。然后，您可以使用.reduce()构建一个对象(即：Map)，该对象由您想要合并的值的串联字符串键控。通过在合并的数组中设置array1秒，其中对象的键值将覆盖array2中的键值(因此array1的对象将优先)：

let variants = [ {color: "Red", sizes: "Small", material: "Cotton", price: "$100",}, {color: "Red", sizes: "Large", material: "Cotton", price: "$120",}, {color: "Blue", sizes: "Small", material: "Cotton", price: "$150",}, {color: "Blue", sizes: "Large", material: "Cotton", price: "$180",}, ];
let newVariants = [ {color: "Red", sizes: "Small", material: "Cotton"}, {color: "Red", sizes: "Large", material: "Cotton"}, {color: "Blue", sizes: "Small", material: "Cotton"}, {color: "Blue", sizes: "Large", material: "Wool"}, {color: "Green", sizes: "Large", material: "Cotton"}, ];
const res = Array.from([...newVariants, ...variants].reduce((acc, {price=null, ...rest}) => {
const key = Object.entries(rest).join("-"); // get a key based on the values (excluding the price)
return acc.set(key, {...rest, price});
}, new Map).values());
console.log(res);

否则，如果输出数组的顺序很重要，您可以反转数组的合并顺序，并在将其添加为对象中的值之前使用检查来查看该值是否已经设置：

let variants = [ {color: "Red", sizes: "Small", material: "Cotton", price: "$100",}, {color: "Red", sizes: "Large", material: "Cotton", price: "$120",}, {color: "Blue", sizes: "Small", material: "Cotton", price: "$150",}, {color: "Blue", sizes: "Large", material: "Cotton", price: "$180",}, ];
let newVariants = [ {color: "Red", sizes: "Small", material: "Cotton"}, {color: "Red", sizes: "Large", material: "Cotton"}, {color: "Blue", sizes: "Small", material: "Cotton"}, {color: "Blue", sizes: "Large", material: "Wool"}, {color: "Green", sizes: "Large", material: "Cotton"}, ];
const res = Array.from([...variants, ...newVariants].reduce((acc, {price=null, ...rest}) => {
const key = Object.entries(rest).join("-"); // get a key based on the values (excluding the price)
return acc.set(key, acc.get(key) || {...rest, price});
}, new Map).values());
console.log(res);

Answer 2

ARRAY 1的值将始终取代ARRAY 2

您可以使用.filter和.some进行过滤，如下所示：

let variants = [ {color: "Red", sizes: "Small", material: "Cotton", price: "$100",}, {color: "Red", sizes: "Large", material: "Cotton", price: "$120",}, {color: "Blue", sizes: "Small", material: "Cotton", price: "$150",}, {color: "Blue", sizes: "Large", material: "Cotton", price: "$180",}, ];
let newVariants = [ {color: "Red", sizes: "Small", material: "Cotton"}, {color: "Red", sizes: "Large", material: "Cotton"}, {color: "Blue", sizes: "Small", material: "Cotton"}, {color: "Blue", sizes: "Large", material: "Wool"}, {color: "Green", sizes: "Large", material: "Cotton"}, ];
const isEqual = (p1, p2) => p1.color == p2.color && p1.sizes == p2.sizes && p1.material == p2.material;
const filteredExtraVariants = newVariants.filter(p1 => !variants.some(p2 => isEqual(p1, p2)));
const extraVariants = filteredExtraVariants.map(r => 
{
r.price = null;
return r;
});
const result = variants.concat(extraVariants);
console.log(result);

Answer 3

你可以做：

const variants = [{ color: "Red", sizes: "Small", material: "Cotton", price: "$100" }, { color: "Red", sizes: "Large", material: "Cotton", price: "$120" }, { color: "Blue", sizes: "Small", material: "Cotton", price: "$150" }, { color: "Blue", sizes: "Large", material: "Cotton", price: "$180" }]
const newVariants = [{ color: "Red", sizes: "Small", material: "Cotton" }, { color: "Red", sizes: "Large", material: "Cotton" }, { color: "Blue", sizes: "Small", material: "Cotton" }, { color: "Blue", sizes: "Large", material: "Wool" }, { color: "Green", sizes: "Large", material: "Cotton" }]
const result = Object.values(
[...newVariants, ...variants].reduce((a, { color, sizes, material, price = null }) =>
(a[`${color}-${sizes}-${material}`] = { color, sizes, material, price }, a), {})
)
console.log(result)

Answer 4

另一种方法是使用.reduce，如下所示：

const variants = [{ color: "Red", sizes: "Small", material: "Cotton", price: "$100" }, { color: "Red", sizes: "Large", material: "Cotton", price: "$120" }, { color: "Blue", sizes: "Small", material: "Cotton", price: "$150" }, { color: "Blue", sizes: "Large", material: "Cotton", price: "$180" }]
const newVariants = [{ color: "Red", sizes: "Small", material: "Cotton" }, { color: "Red", sizes: "Large", material: "Cotton" }, { color: "Blue", sizes: "Small", material: "Cotton" }, { color: "Blue", sizes: "Large", material: "Wool" }, { color: "Green", sizes: "Large", material: "Cotton" }]
const result = [...variants, ...newVariants].reduce((acc, {color, sizes, material, price = null}) => {
const key = `${color}-${sizes}-${material}`;
acc[key] ??= {color, sizes, material, price};
return acc;
}, {});
console.log(Object.values(result))