数据对比中的”平等性原则“

2026/3/14 22:01 星期六

我在做数据接入的时遇到了一个情况: 有两个相同的对象:secne, street,他们的形式相同,都是[{...}, {...}],内容也相同,都是{"2025-11-01 10": 10}的形式。

我需要转换成这种形式:

css 复制代码
[  { "x": "1/01", "y": 5, "s": "道路数量" },  { "x": "1/01", "y": 8, "s": "景观数量" },  { "x": "1/01", "y": 13, "s": "总数" },  ...]

我的思路是

  1. 准备一个数组let result = []
  2. 找到大的一方
  3. 遍历大的一方,然后根据大的一方取去取小的一方,取得到就拿,取不到则用0兜底
  4. 计算他们的和
  5. 用push填入result
ini 复制代码
// ❌ 这样做:分出了主次
const secneSize = Object.keys(secne).length;
const streetSize = Object.keys(street).length;
const largeOne = secneSize >= streetSize ? secne : street;

if (secneSize >= streetSize) {
  // 用 secne 的 key 遍历,去 street 里取值
} else {
  // 用 street 的 key 遍历,去 secne 里取值
}

但问题就出在这里: 这样做会明确的区分主次,导致的结果是我需要把这个判断逻辑写两次,难以维护。尽管可以抽成函数的形式来表示,但依旧会把逻辑写的很复杂。

但也可以换个思路: 不区分二者的大小,而是先找到key比较多的对象,遍历它,然后同时去取两个对象的值,同时处理

ini 复制代码
// ✅ 这样做:平等看待
const secneKeys = Object.keys(secne);
const streetKeys = Object.keys(street);
const primaryKeys = 
  secneKeys.length >= streetKeys.length ? secneKeys : streetKeys;

primaryKeys.forEach((key) => {
  const secneVal = secne[key] || 0;    // 同时从两边取
  const streetVal = street[key] || 0;
  // 统一处理
});

这样做有几个好处

  • 不再需要维护if分支
  • 可读性强,不需要在脑子里存储谁遍历谁,从哪里取值,而是找出最大的,同时遍历,取值,结束。非常好读
  • 统一容错,所有的默认值都是0

因此,我认为当遇到整合多方数据时要避免让某一个成为"主体",而是应该让每一个都保持平等的地位------选出一个合理的遍历源(比如 keys 更多的那个),然后从所有数据源里同时取值、同时处理。

ini 复制代码
// 类似的场景:对比两个数组
// ❌ 区分主次
const larger = arr1.length >= arr2.length ? arr1 : arr2;
const smaller = arr1.length >= arr2.length ? arr2 : arr1;

larger.forEach((item, idx) => {
  const val1 = larger[idx];
  const val2 = smaller[idx] || null;
});

// ✅ 平等处理
const maxLen = Math.max(arr1.length, arr2.length);
for (let i = 0; i < maxLen; i++) {
  const val1 = arr1[i] || null;
  const val2 = arr2[i] || null;
  // 同时处理
}
相关推荐
yuki_uix1 小时前
从扁平到层级:树形数据转换的工程化实践与设计哲学
前端·javascript
米丘1 小时前
vue-router 5.x 关于 RouterLink 实现原理
前端·javascript·vue.js
前端嘣擦擦1 小时前
mac 安装 nvm + node + npm(国内镜像 + 官方安装步骤)
前端·macos·npm
小码哥_常1 小时前
Jetpack Compose 1.8 新特性来袭,打造丝滑开发体验
前端
哎哟喂_11 小时前
Webpack 的按需引入的原理
前端
whisper1 小时前
前端安全护航者:三分钟带你了解 jsencrypt
前端·javascript
free-elcmacom1 小时前
C++ 函数占位参数与重载详解:从基础到避坑
java·前端·算法
远山枫谷1 小时前
🎉告别 Vuex!Vue3 状态管理利器 Pinia 核心概念与实战指南
前端·vue.js
张西餐1 小时前
前端项目如何引入大语言模型
前端