为什么当我用几个 for () function 遍历数组时原始数组会发生变化

Question

我有一个简单的 javascript 代码。 但它不像我预期的那样工作。 我想从 javascript object 中提取数据，但是每当我执行 function 时，原始 ZA8CFDE6331BD59EB6AC96F89111 没有改变 B 数组。 是不是object数组结构的问题。 还是异步问题？

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button onclick="test()"> </button>
</body>

<script type="text/javascript">
  var testArray = [];
var num1 = 0;
    var allorderDemo = [
    {
        name:'test1',
        orders: [
        {name: 'fanta', num:1},
        {name: 'cola', num:2},
        {name: 'sweet', num:1}
        ]
    },
    {
        name:'test2',
        orders: [
        {name: 'fanta', num:1},
        {name: 'cola', num:2},
        {name: 'sweet', num:1}
        ]
    },
    {
        name:'test3',
        orders: [
        {name: 'fanta', num:1},
        {name: 'cola', num:2},
        {name: 'ox', num:1}
        ]
    }
    ];
     function test(){
        testArray = [];
        for(var i = 0; i < allorderDemo.length; i++){
            for(var j = 0; j < allorderDemo[i].orders.length; j++){
                var index = testArray.findIndex(function(element) {
                        return (element.name == allorderDemo[i].orders[j].name);
                });
                console.log("index",index);
                if(index > 0) testArray[index].num += allorderDemo[i].orders[j].num;
                else testArray.push(allorderDemo[i].orders[j]);
            }
        }
        console.log(allorderDemo.length);
      console.log(testArray);
      console.log(allorderDemo);
    }
</script>
</html>     

我想从 allorderdemo 中提取 testarray。 但是，每当我执行测试 function 时，console.log 都会显示原始数组 allorderdemo 发生了变化，因为我没有在 function 中更改它。 为什么会发生此错误。 请帮我。

Answer 1

您应该将第 50 行从：

else testArray.push(allorderDemo[i].orders[j]);

至：

else testArray.push({name: allorderDemo[i].orders[j].name, num:allorderDemo[i].orders[j].num});

原因是因为您的代码推送到 testArray 的只是对 allorderDemo 中已经存在的相同 object 的引用。 我编写的这个新代码将使用相同的数据创建一个新的 object 并将其推入 testArray。

Answer 2

发生这种情况的原因是 arrays 和对象都是非原始数据类型。 您可以在此处阅读更多相关信息 - https://medium.com/javascript-in-plain-english/javascript-reviewing-primitive-and-non-primitive-data-types-5bc4ca68c3de

在您的情况下，您必须执行以下操作：

代替

testArray.push(allorderDemo[i].orders[j]);`

和

testArray.push({...allorderDemo[i].orders[j]});

这样，它将创建一个新的 JSON object 并将其推送到 testArray。 有关 spread(...) 语法的更多详细信息（ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax ）

此外，您应该将索引更改为index > -1 ，因为索引从 0 开始。

Answer 3

我认为是因为这一行“testArray.push(allorderDemo[i].orders[j]”

原因是.orders[j] 指向一个 object 例如 {name: 'fanta', num:1}，而 javascript 传递对象的方式是它传递的值是对 ZA8CFDE6331BD59EB2AC96F891 的引用将其推入另一个数组，您将 testArray 中的项目设置为指向相同的 object。 然后，当您修改 testArray 上的 num 时，您正在修改原始数组指向的相同 object。

有关 javascript 如何传递值的参考 r 参考，请参阅此答案： JavaScript 是按引用传递还是按值传递语言？