Question

我从app-config.js文件中加载一个变量，然后用.slice（）复制它，以防止其状态发生变异。令我非常懊恼的是，我用来改变数据的功能似乎没有考虑到这种避免变异的尝试。 mySensitivityVars不断变化，但由于我只是直接对mySeries采取行动，因此我不太确定。关于为什么会发生这种情况的任何想法？这是代码：

    var mySeries = mySensitivityVars.slice();


//Dummy Processing Algorithm
    function myDummyAlgo(sliderIndex, newValue, range) {
         console.log(mySeries[sliderIndex].data)

        var modifier = newValue/(range/2)
        var newSeries = mySensitivityVars[sliderIndex].data.map(function(num){
            return num * modifier
        })
        console.log(newSeries)
        // mySeries[sliderIndex].data = newSeries

        // console.log(sensitivityChart.series[0].data)
        sensitivityChart.series[sliderIndex].setData(newSeries);
    };

Answer 1

Slice可以复制数组，但是不会复制数组中引用的任何对象（只复制引用）

Answer 2

没有看到mySensitivityVars的内容很难说，但我的猜测是你改变了对原始对象的引用而不是重复的对象。

mySensitivityVars中有任何物品吗？如果是这样，mySeries中的相应对象将指向mySensitivityVars中的原始对象而不是独立的副本，这就是您可能会看到突变问题的原因。

Answer 3

如果你想让它变异，你应该克隆数组而不是复制它。你可以使用JSON.parse（JSON.stringify（mySensitivityVars））这是一种非常快速的深度克隆技术。这将确保分配新对象，而不是复制引用。

Answer 4

当你这样做时：

mySeries[sliderIndex].data newSeries;

数组mySeries是mySensitivityVars的副本，但数组中的对象不是副本。两个数组都包含对相同对象的引用，修改data属性会影响它们。您还需要复制对象：

mySeries = mySentitivyVars.map(o => Object.assign({}, o));

如果对象包含对其他对象的引用，则可能需要执行深层复制。见What is the most efficient way to deep clone an object in JavaScript?

为什么在使用slice（）后我的数组会被更改？

4 个答案: