JavaScript循环结束后subKeyValuesList数组无法重置为原始值问题

问题根因 #

• JavaScript中数组属于引用类型，你执行subKeyValuesList2 = subKeyValuesList时并没有创建新的独立数组，只是让两个变量指向了内存中的同一个数组对象。你调用splice修改subKeyValuesList2时，原始的subKeyValuesList也会被同步修改，等到你想重置的时候，原始值已经被改动过，自然无法恢复到初始状态。
• 你现有的重置逻辑即使触发，也是给subKeyValuesList2重新赋值同一个已经被修改的数组引用，达不到重置效果。

修复方案 #

每次需要使用数组副本时，从初始原始数组浅拷贝一份独立的新数组即可，浅拷贝可以用展开语法[...arr]或者arr.slice()实现。调整后的代码如下：

// 把初始值单独存为常量，永远不修改它，作为重置的基准
const SUB_KEY_ORIGIN = ['0009397b-563f-4dfc-8022-1516dbdffbda','1358d485-69e6-43bb-bc2f-ff25baa6a810']
var subKeyValuesList = [...SUB_KEY_ORIGIN]

for (var fi = 0; fi < fields.length; fi++) {
    // 每次外层循环开始就直接拷贝新副本，不需要等到内层循环结束再重置
    var subKeyValuesList2 = [...SUB_KEY_ORIGIN]
    var fieldSplitTemp = fieldLong.replace(/[`~!@#$%^&*()_|+\=?;:'"<>{}[\]\\\/]/gi, 'x')
    var fieldSplit = fieldSplitTemp.split("xix.")
    var fieldCount = fieldSplit.length
                                    
    var arrayPath = fieldSplit.splice(0, fieldCount - 1)

    for (let i = 0; i < eval(arrayPath[0]).length; i++) {
                
        for (let ii = 0; ii < eval(arrayPath[0] + "[i]." + arrayPath[1]).length; ii++) {
            var keyNames = Object.keys(eval(arrayPath[0] + "[i]." + arrayPath[1] + "[ii]"));
            var subKeyName = keyNames[0]
            var parent = eval(arrayPath[0] + "[i]." + arrayPath[1] + "[ii]." + subKeyName)
                            
            var index = subKeyValuesList2.indexOf(parent);
            if (index !== -1) {                                    
                subKeyValuesList2.splice(index, 1)
            }           
        }
    }
}

可选优化建议 #

代码中大量使用eval会带来性能、安全问题，也不利于调试，建议换成对象属性访问的写法，比如把多层级的属性路径拆分后用reduce遍历获取对应值即可。

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