vue子组件的数据处理后竟然影响了父组件的数据，导致父级的数据也同步变更了的问题解决

问题描述

需要在子组件中处理来自父组件的数据，将父级的千分位去掉，转为纯数字：

const originalData = [
  ["16", "33", "17", "1", "1", "14", "23", "21", "19", "76", "40", "16"],
  ["37,052.50", "2,346.99", "13,004.61", "0", "9,932.42", "33,316.57", "117,774.72", "12,736.32", "18,883.98", "242,959.26", "32,550.61", "6,036"]
];

在通过父级传递给子组件后，用props接收，在子组件中进行处理，最终想要的结果如下：

const originalData = [
  ["16", "33", "17", "1", "1", "14", "23", "21", "19", "76", "40", "16"],
  ["37052.50", "2346.99", "13004.61", "0", "9932.42", "33316.57", "117774.72", "12736.32", "18883.98", "242959.26", "32550.61", "6036"]
];

子组件的处理代码如下（省略了部分结构代码）：

 props: {
    pdata: {
      type: Array,
      required: true,
      default: () => []
    }
  },

const data = [
  ["16", "33", "17", "1", "1", "14", "23", "21", "19", "76", "40", "16"],
  ["37,052.50", "2,346.99", "13,004.61", "0", "9,932.42", "33,316.57", "117,774.72", "12,736.32", "18,883.98", "242,959.26", "32,550.61", "6,036"]
];
//通过for循环嵌套遍历数组，去除千分位
for (let i = 0; i < data.length; i++) {
  for (let j = 0; j < data[i].length; j++) {
    data[i][j] = data[i][j].replace(/,/g, '');
  }
}

console.log(data);//打印的结果符合我的要求，但是发现父级的千分位也没有了

这种方式是直接改变了原数组的，导致父数据也没有千分位了，即使我深度复制父级数据再处理后，还是有此问题。

const data=[...this.pdata]
//而且我打印过，data！==pdata,可是还是出现了此问题，也就是父数据也没有千分位了
data = [
  ["16", "33", "17", "1", "1", "14", "23", "21", "19", "76", "40", "16"],
  ["37,052.50", "2,346.99", "13,004.61", "0", "9,932.42", "33,316.57", "117,774.72", "12,736.32", "18,883.98", "242,959.26", "32,550.61", "6,036"]
];

for (let i = 0; i < data.length; i++) {
  for (let j = 0; j < data[i].length; j++) {
    data[i][j] = data[i][j].replace(/,/g, '');
  }
}

console.log(data);// 尽管深度复制了，打印的结果符合我的要求，但是发现父级的千分位也没有了

问题解决

最终，我通过map解决了问题。最终将其改为：

const ndata = data.map((subArray) => {
       return subArray.map((item) => item.replace(/,/g, ""));
 });
console.log(ndata); //打印的结果符合我的要求，也不影响父级的千分位

我猜测原因可能是上面的扩展运算符只是影响到了第一层，第二层的数据还是原始数据的引用。

另外的问题是，为何在子组件处理的数据会影响到父组件的数据呢？有知道的同学可在下方留言

如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师！