Javascript 如何组合两个数组，但不考虑相同的元素

我有一个简单的问题。在我环顾四周之前，我发现答案主要是针对另一种情况

我有两个具有css属性的数组

old=['font-size: 12px;','color: 12px;','border-left: 1px solid red;'];
new=['font-size: 20px;','border-left: 1px solid green;','left:20px;'];

如果对旧阵列进行了某些更改，如何将这两个阵列组合在一起，使其最终只包含具有“新”阵列属性的唯一样式

在上面的例子中，我希望得到这个结果

result=['font-size: 20px;','color: 12px;','border-left: 1px solid green;','left:20px;'];

第一次，我尝试在旧元素之间进行循环，在“：”处拆分项目，但随后我发现样式名称有问题。 如果我检查“left”是否在字符串中，它将在“left”上返回true，但在包含“left”的所有其他样式名称上也会返回true，例如左边距、左边填充

我如何用最简单的方法解决它

---

非常感谢。

您可以从这两个数组中创建一个数组（末尾有新项），然后

将
减少为一个对象，该对象由字符串中
：
前面的子字符串索引，然后获取该对象的条目：


const old=['font-size:12px；'，'color:12px；'，'border left:1px solid red；']；
const newArr=['font-size:20px；'，'border left:1px solid green；'，'left:20px；']；
const resultObj=[…old，…newArr].reduce（（a，str）=>{
常量[key，val]=str.split（/：？/）；
a[键]=val；
返回a；
}, {});
const result=Object.entries（resultObj.map（[key，value]）=>“${key}:${value}”）；
控制台日志（结果）使用可以使用，并且：


const css1=['font-size:12px；'，'color:12px；'，'border-left:1px实心红色；']；
常量css2=['font-size:20px；'，'border-left:1px纯绿色；'，'left:20px；']；
常数合并=
对象值(
[…css1，…css2]。减少(
（acc，x）=>（acc[x.match（/（.*）：/）[1]]=x，acc），{}）；
console.log（合并）
如果您支持
对象。fromEntries
，则：


函数合并CSS（…参数）{
返回Object.entries(
Object.fromEntries（args.flatMap（a=>a.map（a=>a.match（/^[^:\ s]*.[^:\ s].+$/g）））
).map（arg=>arg.join（“：”）；
}
const result=mergeCss（['font-size:12px；'，'color:12px；'，'border-left:1px solid red；']，
['font-size:20px；'，'border-left:1px纯绿色；'，'left:20px；']）；
控制台日志（结果）年份，乍一看，这可能就是我想要做的。你能解释一下“…”brefore“old”和“newArr”就行了吗？这就是扩展语法，它创建了一个由“old”元素组成的数组，后面是“new”元素。这和旧的一样。需要记住的事情更多@prasanth OP提供了一个polyfill——如果您在任何类型的传输环境中工作，那么您可能已经可以访问它了