如何在JavaScript文件中修改数组元素并保存更新后的文件？

看起来你已经在前端完成了数组元素的修改逻辑，但这里有个关键问题：浏览器中的JavaScript没有直接读写本地或服务器文件的权限——这是浏览器的安全机制决定的。要把修改后的数组保存回原JS文件，你需要通过后端服务来完成这个操作，流程大概是：前端把更新后的数组数据传给后端，后端负责写入到对应的文件中。

下面结合你的代码，给出完整的实现方案：

1. 前端：完成数组修改并发送数据到后端 #

先完善你现有的前端代码，在修改完数组后，把country_arr和city_arr通过HTTP请求发送给后端：

// 你原有的数组修改逻辑
var country = document.getElementById('edit_country').value;
for (i = 0; i < country_arr.length; i++) {
  if(country_arr[i] == country) {
    var city = "|".concat(document.getElementById("add_city").value);
    city_arr[i] = city_arr[i].concat(city);
  }
}

// 新增：把更新后的数组发送给后端
fetch('/save-arrays', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    countryArr: country_arr,
    cityArr: city_arr
  })
})
.then(response => response.text())
.then(data => {
  console.log('数组保存成功:', data);
  // 这里可以添加成功后的提示，比如弹窗告知用户
})
.catch(error => {
  console.error('保存失败:', error);
});

2. 后端：接收数据并写入JS文件 #

这里以Node.js为例（和前端JS技术栈匹配，上手成本低），使用fs模块来写入文件：

// 后端Node.js代码（基于Express框架）
const express = require('express');
const fs = require('fs');
const app = express();

// 解析JSON格式的请求体
app.use(express.json());

// 处理前端的保存请求
app.post('/save-arrays', (req, res) => {
  const { countryArr, cityArr } = req.body;
  
  // 生成要写入JS文件的内容：把数组转为JS变量声明
  const fileContent = `
var country_arr = ${JSON.stringify(countryArr)};
var city_arr = ${JSON.stringify(cityArr)};
`;
  
  // 写入到你的目标JS文件（注意文件路径要和实际路径匹配）
  fs.writeFile('./path/to/your/arrays.js', fileContent, (err) => {
    if (err) {
      console.error('写入文件失败:', err);
      res.status(500).send('保存失败');
      return;
    }
    res.send('数组已成功保存到文件');
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在http://localhost:3000');
});

额外提示 #

• 如果只是存储数据，更推荐用JSON文件代替JS文件，读写更直接，不需要生成变量声明代码，直接写入JSON字符串即可。
• 要注意后端文件路径的正确性，fs.writeFile的路径是相对于服务器启动目录的。
• 生产环境中建议添加数据校验逻辑，避免非法数据破坏文件内容。

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