代码异常(js中forEach)NO.3

1. 环境

Vue3，Element Plsu

2. 示例代码

    dataList.value.forEach((x) => {
      if (x.id == ids.value[0]) {
        x = { id: ids.value[0], ...form.value }
      }
    })

3. 情景描述

循环不能正确改变dataList.value里面的值

4. 原因

• 在 JavaScript 中，forEach 的回调函数接收到的参数 x 是数组中当前元素的一个引用。
• 如果你直接对 x 赋值（如 x = {…}），这只是改变了局部变量 x 的值，并不会影响原始数组 dataList.value。

5. 解决方案

5.1 map

    dataList.value = dataList.value.map((x) => {
      if (x.id == ids.value[0]) {
        return { id: ids.value[0], ...form.value } // 修改符合条件的对象
      }
      return x // 不符合条件时保留原对象
    })

5.2 findIndex

const index = dataList.value.findIndex(x => x.id == ids.value[0]);
if (index !== -1) {
  dataList.value[index] = { id: ids.value[0], ...form.value };
}