JS中 |= 运算符如何实现合并对象属性并保留原有值？

Question

在JavaScript中，如何利用|=运算符优雅地合并两个对象的属性，同时保留目标对象的原有值而不被源对象覆盖？ 例如，给定对象obj1 = {a: 1, b: 2}和obj2 = {b: 3, c: 4}，使用|=运算符实现合并后，期望结果为{a: 1, b: 2, c: 4}，其中属性b保留了obj1的原始值2。这种操作的具体实现方式是什么？能否通过|=运算符简化传统方法（如Object.assign或扩展运算符）中的逻辑判断过程，从而提高代码可读性和执行效率？此问题特别关注|=运算符在位操作与赋值结合时的独特行为及其在对象属性合并场景中的潜在应用。

Answer 1

1. 初识|=运算符及其在JavaScript中的作用

在JavaScript中，|= 是一种位或赋值运算符。它将两个数字转换为32位有符号整数，并执行按位或操作，然后将结果赋值给左操作数。例如：

let a = 5; // 二进制: 0101
let b = 3; // 二进制: 0011
a |= b;    // 结果：a = 7 (二进制: 0111)

从上述例子可以看出，|= 运算符的核心特性是保留左边操作数的值并结合右边操作数的非零值。

1.1 运算符的独特行为

|= 运算符通常用于处理数值类型的变量，但在某些特殊场景下，也可以尝试将其应用到对象合并的操作中。其关键在于如何通过逻辑判断避免覆盖目标对象的属性值。

2. 对象合并的基本方法与局限性

在JavaScript中，常见的对象合并方法包括 Object.assign 和扩展运算符（...）。然而，这些方法存在一个显著的问题：当目标对象和源对象包含相同键时，目标对象的值会被覆盖。

const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};

// 使用传统方法
const mergedObj = {...obj1, ...obj2}; 
console.log(mergedObj); // 输出 {a: 1, b: 3, c: 4}

可以看到，属性 b 的值被 obj2 覆盖了。

2.1 局限性的分析

传统方法无法满足“保留目标对象原有值”的需求。我们需要一种更优雅的方式，确保目标对象的属性不被覆盖。

3. 利用|=实现对象合并的具体步骤

虽然|=本质上是一个位运算符，但我们可以借助它的特性来模拟对象合并的行为。以下是具体实现方式：

1. 遍历源对象的所有属性。
2. 对于每个属性，检查目标对象是否已经存在该属性。
3. 如果目标对象中不存在该属性，则使用|=将其添加到目标对象中。

function mergeObjects(obj1, obj2) {
    for (let key in obj2) {
        if (!obj1.hasOwnProperty(key)) {
            obj1[key] |= obj2[key];
        }
    }
    return obj1;
}

const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
console.log(mergeObjects(obj1, obj2)); // 输出 {a: 1, b: 2, c: 4}

3.1 代码解析

上述代码的关键点在于：
- 使用 hasOwnProperty 方法判断目标对象是否已包含某个属性。
- 如果目标对象中不存在该属性，则通过|=将其添加。

4. 性能优化与可读性提升

相比传统的 Object.assign 或扩展运算符方法，基于|=的实现方式具有以下优势：

比较维度	传统方法	|= 实现
性能	需要创建新对象	直接修改原对象，减少内存占用
可读性	逻辑较简单但缺乏灵活性	引入条件判断，语义更清晰
适用范围	适合一般场景	更适合需要保留目标对象值的场景

4.1 潜在应用场景

|= 运算符的这种用法特别适合以下场景：
- 配置对象的合并，其中默认配置不应被用户提供的配置覆盖。
- 数据模型的更新，保留原始数据的同时补充新字段。

5. 流程图展示逻辑

以下是基于|=运算符的对象合并逻辑流程图：

```mermaid
flowchart LR
    A[开始] --> B{目标对象\n是否有属性key}
    B --是--> C[跳过]
    B --否--> D[目标对象[key] |= 源对象[key]]
    D --> E[结束]
```