React Native数组排序问题：排序副本时原数组同步变更

问题场景 #

使用数组sort函数时遇到问题：两个状态变量devName和devNameSort存储相同的数组值，想要排序其中一个数组并获取原数组的索引，但排序devNameSort时，devName也会同步改变，需要找到解决方法。

初始数组值：

dev = ["08d5", "151e", "d467", "0655", "a853"]
devName = ["W1", "W4", "W2", "W3", "W0"]
devNameSort = ["W1", "W4", "W2", "W3", "W0"]

组件相关代码 #

组件初始化及componentDidMount代码如下：

this.state = {
    dev: this.props.route.params.dev,
    devName: this.props.route.params.devName, 
    devNameSort: this.props.route.params.devNameSort,
}

componentDidMount() {
    const sd = this.state.dev
    const sdn = this.state.devName
    console.log(sd);
    console.log(sdn);
    setTimeout( ()=> {
        const sdbs = this.state.devSort;
        console.log(sdn);
        sdbs.sort().map( (bs,index) => {
            const sdIndex = sdn.indexOf(bs)
            console.log(bs,":",index, sdIndex)
            console.log(sd[sdIndex])
        })
    }, 1000);
}

输出对比 #

实际输出与预期结果对比如下：

尝试与解决过程 #

直接复制数组无效 #

尝试直接赋值复制数组，但修改其中一个时另一个也同步变化：

const sdn = this.state.devName
const sdCopy = this.state.devName
console.log("Orginal - before sort", sdn);
sdn.sort()
console.log("Orginal", sdn);
console.log("Copy", sdCopy);

日志输出：

LOG  Orginal - before sort ["W4", "W1", "W3"]
LOG  Orginal ["W1", "W3", "W4"]
LOG  Copy ["W1", "W3", "W4"]

可行的解决方案 #

使用JSON.parse(JSON.stringify())实现数组拷贝，排序拷贝后的数组不会影响原数组：

const sdn = this.state.devName 
const sdCopy = JSON.parse(JSON.stringify(sdn))
sdCopy.sort().map((bs,index) => {
    const sdIndex = this.state.devName.indexOf(bs)
    console.log(bs,":",index, sdIndex)
    console.log(sd[sdIndex])
})

原理说明 #

在JavaScript中，数组属于引用类型，直接赋值给新变量时，新变量和原变量指向的是内存中的同一个数组对象。而sort函数是原地排序，会直接修改原数组的元素顺序，所以修改其中一个变量会影响另一个。

JSON.parse(JSON.stringify())的方式是将数组序列化为JSON字符串，再反序列化为新的数组对象，相当于创建了一个完全独立的新数组（对于纯字符串数组足够），此时排序新数组就不会影响原数组了。

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