如何将循环结果值传递给新对象？含按钮触发场景示例

基础场景：循环中直接生成新对象 #

如果只是在循环过程里把遍历到的值打包成新对象，其实非常直接——你只需要在每次循环迭代时，根据当前项的数据提取需要的属性，创建一个新对象就行。拿JavaScript举个例子：

// 假设这是你的原始订单数据数组
const orderData = [
  { orderNo: "0001", deliveryNo: "D0001", invoiceNo: "I0001", deliveryDate: "21-03-2018" },
  { orderNo: "0001", deliveryNo: "D0002", invoiceNo: "I0002", deliveryDate: "21-03-2018" }
];

// 用来存储新对象的数组
const processedOrders = [];

// 循环遍历，生成新对象
for (const item of orderData) {
  // 按需构造新对象，还能添加格式转换、字段重命名等逻辑
  const newOrderObj = {
    orderNumber: item.orderNo,
    deliveryId: item.deliveryNo,
    invoiceId: item.invoiceNo,
    deliveryDate: new Date(item.deliveryDate) // 把日期字符串转成Date对象
  };
  processedOrders.push(newOrderObj);
}

// 现在processedOrders里就是你需要的新对象集合
console.log(processedOrders);

核心思路就是在每一次循环里，基于当前迭代项的数据构建新对象，你可以根据业务需求修改属性名、过滤字段或者添加额外处理逻辑。

你的场景是表格每行对应一个process按钮，点击后要把该行的数据传到新对象里，本质是给每个按钮绑定对应行的数据，点击时触发处理逻辑。下面用原生HTML+JavaScript给你写一个完整的可运行示例：

1. HTML结构（渲染表格） #

<input type="text" id="orderInput" placeholder="输入订单编号" />
<button onclick="loadOrderData()">查询</button>
<table id="orderTable" border="1">
  <thead>
    <tr>
      <th>Order No</th>
      <th>Delivery No</th>
      <th>Invoice No</th>
      <th>Delivery Date</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- 循环生成的行将插入这里 -->
  </tbody>
</table>

<!-- 用来展示传递后的新对象 -->
<div id="resultDisplay"></div>

2. JavaScript逻辑（渲染表格+按钮绑定） #

// 模拟后端返回的订单数据
function getOrderData(orderNo) {
  return [
    { orderNo: "0001", deliveryNo: "D0001", invoiceNo: "I0001", deliveryDate: "21-03-2018" },
    { orderNo: "0001", deliveryNo: "D0002", invoiceNo: "I0002", deliveryDate: "21-03-2018" }
  ].filter(item => item.orderNo === orderNo);
}

// 加载并渲染表格
function loadOrderData() {
  const orderNo = document.getElementById("orderInput").value;
  const data = getOrderData(orderNo);
  const tableBody = document.getElementById("tableBody");
  tableBody.innerHTML = ""; // 清空旧数据

  data.forEach(item => {
    // 创建表格行
    const row = document.createElement("tr");
    
    // 插入单元格和按钮，注意用JSON.stringify把当前行数据转成字符串传递
    row.innerHTML = `
      <td>${item.orderNo}</td>
      <td>${item.deliveryNo}</td>
      <td>${item.invoiceNo}</td>
      <td>${item.deliveryDate}</td>
      <td><button onclick="processRow(${JSON.stringify(item)})">Process</button></td>
    `;
    
    tableBody.appendChild(row);
  });
}

// 处理按钮点击，将行数据转为新对象
function processRow(rowData) {
  // 按照业务需求构造新对象，比如添加来源标识、处理时间等
  const newProcessObj = {
    source: "order_process",
    orderInfo: {
      orderNo: rowData.orderNo,
      deliveryNo: rowData.deliveryNo,
      invoiceNo: rowData.invoiceNo,
      deliveryDate: new Date(rowData.deliveryDate)
    },
    processedTime: new Date().toISOString()
  };

  // 展示结果（实际项目里可以发请求、存入状态管理工具等）
  document.getElementById("resultDisplay").innerHTML = `
    <h4>处理后的新对象：</h4>
    <pre>${JSON.stringify(newProcessObj, null, 2)}</pre>
  `;
}

关键说明： #

• 按钮绑定数据的方式：用JSON.stringify(item)把当前行的对象转成字符串，作为参数传给processRow函数，这样点击按钮时就能精准拿到对应行的完整数据。
• 新对象构造：在processRow函数里，你可以完全按照业务需求定义新对象的结构——比如添加来源标记、处理时间，或者对原始数据做格式转换。
• 如果用Vue/React这类框架，思路更简单：循环渲染表格行时，给按钮绑定点击事件并直接传递当前行的item，比如Vue写@click="processRow(item)"，React写onClick={() => processRow(item)}，之后在事件函数里基于item构造新对象即可。

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