JavaScript中如何比较对象键？及合并数组对象相同hex值并累加length

嘿，要比较两个对象的键是否一致，其实有几种实用的思路，我给你拆解一下：

核心思路 #

要判断两个对象的键集合是否相同，我们需要：

1. 先获取两个对象的所有键名数组
2. 验证键的数量是否一致（数量不同肯定键不一样）
3. 验证每个键是否互相存在或者排序后对比

具体实现代码 #

function compareObjectKeys(obj1, obj2) {
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  
  // 第一步：键数量不同直接返回false
  if (keys1.length !== keys2.length) return false;
  
  // 方法一：逐个检查键是否存在（性能更优）
  for (const key of keys1) {
    // 用hasOwnProperty确保只检查对象自身的键，不包含原型链
    if (!obj2.hasOwnProperty(key)) return false;
  }
  return true;

  // 方法二：排序后对比数组（写法更简洁）
  // return JSON.stringify(keys1.sort()) === JSON.stringify(keys2.sort());
}

// 测试用例
const objA = {a: 1, b: 2};
const objB = {b: 3, a: 4};
const objC = {a: 1, c: 2};
console.log(compareObjectKeys(objA, objB)); // 输出 true
console.log(compareObjectKeys(objA, objC)); // 输出 false

两种方法的小区别 #

• 方法一的性能更好，尤其是对象键很多的时候，不需要额外排序操作
• 方法二更简洁，适合快速写代码，但排序会带来一些性能开销，不过大多数场景下完全够用

首先先修正一下你给出的数组写法（原写法有点语法错误），正确的数组应该是这样：

var data = [
  { hex: "#ff847f", length: "20" },
  { hex: "#afff90", length: "18" },
  { hex: "#afff90", length: "40" },
  { hex: "#6d91b0", length: "30" },
  { hex: "#ff847f", length: "20" }
];

咱们可以用一个临时对象来做映射，快速统计每个hex对应的总length，然后再转成目标数组，具体实现如下：

实现代码 #

function mergeHexData(arr) {
  // 创建一个映射对象，key是hex值，value是累加后的length数值
  const hexMap = {};
  
  arr.forEach(item => {
    // 把字符串类型的length转成数字，避免出现"20"+"20"="2020"的错误
    const lengthNum = parseInt(item.length, 10);
    if (hexMap[item.hex]) {
      // 已存在该hex，累加length
      hexMap[item.hex] += lengthNum;
    } else {
      // 第一次遇到该hex，初始化数值
      hexMap[item.hex] = lengthNum;
    }
  });
  
  // 把映射对象转成要求的数组格式
  return Object.entries(hexMap).map(([hex, totalLength]) => ({
    hex: hex,
    length: totalLength.toString() // 如果需要保持length为字符串格式，就转回去；不需要的话可以直接用数字
  }));
}

// 调用函数得到结果
var data2 = mergeHexData(data);
console.log(data2);
// 输出结果：
// [
//   { hex: "#ff847f", length: "40" },
//   { hex: "#afff90", length: "58" },
//   { hex: "#6d91b0", length: "30" }
// ]

步骤解释 #

1. 映射对象缓存：用hex作为唯一键，这样可以O(1)时间复杂度查找是否已存在该条目，比嵌套循环遍历数组高效得多
2. 类型转换：必须把length转成数字再累加，不然字符串拼接会得到错误结果
3. 转成目标数组：用Object.entries()把映射对象拆成键值对数组，再用map()转换成你需要的对象格式

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