如何将两个阵列组合在一起，但要小心不相同的元素

Question

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

我有两个带有CSS-Properties的数组

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;'];

第一次，我尝试通过旧元素进行循环，将项目分开：：但是，我看到了有关样式名称的问题。如果我检查"左"字符串是否在字符串中，它将在"左"上返回true，但也将在所有其他包含"左"的样式名称上，例如边距 - 左，padding-Left ...

我如何以最简单的方式解决它？

非常感谢。

Answer 1

您可以从两个（末尾的新项目）创建一个单个数组，然后reduce进入字符串中:之前的子字符串索引的对象，然后获取对象的条目：

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) => {
  const [key, val] = str.split(/: ?/);
  a[key] = val;
  return a;
}, {});
const result = Object.entries(resultObj).map(([key, value]) => `${key}: ${value}`);
console.log(result);

请注意， new是一个保留的单词 - 它不能是变量名称。

Answer 2

当您支持Object.fromEntries时，：

function mergeCss(...args) {
    return 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 solid green;','left:20px;']);
console.log(result);

您可以将两个以上的数组传递给上述功能。

Object.fromEntries的polyfill：

Object.fromEntries = arr => 
    Object.assign({}, ...Array.from(arr, ([k, v]) => ({[k]: v}) ));

Answer 3

使用可以使用Object.Values()，Array.reduce()和String.match()：

const css1 = ['font-size: 12px;','color: 12px;','border-left: 1px solid red;'];
const css2 = ['font-size: 20px;','border-left: 1px solid green;','left:20px;'];
const merged =
  Object.values(
    [...css1, ...css2].reduce(
      (acc, x) => (acc[x.match(/(.*)s*:/)[1]] = x, acc), {}));
console.log(merged)