Electron中如何通过IPC跨进程访问和修改主进程数组？

嘿，这个问题我太熟了！Electron里通过remote传递数组和对象的行为差异确实挺坑的——对象能直接修改主进程的实例，但数组一传递就变成序列化后的拷贝，改了白改。你用Proxy的思路其实方向对，但没处理数组的原型方法，所以push这些函数找不到才报错。下面给你几个靠谱的解决办法：

与其折腾代理，不如直接在主进程里给数组套一层管理对象，把所有修改操作都做成方法，渲染进程通过remote调用这些方法来操作主进程的真实数组。这样所有修改都在主进程执行，完全避开拷贝问题。

主进程代码：

// 主进程里封装数组的操作方法
global.arrayHandler = {
  _realArray: [],
  // 封装需要的数组操作
  push(item) {
    this._realArray.push(item);
    return this._realArray.length;
  },
  pop() {
    return this._realArray.pop();
  },
  splice(...args) {
    return this._realArray.splice(...args);
  },
  // 获取最新数组（返回拷贝避免直接引用）
  getCurrentArray() {
    return [...this._realArray];
  }
};

渲染进程代码：

const arrayHandler = remote.getGlobal('arrayHandler');
arrayHandler.push('1');
console.log(arrayHandler.getCurrentArray()); // 输出 ['1']，完全符合预期

这个方案的好处是简单易懂，还能精确控制允许的操作，安全性也更高——不会让渲染进程随意修改主进程的数组。

你之前的Proxy是代理了一个空对象，没继承数组的原型，所以push、join这些数组自带的方法根本找不到。调整一下Proxy的目标和get陷阱，就能让它正常工作：

主进程代码：

const realArray = [];
global.arrayProxy = new Proxy(realArray, {
  get(target, property) {
    // 如果是数组原型上的方法，绑定到真实数组上执行
    if (typeof Array.prototype[property] === 'function') {
      return Array.prototype[property].bind(target);
    }
    // 其他属性直接返回真实数组的对应值
    return Reflect.get(target, property);
  },
  // set陷阱直接转发到真实数组
  set(target, property, value) {
    return Reflect.set(target, property, value);
  }
});

渲染进程代码：

const proxy = remote.getGlobal('arrayProxy');
proxy.push(1); // 现在不会报错了！
console.log(proxy.join(',')); // 输出 "1"

这里直接把真实数组作为Proxy的目标，而不是空对象，再通过get陷阱把数组原型方法绑定到真实数组上，确保方法执行时的this指向主进程里的真实数组，而不是渲染进程的代理对象。

现在Electron官方其实不推荐用remote模块了，因为存在安全和性能问题。更规范的做法是通过ipcMain和ipcRenderer发送消息来操作主进程的数组：

主进程代码：

const { ipcMain } = require('electron');
const appArray = [];

// 注册处理数组push的IPC handler
ipcMain.handle('array:push', (_, item) => {
  appArray.push(item);
  return appArray.length;
});

// 注册获取数组的IPC handler
ipcMain.handle('array:get', () => {
  return [...appArray];
});

渲染进程代码：

const { ipcRenderer } = require('electron');

async function updateArray() {
  // 调用主进程的push方法
  await ipcRenderer.invoke('array:push', '1');
  // 获取最新数组
  const latestArray = await ipcRenderer.invoke('array:get');
  console.log(latestArray); // 输出 ['1']
}
updateArray();

这个方案更符合Electron的现代开发规范，避免了remote带来的潜在问题，而且所有操作都是显式的IPC调用，调试和维护起来更清晰。

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