如何合并两个CSS属性数组并保留唯一属性（新属性优先）

嘿，这个问题我之前处理CSS样式合并的时候也踩过坑！你遇到的核心问题就是不能用字符串包含来判断属性名，毕竟像left和margin-left这种是完全不同的CSS属性，得精准匹配完整的属性名才行。

最简的解决方案是利用JavaScript对象的键唯一性来处理：把两个数组的样式都转成“属性名-完整样式”的对象，然后用新对象覆盖旧对象的同名属性，最后再转回数组即可。这样既避免了属性名误匹配，又天然实现了“新属性覆盖旧属性”的需求。

具体代码实现 #

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 stylesToObject = (styles) => {
  return styles.reduce((obj, styleStr) => {
    // 精准拆分属性名：找到第一个冒号的位置（CSS属性名里不会有冒号）
    const colonPos = styleStr.indexOf(':');
    if (colonPos === -1) return obj; // 跳过无效的样式字符串
    
    const propName = styleStr.slice(0, colonPos).trim();
    obj[propName] = styleStr;
    return obj;
  }, {});
};

// 合并对象：新样式对象的属性会覆盖旧对象的同名属性
const mergedStylesObj = { ...stylesToObject(old), ...stylesToObject(newArr) };

// 把合并后的对象转回数组，得到最终结果
const result = Object.values(mergedStylesObj);

console.log(result);
// 输出：["font-size: 20px;", "color: 12px;", "border-left: 1px solid green;", "left:20px;"]

方案说明 #

1. 精准提取属性名：通过indexOf(':')找到第一个冒号的位置，截取之前的内容作为属性名，确保拿到的是完整、准确的属性名（比如border-left不会被拆成border）。
2. 对象天然去重覆盖：JavaScript对象的键是唯一的，当我们用扩展运算符合并两个对象时，后面的对象（新样式）会自动覆盖前面对象（旧样式）的同名键，完美符合你的需求。
3. 简洁高效：整个逻辑用了数组的reduce和对象扩展运算符，代码量少，可读性高，而且时间复杂度是O(n+m)（n和m分别是两个数组的长度），效率也不错。

内容的提问来源于stack exchange，提问作者mikeD