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

第一次，我尝试循环遍历旧元素，在“：”处拆分项目，但随后我看到了有关样式名称的问题。如果我检查字符串中是否包含“ left”，它将在“ left”上以及包含“ left”的所有其他样式名称上返回true，例如margin-left，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

如果您支持[(ngModel)] = "data.permissions"，则：

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

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)

如何合并两个数组，但要注意不要使用相同的元素

3 个答案: