浅拷贝的坑

需求：groupPriceModeList是数组，需要给每个item的priceModeList中每项添加一个taxUnitPrice，需要用到item的tax来计算

错误写法：

 requestDetailList.forEach((item: any) => {
        item.manHourUnitPrice = GroupManHourUnitPrice
        item.priceModeList = groupPriceModeList
        item.priceModeList.forEach((priceModeItem: any) => {
          priceModeItem.tax = item.tax
          priceModeItem.taxUnitPrice =
            priceModeItem.efficiency !== '0.000'
              ? ((GroupManHourUnitPrice / priceModeItem.efficiency) * (1 + item.tax)).toFixed(3)
              : (0.0).toFixed(3)
        })
      })

问题：这样导致所有priceModeItem的taxUnitPrice被最后一次循环的值覆盖

原因：item.priceModeList = groupPriceModeList 是浅拷贝，每次操作都会修改原对象，因此会存储最后一个priceModeItem的taxUnitPrice，页面上显示的也都是最后一个priceModeItem的taxUnitPrice

解决：

requestDetailList.forEach((item: any) => {
        item.manHourUnitPrice = GroupManHourUnitPrice
        item.priceModeList = groupPriceModeList.map((priceModeItem: any) => {
          const { efficiency } = priceModeItem
          const taxUnitPrice =
            efficiency !== '0.000'
              ? ((GroupManHourUnitPrice / efficiency) * (1 + item.tax)).toFixed(3)
              : (0.0).toFixed(3)
          return { ...priceModeItem, taxUnitPrice }
        })

每次map后会生成一个新的数组给item.priceModeList ，就不会被覆盖了